I'm using Tanstack React Table V8.9 and I have some weird behaviour when sorting columns with my custom sorting function (I've tried the built in ones, same problem). When there are some null
values in the column, the sorting gets "stuck" after clicking the column header twice, basically that column won't sort anymore unless another column gets sorted. The behaviour is very inconsistent, if I change one of the null
values to a string it works even if there are still null
values in that column. Also, the columns populated by the name
and lastModifiedByUser
fields have the "stuck" behaviour described above, while the column populated by the description
works absolutely fine even if it has some null
values. What am I missing?
Another thing, how do I modify my sorting function in order to sort by inUseCount
which is a number and not a string?
Sorting function:
const customSorting = (rowA, rowB, columnId, desc) => {
if (!rowA.getValue(columnId) && !rowB.getValue(columnId)) {
return 0
}
if (!rowA.getValue(columnId)) {
return desc ? -1 : 1
}
if (!rowB.getValue(columnId)) {
return desc ? 1 : -1
}
return rowA.getValue(columnId).localeCompare(rowB.getValue(columnId))
}
Table:
const table = useReactTable({
data,
columns,
sortingFns: {
customSorting,
},
columnResizeMode: "onChange",
getCoreRowModel: getCoreRowModel(),
state: {
sorting: tableState.sorting,
pagination,
columnVisibility: tableState.columnVisibility,
columnSizing: tableState.columnSizing,
},
onSortingChange: sorting => {
tableStateSetSorting(tableStateDispatch, sorting())
},
......
})
Column example:
{
id: "description",
header: value => (
<ColumnHeaderSort
column={value.column}
label={t("common.description")}
/>
),
accessorKey: "description",
...columnSizes.freeLarge,
sortingFn: "customSorting",
cell: ({ getValue }) => <>{getValue()}</>,
},
Data:
const data = [
{
description: "www sss",
inUseCount: 3,
lastModifiedByUser: null,
lastModifiedDate: "2023-08-24T11:25:32.6570000Z",
name: null,
},
{
description: null,
inUseCount: 6,
lastModifiedByUser: "John",
lastModifiedDate: null,
name: "zzz New inspection",
},
{
description: "ss ssss",
inUseCount: 8,
lastModifiedByUser: null,
lastModifiedDate: "2023-09-14T11:25:32.6570000Z",
name: "ddd daily inspection",
},
{
description: null,
inUseCount: 2,
lastModifiedByUser: "Mark",
lastModifiedDate: null,
name: null,
},
{
description: null,
inUseCount: 2,
lastModifiedByUser: "Linda",
lastModifiedDate: "2023-11-04T11:25:32.6570000Z",
name: "aaa daily inspection",
},
]