CleenUI · DataGrid · DataGrid

DataGrid

Pro

Sortable, filterable, virtualized grid with custom cell renderers and full-stack pagination.

storybook.cleenui.com
Open Storybook
Live preview

Interactive DataGrid preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About DataGrid

DataGrid is the headline component of the Pro tier. Configure columns, point at a data source, and you get sortable headers, resizable columns, virtualized rendering, pagination, row selection, and custom cell renderers — all wired to the underlying API and stored-procedure layer.

Column pinning, row grouping, expandable row detail, and bulk-action toolbars are built in. Three size variants (compact, normal, comfortable) let the same grid serve dashboards, admin tables, and dense data exploration use cases.

When to use it

  • Admin tables for user, account, or transaction management.
  • Dashboard data exploration with sortable columns.
  • Bulk-action workflows over filtered subsets.
  • Reports with expandable row detail.

Common props

Prop
Type
Description
columns
Column[]
Column definitions {key, label, render, sortable, width}.
data
Row[]
Row data (or async loader).
loadPage
(page, sort, filters) => Promise<Page>
Async page loader for server-side pagination.
density
"compact" | "normal" | "comfortable"
Row height density.
selectable
boolean | "single" | "multi"
Row selection mode.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

3

Used in templates

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.