Reputation: 2035
I want to be able to toggle the selected rows of a table conditionally in a TanStack table. At the moment, by even handler looks like this,
onCheckedChange={(value) =>
table.toggleAllPageRowsSelected(!!value)
}
This toggles the selection of all the rows in the page, but I want to toggle it based on certain values; for instance, row?.original?.name === "something"
.
How can I do this?
This is where the above code is used,
const setColumns = (columns, handleButtonClick, handleSelectElement) => {
return columns.map((column) => {
return {
...column,
header: ({ table, column }) => {
return (
<>
{column?.id === 'select' ? (
<div className="flex items-center p-4">
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && 'indeterminate')
}
onCheckedChange={(value) =>
table.toggleAllPageRowsSelected(!!value)
}
className="border border-solid border-zinc-950"
aria-label="Select all"
/>
</div>
) : (
<> {column?.id} </>
)}
</>
);
},
cell: ...
const table = useReactTable({
data,
columns: setColumns(columns, handleButtonClick, handleSelectElement),
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: {
pagination: {
pageSize,
},
},
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
},
});
Upvotes: 0
Views: 617