React-table how to disable client-side sorting and use just server side Sorted Data

Question

I want to use server-side sorted Data and want to bypass react-table sorting function. I just want to use Sort click method.

Answer 1

To use a custom sortable function, you can use two different solutions.

1/ Use a default sorting method

You can use directly the defaultSortMethod props in the ReactTable component, with here the default method used by the react-table library that you can replace by your own:

defaultSortMethod: (a, b, desc) => {
    // force null and undefined to the bottom
    a = a === null || a === undefined ? '' : a
    b = b === null || b === undefined ? '' : b
    // force any string values to lowercase
    a = typeof a === 'string' ? a.toLowerCase() : a
    b = typeof b === 'string' ? b.toLowerCase() : b
    // Return either 1 or -1 to indicate a sort priority
    if (a > b) {
      return 1
    }
    if (a < b) {
      return -1
    }
    // returning 0, undefined or any falsey value will use subsequent sorts or
    // the index as a tiebreaker
    return 0
  },

2/ Specify a sorting method for a specific column

You can add the props called sortMethod within a column, where you can call your custom sort function.

Here is an example with a custom sorting by length:

columns={[
  {
    Header: "Name",
    columns: [
      {
        Header: "First Name (Sorted by Length, A-Z)",
        accessor: "firstName",
        sortMethod: (a, b) => {
          if (a.length === b.length) {
            return a > b ? 1 : -1;
          }
          return a.length > b.length ? 1 : -1;
        }
      },
      {
        Header: "Last Name (Sorted in reverse, A-Z)",
        id: "lastName",
        accessor: d => d.lastName,
        sortMethod: (a, b) => {
          if (a === b) {
            return 0;
          }
          const aReverse = a.split("").reverse().join("");
          const bReverse = b.split("").reverse().join("");
          return aReverse > bReverse ? 1 : -1;
        }
      }
    ]
  }
]

And here is the working example as a whole.

Answer 2

If someone's working with legacy code and stuck at this problem, Passing manual prop to react table component works, if you're using reactable between versions [v6.8.6 - v7)

Answer 3

In order to perform a server-side sort and disable client-side sorting in material-react-table, you need to set manualSorting=true and provide a handler for onSortingChange as follows:

import MaterialReactTable from "material-react-table";

export function MyMuiTable(props) {
  /*...*/
  const handleSortChange = (item) => {
    let newColumnSorting = [];
    if (typeof item === "function") {
      const sortValue = item();
      const sortBy = sortValue[0].id;
      const sortDirection = sortValue[0].desc ? 'Descending' : 'Ascending';
      newColumnSorting = sortValue;
      if (props.onSortChange) {
        // call backend fetch of sorted data
        props.onSortChange(sortBy, sortDirection);
      }
      setSorting(newColumnSorting);
    }
  };

  return (
    <MaterialReactTable
      columns={myColumns}
      data={myDataRows}
      onSortingChange={handleSortChange}
      manualSorting
    />
  );
}