I am using TanStack Table ver8. I have the sorting working, however it appears there are 3 states
Click > sorting -> 'asc' Click > sorting -> 'des' Click > sorting -> No sorting .. repeat
I am trying to get the sorting beavior to be: Click > sorting -> 'asc' Click > sorting -> 'des' Click > sorting -> 'asc' .. repeat
How can I get the sorting to sort on every click?
I see in the docs column-ordering > resetcolumnorder but how do I use it.
const table = useReactTable({
data,
columns,
state: {
sorting,
},
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
});
<table className="table table-striped table-hover">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder ? null : (
<div
{...{
className: header.column.getCanSort()
? "cursor-pointer select-none"
: "",
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: (
<i className="fa-solid fa-circle-chevron-up opacity-25 ps-1"></i>
),
desc: (
<i className="fa-solid fa-circle-chevron-down opacity-25 ps-1"></i>
),
}[header.column.getIsSorted() as string] ?? (
<i className="fa-solid fa-circle-chevron-up opacity-25 ps-1"></i>
)}
</div>
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
