# Member Display Columns block

> Members directory data grid with toggleable display columns and view settings popover

Member directory table for admin and people pages. A settings popover toggles display columns, sets ordering, and hides paused members. Built with ReUI DataGrid, Filters, Badge, and Rating plus Avatar, Popover, Switch, and a row-actions DropdownMenu.

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

## Best for

Members on rounded, spaced rows, with a view popover of sort order pills, a paused member switch and 8 column toggles

## Agent notes

- Replace `MEMBERS`; `applyFiltersToMembers` and the `showInactive` switch filter it in the browser before paging
- The `handleMemberAction` items only show toasts, so copy-email copies nothing and pause-access pauses nothing
- The Save, Default and Invite buttons only show toasts in `handleSaveView`, `handleSetDefaultView` and `handleInvite`

## When not to use

- Selected rows that take bulk actions such as reassigning many at once: use [Renewal Reassignment](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-3.md) (`get_block("data-grid-filtering-3")`)
- Members split by role and billing tabs with actions on row hover: use [Team Members](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-6.md) (`get_block("data-grid-base-6")`)

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

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