Multisort with Row + Subrows not wokring

Hi! So I want to keep the sorting of the grouped row whenever I sort the subrows.

So in the table below, I want the dates to still be sorted when I sort the names in descending order for example.

I have a custom sorting updater function like this to always have the sorting of the rows in the state

const [sorting, setSorting] = useState<SortingState>[]([]);

const customSetSorting = (updater: Updater<SortingState>) => {
  if (typeof updater !== "function") {
    return;
  }

  setSorting((prevSorting) => {
    const newSorting = updater(prevSorting);
    return newSorting.find((colSort) => colSort.id === "dateSent")
      ? newSorting
      : [{ id: "dateSent", desc: true }, ...newSorting];
  });
};

const [sorting, setSorting] = useState<SortingState>[]([]);

const customSetSorting = (updater: Updater<SortingState>) => {
  if (typeof updater !== "function") {
    return;
  }

  setSorting((prevSorting) => {
    const newSorting = updater(prevSorting);
    return newSorting.find((colSort) => colSort.id === "dateSent")
      ? newSorting
      : [{ id: "dateSent", desc: true }, ...newSorting];
  });
};

With this, it does set the sorting state that I want but it does not actually work. It keeps the

dateSent

dateSent

sorted but it doesn't really sort the names. Clicking the headers to sort the names reflects on the

SortingState

SortingState

(desc true to false and vice versa) but it does not reflect on the table itself. Also, I do have all the columns set to

enabledMultiSort: true

enabledMultiSort: true

TanStack•2y ago•

1 reply

spotty-amber

Multisort with Row + Subrows not wokring

const [sorting, setSorting] = useState<SortingState>[]([]);

const customSetSorting = (updater: Updater<SortingState>) => {
  if (typeof updater !== "function") {
    return;
  }

  setSorting((prevSorting) => {
    const newSorting = updater(prevSorting);
    return newSorting.find((colSort) => colSort.id === "dateSent")
      ? newSorting
      : [{ id: "dateSent", desc: true }, ...newSorting];
  });
};

const [sorting, setSorting] = useState<SortingState>[]([]);

const customSetSorting = (updater: Updater<SortingState>) => {
  if (typeof updater !== "function") {
    return;
  }

  setSorting((prevSorting) => {
    const newSorting = updater(prevSorting);
    return newSorting.find((colSort) => colSort.id === "dateSent")
      ? newSorting
      : [{ id: "dateSent", desc: true }, ...newSorting];
  });
};

With this, it does set the sorting state that I want but it does not actually work. It keeps the

dateSent

dateSent

sorted but it doesn't really sort the names. Clicking the headers to sort the names reflects on the

SortingState

SortingState

(desc true to false and vice versa) but it does not reflect on the table itself. Also, I do have all the columns set to

enabledMultiSort: true

enabledMultiSort: true

Multisort with Row + Subrows not wokring

Similar Threads

Multisort with Row + Subrows not wokring

Similar Threads

Similar Threads

Similar Threads