Cards on narrow screens
FreeBelow a width you choose, each row becomes a card — a title, then labelled fields — with a sort control in place of the headers. Same grid underneath: sort, filter, select and scroll a million rows.
Try it: Cards at every width here — in an app they appear below 600 px. Pick a column in Sort by, flip the arrow, use the search box: it is the same grid.
About this DataGrid demo: Cards on narrow screens
Below a width you choose, each row becomes a card — a title, then labelled fields — with a sort control in place of the headers. Same grid underneath: sort, filter, select and scroll a million rows.
Cards on narrow screens is in the free Community edition (@kanunilabs/datagrid-react or @kanunilabs/datagrid): no licence key, no watermark, commercial use included. The grid above is the real component, not a recording — change it and the result is what your users get.
Guide: Cards on narrow screens →
More in Presentation
- Themes & palettes — Six themes, six palettes, light and dark.
- Density — Compact, normal and comfortable row heights.
- Localization — Twelve languages, and your own strings.
- Tooltips — Automatic on truncated text, or your own rich content; open on hover, on keyboard focus or a tap, and let the pointer rest on them.
- Row numbers — A numbered column that renumbers after sort and filter.
- Print layout — Every row on paper, not just the rendered window.