ColumnPicker

import type { ColumnDef } from '@tanstack/react-table';
import { ColumnPicker, DataTable, useColumnState } from '@arbol-ai/ui';
import type { ColumnPickerColumn, DataTableFeatures } from '@arbol-ai/ui';

interface Agent {
  id: string;
  name: string;
  channel: string;
  email: string;
  conversations: number;
}

const AGENTS: Agent[] = [
  { id: 'a1', name: 'Front desk', channel: 'Phone', email: 'desk@example.com', conversations: 412 },
  { id: 'a2', name: 'Reminders', channel: 'WhatsApp', email: 'reminders@example.com', conversations: 1280 },
  { id: 'a3', name: 'After hours', channel: 'Web chat', email: 'night@example.com', conversations: 96 },
];

const PICKER_COLUMNS: ColumnPickerColumn[] = [
  { id: 'name', label: 'Name', canHide: false },
  { id: 'channel', label: 'Channel' },
  { id: 'email', label: 'Email', defaultVisible: false },
  { id: 'conversations', label: 'Conversations' },
];

const COLUMNS: ColumnDef<DataTableFeatures, Agent>[] = [
  { accessorKey: 'name', header: 'Name', meta: { fill: true } },
  { accessorKey: 'channel', header: 'Channel', size: 130 },
  { accessorKey: 'email', header: 'Email', size: 200 },
  { accessorKey: 'conversations', header: 'Conversations', size: 150, meta: { align: 'end' } },
];

const PickerExample = () => {
  const { columnVisibility, onOrderChange, onReset, onVisibleChange, state } = useColumnState({
    columns: PICKER_COLUMNS,
  });
  return (
    <DataTable
      aria-label="Agents"
      columnOrder={state.order}
      columnVisibility={columnVisibility}
      columns={COLUMNS}
      data={AGENTS}
      getRowId={(agent) => agent.id}
      toolbar={
        <div className="flex justify-end">
          <ColumnPicker
            columns={PICKER_COLUMNS}
            onOrderChange={onOrderChange}
            onReset={onReset}
            onVisibleChange={onVisibleChange}
            state={state}
          />
        </div>
      }
    />
  );
};

<PickerExample />