How to keep specific rows at the bottom of the table, when sorting by column?
Hello. I couldn't find any information in the internet about creating custom sorting functions in react-table v7, so i will try to ask here.
I have a lot of tables, and all of them are sortable by all columns. Almost all tables always have specific rows, that should be displayed at the bottom of the table, even when user decides to sort rows by sepcific column. How can i achieve this custom sorting?
UseTable setup:
Custom sort type function (Keep in mind that this function doesn't work, even if i always return 0, table is still being sorted by selected column):
Example column setup.
I have a lot of tables, and all of them are sortable by all columns. Almost all tables always have specific rows, that should be displayed at the bottom of the table, even when user decides to sort rows by sepcific column. How can i achieve this custom sorting?
UseTable setup:
const table = useTable(
{
columns,
data: tableData,
sortTypes: {
...sortTypes,
},
defaultColumn,
initialState: {
pageIndex: 0,
pageSize: paginationOptions.length ? paginationOptions[0] : 10,
sortBy,
},
},
useResizeColumns,
useFlexLayout,
useFilters,
useSortBy,
usePagination,
useRowSelect,
)Custom sort type function (Keep in mind that this function doesn't work, even if i always return 0, table is still being sorted by selected column):
export default (rowA: Row, rowB: Row, columnId: string, desc: boolean): number => {
if (rowB.original.row_names === 'TOTAL') return -1
return 0
}Example column setup.
{
disableFilters: true,
sortType: 'defaultSortType',
Header: () => 'Header',
Cell: (cell) => {
return <p className="text-2xs xl:text-sm">{cell.value}</p>
},
accessor: 'test',
width: 1,
}
