# Work Queue block

> Work queue data grid with table and card view toggle and column display controls

Work queue task tracker with tabs, table/card view switch, and a Display popover for density, sticky header, resizable and movable columns, and toggled properties. Filter row, sorting, pagination. ReUI DataGrid, Filters, Badge plus shadcn Card, Tabs.

- 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-3
- 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-3")`
- Built with: Avatar, Badge, Button, Card, Data Grid, Dropdown Menu, Empty, Field, Filters, Icon Stack, Item, Popover, Progress, Select, Separator, Switch, Tabs, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A work queue that flips between a table and stage progress cards, with a hideable filter row and a sticky header switch

## Agent notes

- Replace `WORK_ITEMS`; each record's `tabs` list picks its tab and `applyFiltersToData` filters the rows in the browser
- The edit, delete and archive actions in `handleWorkItemAction` only show toasts; copy writes the item id to the clipboard
- The `tableDensity`, `stickyHeader`, `columnsResizable` and `columnsMovable` switches change only the table, not `WorkQueueCardGrid`

## When not to use

- Thousands of rows that should load as the reader scrolls: use [Card Payments Ledger](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-1.md) (`get_block("data-grid-virtualization-1")`)
- Rows paged by an API, with sorting and search sent to the server: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)

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

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