Default sorting icon
How do I set a default sorting icon? I've seen some ppl suggest using canSort in an operation but it doesn't seem to exist in v8?
I'm using the default sorting code w/ bootstrap icons
I'm using the default sorting code w/ bootstrap icons
const [sorting, setSorting] = useState([]);
const table = useReactTable({
data: data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
sorting: sorting
},
onSortingChange: setSorting
})
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id} colSpan={header.colSpan} onClick={header.column.getToggleSortingHandler()}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
{
{
asc: <i className="bi bi-caret-up-fill"></i>,
desc: <i className="bi bi-caret-down-fill"></i>
}[header.column.getIsSorted() ?? null]
}
</th>
))}
</tr>
))}
</thead>const [sorting, setSorting] = useState([]);
const table = useReactTable({
data: data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
sorting: sorting
},
onSortingChange: setSorting
})
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id} colSpan={header.colSpan} onClick={header.column.getToggleSortingHandler()}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
{
{
asc: <i className="bi bi-caret-up-fill"></i>,
desc: <i className="bi bi-caret-down-fill"></i>
}[header.column.getIsSorted() ?? null]
}
</th>
))}
</tr>
))}
</thead>
