# Company Attributes block

> CRM companies grid with a drill-down cascader that adds real columns on demand

Companies grid whose columns are added at runtime by a Cascader attribute picker: drillable groups, cross-level search, added columns checked, a footer submenu that creates an attribute by type. ReUI Filters, hide, reorder, pin.

- Type: Pro block
- Category: [Columns](https://web.dev.reui.io/blocks/data-grid/columns.md)
- Page: https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-5
- 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
- MCP: `get_block("data-grid-columns-5")`
- Built with: Alert Dialog, Avatar, Badge, Button, Cascader, Checkbox, Data Grid, Dialog, Dropdown Menu, Field, Filters, Frame, Input, Input Group, Item, Popover, Progress, Scroll Area, Select, Separator, Sheet, Skeleton, Spinner, Switch, Textarea, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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

## Agent notes

- Replace `COMPANIES` and `COMPANY_ATTRIBUTE_TREE`; `handleSaveCompany`, `handleRowAction` and `handleConfirmDelete` write only to local state
- The `handleCreateAttribute` handler adds an empty column with `sortable` off; store its values and type in your own schema
- The details sheet waits on a `SAVE_DELAY_MS` timer before `onSave`; swap the timer for your API request

## When not to use

- Cells edited in place, with range selection and undo: use [Task Spreadsheet](https://web.dev.reui.io/blocks/data-grid/editing/data-grid-editing-5.md) (`get_block("data-grid-editing-5")`)
- A short flat list of column toggles with no groups or search: use [Member Display Columns](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-4.md) (`get_block("data-grid-columns-4")`)

## 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)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/data-grid-columns-5
```

## About Columns blocks

### 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

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.