Open hviranicitco opened 1 year ago
I hit this problem also.
In the latest version of react-table (8.15.3) you can fix this yourself until a fix is released by defining a custom feature that overrides the existing behaviour:
// Fixes auto sorting: https://github.com/TanStack/table/issues/4908
import {
Column,
reSplitAlphaNumeric,
RowData,
sortingFns,
Table,
TableFeature,
} from '@tanstack/react-table';
const SortingFixFeature: TableFeature = {
createColumn: <TData extends RowData, TValue>(
column: Column<TData, TValue>,
table: Table<TData>,
): void => {
// copied from https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts
column.getAutoSortingFn = () => {
// slice(10) ==> slice(0, 10)
const firstRows = table.getFilteredRowModel().flatRows.slice(0, 10);
let isString = false;
for (const row of firstRows) {
const value = row?.getValue(column.id);
if (Object.prototype.toString.call(value) === '[object Date]') {
return sortingFns.datetime;
}
if (typeof value === 'string') {
isString = true;
if (value.split(reSplitAlphaNumeric).length > 1) {
return sortingFns.alphanumeric;
}
}
}
if (isString) {
return sortingFns.text;
}
return sortingFns.basic;
};
},
};
export default SortingFixFeature;
And then using it in your table
const table = useReactTable({
_features: [SortingFixFeature],
// columns, data, whatever else
});
@tannerlinsley Was the intended behavior that it only try to choose a sort function if there's 10 or more rows, or that it make that decision based on up to the first 10 rows. If it's the latter, I'll open a PR based on @hviranicitco's suggestion above.
Describe the bug
When you have less than 10 records and for a column if sortingFn is 'auto' which is default. The sorting does not work correctly.
This is happening because of this line in the code:
table-core/src/features/Sorting.ts
This should have been:
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/optimistic-shadow-3z2j6c?file=%2Fsrc%2FmakeData.ts%3A1%2C1
Steps to reproduce
Check the sorting on the Status column
Expected behavior
The Status column should be sorted correctly.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Windows with Chrome
react-table version
v8.9.2
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct