Sorting Guide

Shadcn Table supports almost any sorting scenario you may have. Client-side sorting is enabled by default, but you can opt to implement your own server-side sorting logic or even replace the default client-side sorting with your own implementation.

Relevant Table OptionsCopy Anchor Link

Relevant Column OptionsCopy Anchor Link

Relevant State OptionsCopy Anchor Link

Disable SortingCopy Anchor Link

Sorting can be disabled globally by setting the enableSorting table option to false. This will disable sorting for all columns. You can also disable sorting for individual columns by setting the enableSorting column option to false.

const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
    enableSorting: false, // disable sorting for this column
  },
];

const table = useShadcnTable({
  columns,
  data,
  enableSorting: false, //disable sorting for all columns
});

Initial/Default SortingCopy Anchor Link

You can sort by a column or multiple columns by default by setting the sorting state option in either the initialState or state props.

const table = useShadcnTable({
  columns,
  data,
  initialState: {
    sorting: [
      {
        id: 'age', //sort by age by default on page load
        desc: true,
      },
      {
        id: 'lastName', //then sort by lastName if age is the same
        desc: true,
      },
    ],
  },
});

Default Sorting FeaturesCopy Anchor Link

Client-side sorting is enabled by default. When sorting is toggled on for a column, the table will be sorted by the basic sorting algorithm by default.

Multi-SortingCopy Anchor Link

Multi-sorting is also enabled by default, which means you can sort by multiple columns at once. You can do this by clicking on a column header while holding down the shift key. The table will then be sorted by the previously sorted column, followed by the newly clicked column. Alternatively, if you want multi-sorting to be the default click behavior without the need to hold shift, you can set the isMultiSortEvent table option to () => true.

const table = useShadcnTable({
  columns,
  data,
  isMultiSortEvent: () => true, //multi-sorting will be the default click behavior without the need to hold shift
});

You can limit the number of columns that can be sorted at once by setting the maxMultiSortColCount prop, or you can disable multi-sorting entirely by setting the enableMultiSort table option to false.

Sorting RemovalCopy Anchor Link

By default, users can remove a sort on a column by clicking through the sort direction options or selecting "Clear Sort" from the column actions menu. You can disable this feature by setting the enableSortingRemoval table option to false.

const table = useShadcnTable({
  columns,
  data,
  enableSortingRemoval: false, //users will not be able to remove a sort on a column
});

Sort DirectionCopy Anchor Link

By default, columns with string datatypes will sort alphabetically in ascending order, but columns with number datatypes will sort numerically in descending order. You can change the default sort direction per column by specifying the sortDescFirst column option to either true or false. You can also change the default sort direction globally by setting the sortDescFirst table option to either true or false.

Sorting FunctionsCopy Anchor Link

By default, Shadcn Table will use the basic sorting function for all columns.

There are six built-in sorting functions you can choose from: alphanumeric, alphanumericCaseSensitive, text, textCaseSensitive, datetime, and basic. You can learn more about these built-in sorting functions in the TanStack Table Sorting docs.

Add Custom Sorting FunctionsCopy Anchor Link

If none of these sorting functions meet your needs, you can add your own custom sorting functions by specifying more sorting functions in the sortFns table option.

const table = useShadcnTable({
  columns,
  data,
  sortFns: {
    //will add a new sorting function to the list of other sorting functions already available
    myCustomSortingFn: (rowA, rowB, columnId) => // your custom sorting logic
  },
})

Change Sorting Function Per ColumnCopy Anchor Link

You can now choose a sorting function for each column by either passing a string value of the built-in sorting function names to the sortFn column option or by passing a custom sorting function to the sortFn column option.

const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
    sortFn: 'textCaseSensitive', //use the built-in textCaseSensitive sorting function instead of the default basic sorting function
  },
  {
    accessorKey: 'age',
    header: 'Age',
    //use your own custom sorting function instead of any of the built-in sorting functions
    sortFn: (rowA, rowB, columnId) => // your custom sorting logic
  },
];

Manual Server-Side SortingCopy Anchor Link

If you are working with large data sets, you may want to let your back-end APIs handle all of the sorting and pagination processing instead of doing it client-side. You can do this by setting the manualSorting table option to true. This will disable the default client-side sorting and pagination features and will let you implement your own sorting and pagination logic.

When manualSorting is set to true, Shadcn Table assumes that your data is already sorted by the time you are passing it to the table.

If you need to sort your data in a back-end API, then you will also probably need access to the internal sorting state from the table. You can do this by managing the sorting state yourself and then passing it to the table via the state table option. You can also pass a callback function to the onSortingChange prop, which will be called whenever the sorting state changes internally in the table

const [sorting, setSorting] = useState([]);

const table = useShadcnTable({
  columns,
  data,
  manualSorting: true,
  state: { sorting },
  onSortingChange: setSorting,
});

useEffect(() => {
  //do something with the sorting state when it changes
  //or use table.state.sorting
}, [sorting]);

return <ShadcnTable table={table} />;

Remote Sorting ExampleCopy Anchor Link

Here is the full Remote Data example showing how to implement server-side sorting, filtering, and pagination with Shadcn Table.

View Extra Storybook Examples