Toggle Selected Rows of Page Conditionally in TanStack Table

83 Views Asked by At

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,
    },
  });
0

There are 0 best solutions below