# Shadcn Base blocks

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

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/base
- 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
- Blocks: 8
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.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, weekly timesheets, team members, project modules or SKU prices

## 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://web.dev.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://web.dev.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://web.dev.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 data.tsx 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 8 of 8 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 7 of 8 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 8 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 1 of 8 blocks

## Blocks

- [Customer Balances](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-1.md): Customer CRM data grid with avatar rows, balance trends, and row actions menu. Best for customer balances with a reversal tooltip for refunds and chargebacks and a trend percent against the prior statement period.
- [Lead Scoring Contacts](https://web.dev.reui.io/blocks/data-grid/base/data-grid-base-2.md): CRM contacts data grid with lead scoring, pinned rows, and a faceted filter builder. Best for lead scores as red, amber or green bars beside trend sparklines and colored category tags, with a rule filter over 8 contact fields.
- [Deal Pipeline](https://web.dev.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://web.dev.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://web.dev.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://web.dev.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://web.dev.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://web.dev.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.

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.