Data Grid
Full data table: search, filter, sort, multi-select and bulk actions.
| Patient | Status | Session | Price | ||
|---|---|---|---|---|---|
| Budi SantosoSC-27F7K3 | Arrived | Morning, 07.00 to 11.00 | Rp125.000 | ||
| Dewi LestariSC-28F7K4 | Scheduled | Afternoon, 11.00 to 15.00 | Rp480.000 | ||
| Muhammad RifqiSC-25F7K1 | Arrived | Afternoon, 11.00 to 15.00 | Rp95.000 | ||
| Rahma BatariSC-24F7K0 | Scheduled | Morning, 07.00 to 11.00 | Rp340.000 | ||
| Siti AminahSC-26F7K2 | Scheduled | Evening, 15.00 to 19.00 | Rp210.000 |
Loading
| Patient | Status | Session | Price | ||
|---|---|---|---|---|---|
Empty
| Patient | Status | Session | Price | ||
|---|---|---|---|---|---|
No bookings yet Check the spelling, or search by booking code. | |||||
Usage
import { DataGrid } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Lists that need searching, filtering or sorting.
When not to use
- The app on phones: use List Row.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | |
data | T[] | required | |
columns | { id, header, cell, align?, allowsSorting?, isRowHeader?, width? }[] | required | |
getRowId | (row) => string | required | |
selectionMode | 'none' | 'multiple' | 'none' | |
selectedKeys, onSelectionChange | Selection | - | |
sortDescriptor, onSortChange | SortDescriptor | - | |
density | 'md' | 'sm' | 'md' | |
toolbar, footer, emptyState | ReactNode | - | |
isLoading | boolean | false |
Accessibility
- Announced as a table with column headers.
- Arrow keys move between cells; Space selects a row.