DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Categories
Base8
AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all8
  • Ad Campaign Performance
  • Regional Store P&L
  • Campaign Target Review
  • SLO Reliability Index
  • Wholesale Onboarding
  • Stock Mix
  • Fourplex Pro Forma
  • Service Visit Planner
Columns5
Drag & Drop4
Editing6
Expansion3
Filtering4
Grouping7
Virtualization2

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

  • Reporting tables whose rows carry in-cell bars, sparklines or heat cells beside the figures
  • Performance reviews that weigh each record against a target, a plan or a prior period
  • Review queues and record lists with create, edit, delete and undo, each row opening a tabbed sheet

When not to use

  • A rule builder on its own, to narrow a list or table you already have: use the Filters component
  • A plain sortable table of text cells, assembled from parts in your own layout: use the Data Grid component
  • Values typed into the cells themselves, with validation and a save or discard bar: use the Editing blocks

Agent notes

  • Rows live in a client store hook whose create, update and remove change only browser state; back them with your API
  • Search, filters and sort run in the browser over every row before useTable sees them; move that query to your API at scale
  • Each page.tsx wraps the block in a min-h-svh main with padding, a max-w-7xl width and an sr-only h1; drop that wrapper inside an app shell

Third-party API docs

  • TanStack Table v9: API reference, docs, used by 8 of 8 blocks
  • Sonner v2: API reference, docs, used by 8 of 8 blocks
  • Recharts v3: API reference, docs, used by 3 of 8 blocks
  • React DayPicker v9: API reference, docs, used by 3 of 8 blocks
  • Motion v12: API reference, docs, used by 1 of 8 blocks (the docs follow the latest Motion, with no React API break since v12)
  • Shiki v4: API reference, docs, used by 1 of 8 blocks
Markdownhttps://web.dev.reui.io/blocks/data-grid/advanced.md
MCPsearch({ query: "advanced", type: "block", category: "advanced" })
Full index for agents:llms.txtReUI MCP setup

Shadcn Data Grid Blocks with In-Cell Charts and KPI Rollups

A report stops being readable when every column is a bare number. The campaign grid draws the shape beside the value: a 30-day conversions sparkline whose end dot marks today, a ROAS bullet bar with a tick at each campaign's target on one shared axis, and a new buyer share bar. Every chart column still sorts, and a campaign with no prior period sorts below every decline.

Above the grid a KPI band rolls up the rows in view, so spend, CPA, ROAS and the count below target follow the search and the ReUI Filters builder. Create, edit, pause, duplicate and delete each come with an Undo that restores only the rows it touched, and a floating Sheet opens a campaign in Overview, Performance and Audience tabs.

A store P&L reads by place before it reads by row. The store grid turns its flat list into a tree of Global, market, sub-region and state, each place rolling up net sales, profit and plan attainment, with a depth control that opens it to markets, sub-regions or every store. Region cards filter the rows, a Profit vs FY25 header spans loss and gain bars, and a floating Sheet steps through stores across 3 tabs.

A target review reads in the gap, not the total. The campaign target grid sets each ROAS and CPA actual beside its target and a vs Target bar that fills one half for a miss and the other for a beat, 0 on the line between. Rows merge into channel bands, a filter row under the headers gives each column a text field, a select or a Slider range, and a floating Sheet steps through campaigns with J and K across 5 tabs.

SLO budgets only compare at one yardstick. The SLO grid lists 18 SLOs with 90 day trend cells beside a lollipop chart of budget left, worst first, and a Measure at select and a window toggle can hold them all to one objective and window, re-measuring the grid, the chart and the Exhausted, At Risk and Healthy tabs together. Hovering a stem lights its row, and a floating Sheet opens an SLO in Overview, Burn Rate, Events and Settings tabs.

An onboarding decision waits on every store, not just the account. The wholesale review grid lists 24 retailer applications, and an account with several doors opens into door rows aligned to the grid's columns, each with its own ship date, 4 onboarding checks and readiness, closed by a rollup row. Decision, terms and each check change from a menu in the cell, credit limits are typed into the cell, and 4 queue tiles narrow the list to applications in review, shipping soon, short on credit or blocked. Bulk approve and hold, a CSV export with a line per door and a floating Sheet with Overview, Doors, Checks and Activity tabs complete the review.

A stock plan reads across its categories, not down a list. The stock mix grid sets 8 product categories as columns between a pinned parameter column and a pinned Total, with 8 rows from target over actual share, supplier and tolerance down to case cost, value and the suggested order, all read against the Winter, Spring, Summer or Autumn plan. Cells copy, paste and fill across a selected range, a value outside its row's range or on a held category is refused, and every write, from one cell to a submitted set of orders, carries an Undo. Stage Orders queues every suggested order in one press, Submit Orders stays off until the targets sum to 100% and the staged orders fit the week's budget, and a floating Sheet opens a category in Overview, Cost Log and History tabs.

A rental deal stands or falls on each year's bottom line, not on the rent roll. The pro forma grid rolls a fourplex's rent, vacancy, 2 income lines and 6 expense lines up to Gross Income, Total Expenses, NOI, Net Cash Flow and Total Return, each section folding its lines under its subtotal, over a 5, 10, 15 or 20 year horizon with a Total ROI footer pinned to the bottom. Blue figures are the inputs, edited with a click or a pasted range, and the price, down payment, closing costs, rate and loan term above the grid re-run debt service, equity accrued and every return. A row menu adds, edits, duplicates, resets and removes lines, a plus on a section row adds one in place, and a floating Sheet sets a line's name, basis and amount.

A service plan breaks on the day nobody booked, not on the visits that went to plan. The planner sets 18 restaurant kitchens against a 21 day matrix where each day shows a visit as Missed, Awaiting, Confirmed or Done, or an Unbooked marker where a service's cycle comes due within 28 days with nothing booked, and a Coverage column sorts the riskiest kitchens first. A day opens a Popover with the crew, vendor call and email links and the steps its status allows (confirm, reschedule on a Calendar, sign off with a report number), and Book All books every unbooked day in the window with the least loaded certified technician. A floating Sheet holds each kitchen's Plan and History tabs with a CSV of its signed-off visits, and every write carries an Undo.

All Advanced Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

  • Ad Campaign Performance Campaign performance grid with in-cell sparklines, ROAS bullet charts and new buyer share bars
  • Regional Store P&L Store P&L grid with a geography tree, plan attainment bars and profit vs FY25 loss and gain cells
  • Campaign Target Review Campaign target grid with diverging ROAS and CPA bars, channel-grouped rows and a column filter row
  • SLO Reliability Index SLO error budget grid and linked lollipop chart with a shared objective and window override
  • Wholesale Onboarding Wholesale application review grid with quick-update cells and expandable door rows
  • Stock Mix Retail Stock Mix Sheet With Categories as Columns, Pinned Totals and Range Editing
  • Fourplex Pro Forma Rental Property Pro Forma Grid With Section Subtotals, Pinned Returns and Line Editing
  • Service Visit Planner Kitchen service visit planner with a three week day matrix and unbooked due markers

What the Advanced blocks cover

Data Grid screens, each a full block with fixture data:

  • Campaign performance grid with in-cell sparklines, ROAS bullet charts and new buyer share bars
  • Store P&L grid with a geography tree, plan attainment bars and profit vs FY25 loss and gain cells
  • Campaign target grid with diverging ROAS and CPA bars, channel-grouped rows and a column filter row
  • SLO error budget grid with 90 day trend cells, a linked lollipop chart and a shared objective and window override
  • Wholesale application review grid with quick-update cells and expandable door rows
  • Stock mix grid with categories as columns between pinned parameter and total columns, target over actual shares and range paste and fill
  • Rental pro forma grid with section subtotals, a pinned Total ROI footer and a 5 to 20 year horizon
  • Kitchen service planner with a 21 day visit matrix, unbooked due markers and a coverage column

Built from

  • shadcn/ui components Chart, Sheet, Tabs, Slider, Toggle Group, Alert Dialog, Popover, Calendar, Dropdown Menu, the same components your project already owns.
  • Both twins, every style Each block ships on Base UI and on Radix, in 8 design styles, and names every part it composes on its page.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

  • Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
  • Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
  • Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
  • Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
  • Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Do in-cell charts slow the grid down?

Not on a paginated page of 10, 25 or 50 rows, as in the campaign, store and target grids. The campaign grid's sparkline, bullet and share charts are memoized on their row and drawn in a fixed box with no animation, tooltip or focus stop, and the target and store grids' bars are plain elements drawn without a chart library. The store grid's tree view shows its 28 stores and 60 places on one page. The SLO grid lists its 18 SLOs in one scrolling list and draws each 90 day trend as a plain SVG path, with no chart library or animation.

Does the KPI band follow the filters?

In the campaign performance, store P&L and wholesale review grids, yes. The campaign band rolls up the rows in view, so search and every filter change the totals, and its change figures compare only campaigns that also ran in the prior 30 days. The store grid's region cards roll up the stores the search and column filters keep, and pressing a card filters the grid to that region. The wholesale grid's queue tiles count the applications the search and filters keep, and pressing a tile narrows the grid to that queue. The service planner's Status menu counts the visits in its 3 week window for the kitchens the search and service select keep, and picking a status narrows the grid to kitchens with that status in view.

Can I undo an edit or a delete?

Yes. In the campaign, store and target grids every write returns an undo that restores only the records it touched, so a later edit is never overwritten, and rows created or edited in the session stay tinted in the grid. In the SLO grid, edits, alert mutes and unmutes, event exclusions and deletes each carry an Undo, and in the wholesale review grid so does every quick update, form save, bulk decision and delete. The stock mix grid carries one on every cell edit, paste and fill, cost update, plan change, hold, staged order, revert and submission, and the service planner on every booking, confirmation, sign-off, move, cancellation and kitchen change. In the pro forma grid, removed lines, reset values, a full reset and lines added from a section's plus button can be undone. An Undo toast stays up for 8 seconds.

Can I compare SLOs that have different objectives?

Yes. In the SLO grid, the Measure at select holds every SLO to its own objective or to 99%, 99.5% or 99.9%, and the window toggle reads each over its own window or over 7, 28 or 30 days. The grid, the lollipop chart and the status tab counts re-measure together, while the SLO sheet keeps each SLO's own target and notes when the index reads it differently.

Can one account hold several stores?

Yes. In the wholesale review grid, an account with more than one door opens into door rows aligned to the grid's columns, each with its own ship date, 4 onboarding checks, readiness and actions, closed by a rollup row that counts the passed checks. Setting a check on the account row writes it to every door, and the Doors tab of the sheet lists them all.

How do paste and fill work in the stock mix and pro forma grids?

The stock mix grid copies, cuts and pastes a selected range as tab separated text and repeats it with a fill handle, writing only the Supplier, Target, Tolerance and Min order rows; a value outside its row's range or on a held category is refused with a toast. The pro forma grid has no fill handle: its blue inputs take a click to edit or a pasted range, and its year cells copy out but never take a write.

How do I install an Advanced block?

Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.

Is a license needed?

Advanced blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K
  1. Blocks
  2. Data Grid
  3. Advanced
DocsMarkdown

Shadcn Data Grid Blocks with In-Cell Charts and KPI Rollups

8 analytics, planning and review grids on the ReUI Data Grid, from in-cell charts and KPI rollups to spreadsheet range editing and a day by day visit matrix.