# Shadcn Base blocks

> Complete table screens with toolbar filters and pagination for CRM, support, team, project, pricing, and API log data.

- Type: Pro blocks (Data Grid)
- Page: https://reui.io/blocks/data-grid/base
- Docs (Base UI): https://reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://reui.io/docs/components/radix/data-grid.md
- Blocks: 9
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## When to use

- A whole table section: a title, a create button, filter controls, the rows and pagination
- Customer, contact and deal tables for a sales team, with a row menu, pinned rows or a rule filter bar
- Operations tables for support tickets, timesheets, team members, project modules, SKU prices or API logs

## When not to use

- A bare table for your own columns and rows, without a title bar, toolbar or demo rows: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Thousands of rows in one scrolling list that loads more as the reader nears the end: use the [Virtualization blocks](https://reui.io/blocks/data-grid/virtualization.md)
- A payments ledger, a renewals queue or an automation library led by a rule filter bar: use the [Filtering blocks](https://reui.io/blocks/data-grid/filtering.md)

## Agent notes

- Each page.tsx wraps the table in a centered `min-h-svh` main under an sr-only `h1`; drop that wrapper and keep a single `h1` once it sits in your page
- Each block filters and pages its sample rows in the browser with `pagination` in local state; move both to your API before the row count grows large

## 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), used by 9 of 9 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 8 of 9 blocks
- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), used by 1 of 9 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 9 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 1 of 9 blocks
- Shiki v4: [API reference](https://shiki.style/guide/install), [docs](https://shiki.style/guide/), used by 1 of 9 blocks

## Blocks

- [Customer Balances](https://reui.io/blocks/data-grid/base/data-grid-base-1.md): Customer balances data grid with CRUD sheets, balance trends and bulk actions. Best for customer accounts with balances against the prior statement, reversal notes, a tabbed view sheet and full CRUD with Undo.
- [Lead Scoring Contacts](https://reui.io/blocks/data-grid/base/data-grid-base-2.md): CRM contacts data grid with lead score bars, weekly engagement trends, pinned rows and CRUD sheets. Best for contacts worked in lead score order, with Hot, Warm and Cold score bars, weekly engagement trends, pinned rows and full CRUD with Undo.
- [Deal Pipeline](https://reui.io/blocks/data-grid/base/data-grid-base-3.md): CRM sales opportunities data grid with pinned priority rows and faceted pipeline filters. Best for deals sorted largest amount first, each with a progress ring, critical and warning alert counts in tooltips and an owner avatar.
- [Weekly Timesheet](https://reui.io/blocks/data-grid/base/data-grid-base-4.md): Weekly team timesheet data grid with per-day hours and billable target tracking. Best for a row per person with 7 day cells of logged hours, a work kind bar and a note tooltip, plus a Calendar week picker.
- [Support Tickets](https://reui.io/blocks/data-grid/base/data-grid-base-5.md): Support ticket queue data grid with SLA countdown, status filters, and bulk owner assignment. Best for tickets sorted by SLA time left in a Card, with unassigned and near SLA counts in the header and a selection bar that sets owner and status.
- [Team Members](https://reui.io/blocks/data-grid/base/data-grid-base-6.md): Members data grid with avatar rows, tabbed role and billing filters, and hover actions. Best for a cardless members list with view, edit and delete buttons revealed on row hover and Role, Billing and Auth filter tabs.
- [Project Modules](https://reui.io/blocks/data-grid/base/data-grid-base-7.md): Modules data grid with circular progress rings, status badges, and row actions. Best for project modules with a readiness ring and tasks done count, a date window with its length, a favorite star and a sort by menu.
- [Cloud Rate Card](https://reui.io/blocks/data-grid/base/data-grid-base-8.md): Cloud SKU rate card data grid with stacked discounts, commit usage bars, and price breakdowns. Best for rows you can add, edit, duplicate and delete, with Undo on edits and deletes, a monthly totals footer and a density and stripes popover.
- [API Request Logs](https://reui.io/blocks/data-grid/base/data-grid-base-9.md): API request logs grid with a status volume chart, release markers, drag to zoom and replay. Best for request logs read by time window: a stacked status chart that zooms the grid, a sheet with route health, headers and bodies, and replay.

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.