# Shadcn Columns blocks

> Column visibility, pinning, resizing, density, and settings controls.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/columns
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/data-grid.md
- Blocks: 5
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- Wide records with more fields than fit, where viewers show, hide, add or swap columns
- Table display settings a viewer changes, such as density, a sticky header or resizable and movable columns
- Role and permission matrices whose scope columns change with the selected tab

## When not to use

- A table with a fixed set of columns that no viewer needs to change: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A long list whose main job is narrowing records through a multi field rule builder: use the [Filtering blocks](https://web.dev.reui.io/blocks/data-grid/filtering.md)
- Thousands of rows loaded as the reader scrolls, with no page controls: use the [Virtualization blocks](https://web.dev.reui.io/blocks/data-grid/virtualization.md)

## Agent notes

- Every page.tsx centers the grid in a `min-h-svh` main with `max-w-7xl` and padding; drop that main when the grid sits in an app shell
- Search and filters run in the browser over the demo array handed to `useTable`; move them to your API for large tables
- Column and display choices live in component `useState` and reset on reload; persist them per user when they should stick

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start), used by 5 of 5 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 5 of 5 blocks

## Blocks

- [Access Permissions Matrix](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-1.md): Workspace permissions data grid with tab-swapped scope columns and per-cell access toggles. Best for an access matrix whose 3 tabs swap in 5 scope columns of Switch cells, with amber review states and 2 rows pinned on top.
- [Course Catalog](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-2.md): Course Catalog Data Grid with Settings Popover for Density and Column Visibility. Best for course rows with thumbnails, star scores, learner avatar stacks and completion rings, where 5 of 6 data columns toggle from pill buttons.
- [Work Queue](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-3.md): Work queue data grid with table and card view toggle and column display controls. Best for a work queue that flips between a table and stage progress cards, with a hideable filter row and a sticky header switch.
- [Member Display Columns](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-4.md): Members directory data grid with toggleable display columns and view settings popover. Best for members on rounded, spaced rows, with a view popover of sort order pills, a paused member switch and 8 column toggles.
- [Company Attributes](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-5.md): CRM companies grid with a drill-down cascader that adds real columns on demand. Best for attribute columns picked from a grouped, searchable cascader or created by type, plus bulk delete and a details sheet edited row by row.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.