ColumnsToggle

ColumnsToggle is a "Columns" button that opens a popover listing every hideable column of a TanStack Table instance, each with a checkbox to show or hide it. Pass it the table object you get from useReactTable; it reads the column visibility state and calls toggleVisibility for you. Drop it into a TableToolbar columnsToggle slot or anywhere beside a table.

Example

import { ColumnsToggle } from '@officina/ui';
import { useReactTable, getCoreRowModel } from '@tanstack/react-table';

function Toolbar({ data, columns }) {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
  return <ColumnsToggle table={table} label="Columns" />;
}

API