Data & Charts
Data Grid
A full-featured table: sort, search, select, resize columns, paginate.
Usage
| Status | ||
|---|---|---|
| Jane Doe | ||
| Tom Klein |
0 of 2 selected
Page 1 of 1
Installation
npm install @wunderui/reactThen import what you need:
import { DataGrid, DataGridColumn } from "@wunderui/react"Examples
Data Grid
Sort by column, search the rows and drag column edges to resize.
| Status | |||
|---|---|---|---|
| WunderUI GmbH | €24,800 | ||
| Halcyon Labs | €3,200 | ||
| Pergola Foods | €980 | ||
| Acme Inc. | €12,400 |
0 of 4 selected
Page 1 of 1
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Customers page
Search, sort, select and page through accounts, with status badges.
Customers
5 accounts · €3,520 MRR
| Plan | Status | |||
|---|---|---|---|---|
| WunderUI GmbH | Team | €1,240 | ||
| Halcyon Labs | Pro | €480 | ||
| Pergola Foods | Team | €960 | ||
| Umbrella Co. | Starter | €120 | ||
| Globex | Pro | €720 |
0 of 5 selected
Page 1 of 1