Custom sorting TanStack Table V8

Question

How can I sort a column if there is two values in the cells?

columnHelper.accessor('violations', {
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
}),

If there is a way, could you provide an example of an implementation?

you can use `sortingFns` and create a custom sorting function for violations column. [Sorting Fns Docs](https://tanstack.com/table/v8/docs/api/features/sorting#sortingfns). — Muhammad Nouman Rafique, Mar 12 '23 at 00:27

score 5 · Accepted Answer · answered Mar 14 '23 at 08:39

You can pass a custom sorting function per column. This is an example sorting on count:

{
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
  sortingFn: (
    rowA,
    rowB,
    columnId
  ) => {
    const numA = rowA.getValue(columnId).count;
    const numB= rowB.getValue(columnId).count;

    return numA < numB ? 1 : numA > numB ? -1 : 0;
  }
}

Custom sorting TanStack Table V8

1 Answers1