# Data Table Column Controls

Table column controls: show or hide columns, pin left or right, drag to reorder.

- id: `data-table-column-controls`
- Page: https://agentic-ui-kit.com/components/data-table-column-controls
- Live preview: https://agentic-ui-kit.com/live/component/data-table-column-controls?piece=data-table-column-controls

## Install

```bash
agentic-ui add data-table-column-controls
npx shadcn@4.17.0 add @agentic-ui/data-table-column-controls
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** column-visibility, column-pinning, column-reorder, drag-and-drop, keyboard-reorder, row-density, saved-layouts, local-storage, popover-or-inline, reduced-motion, dark-mode
- **Intents:** configure, manage-collection
- **Suits domains:** saas, analytics, operations, crm, devtools, ecommerce
- **Interaction:** click, drag-drop, keyboard-focus, toggle
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** table column controls: show or hide columns, pin left or right, drag to reorder, data table view settings with row density and saved layouts in localStorage, column picker for @tanstack/react-table with pinning and drag and drop order, customize table columns panel with reset and named views
- **Avoid when:** resizing column widths by dragging headers (use saas-table-column-resize), a table with three fixed columns: the control adds noise, layouts that must follow the user across devices: wire the layout JSON to your own storage
- **Preserve when adapting:** layout-normalization, storage-try-catch, keyboard-sort
- **Replace when adapting:** labels, locked-ids, storage-key, placement
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react, @tanstack/react-table, @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, @tanstack/react-table@^8.21.3, lucide-react@0.577.0
- **Registry dependencies:** lib-primitives