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>