# Access Permissions Matrix block

> Workspace permissions data grid with tab-swapped scope columns and per-cell access toggles

Access review matrix whose columns swap per General, Tags, and Permissions tab, each scope a Switch toggle cell with row pinning, sorting, role filter, and search. ReUI DataGrid, Frame, shadcn Tabs, Switch, Avatar. For RBAC admin, roles, team access.

- 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-1
- 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-1")`
- Built with: Avatar, Button, Button Group, Data Grid, Dropdown Menu, Frame, Input Group, Select, Separator, Switch, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Agent notes

- Replace `WORKSPACE_MEMBERS` and `PERMISSION_SCOPES` with your members and scopes; toggles only edit state held by `setMembers`
- The `onTogglePermission` handler writes only granted or none, so the amber review level can come from data but not from a toggle
- The View, Audit and Notify items and the Export review button only call `showPermissionsToast`; wire real handlers in `onAction`

## When not to use

- A read-only table where readers only sort and page the columns: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Viewers who choose which fields appear and how they are ordered: use [Course Catalog](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-2.md) (`get_block("data-grid-columns-2")`)

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

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