---
title: "ColumnPicker"
description: "Shows, hides and reorders the columns of a table: a checkbox per column, a handle to drag it (or move it with the keyboard), and a reset. useColumnState keeps the state as plain ids the app can save, and gives DataTable its visibility and order."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ColumnPicker

## With a data table

The name cannot be hidden; the email column starts hidden.

```tsx
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 />
```

## Source

The examples above are [`src/components/column-picker/column-picker.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/column-picker/column-picker.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/data/column-picker/index.mdx