Tanstack React Table 8 sorting not working with null values

454 views Asked by At

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",
    },
]
0

There are 0 answers