# Course Catalog block

> Course Catalog Data Grid with Settings Popover for Density and Column Visibility

Course catalog table with thumbnail rows, category Badge, star Rating, assignee AvatarGroup, and completion rings. Status Tabs, category Select, search, plus a Popover for density, resizable and movable columns, and column visibility. LMS admin grid.

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

## Best for

Course rows with thumbnails, star scores, learner avatar stacks and completion rings, where 5 of 6 data columns toggle from pill buttons

## Agent notes

- Replace `COURSES`, whose `thumbnail` values are picsum.photos placeholders; the status, category and search filters run on it in the browser
- Row actions, the assign button and Add course only call `showCourseToast`; wire `handleAction` and `handleAssign` to real flows
- A new hideable column needs its id in `CourseProperty`, `DISPLAY_PROPERTIES`, the `visibleProperties` default and the `columnVisibility` memo

## When not to use

- Tens of thousands of rows that should scroll in without page controls: 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 that flip to a card layout under a multi field filter row: use [Work Queue](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-3.md) (`get_block("data-grid-columns-3")`)

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

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