DataGrid
Ready
Modern CSS Grid-based data grid with flexible layouts, custom column widths, and rich content support.
Rich Content Grid
Grid with custom column widths, avatars, badges, and formatted content
Employee
Department
Role
Status
Salary
Actions
AJ
Alice Johnson
alice@example.com
Engineering
Admin
Active
$120,000
BS
Bob Smith
bob@example.com
Sales
User
Active
$85,000
CB
Charlie Brown
charlie@example.com
Marketing
User
Inactive
$75,000
DP
Diana Prince
diana@example.com
Engineering
Manager
Active
$95,000
EH
Ethan Hunt
ethan@example.com
Operations
User
Active
$80,000
Showing 1 to 5 of 8
Compact Density
More data in less space with compact density
Product
Category
Price
Stock
MacBook Pro
Laptops
$2,499
12
iPhone 15 Pro
Phones
$999
48
iPad Air
Tablets
$599
24
AirPods Pro
Audio
$249
67
Apple Watch
Wearables
$399
35
Spacious Density
More breathing room with spacious density
Product
Category
Price
Stock
MacBook Pro
Laptops
$2,499
12
iPhone 15 Pro
Phones
$999
48
iPad Air
Tablets
$599
24
AirPods Pro
Audio
$249
67
Apple Watch
Wearables
$399
35
Striped Rows
Alternating row colors for better readability
Product
Category
Price
Stock
MacBook Pro
Laptops
$2,499
12
iPhone 15 Pro
Phones
$999
48
iPad Air
Tablets
$599
24
AirPods Pro
Audio
$249
67
Apple Watch
Wearables
$399
35
Loading State
Built-in loading indicator
Product
Category
Price
Stock
Loading...
API Reference
Props and configuration options
DataGrid Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | DataGridColumn[] | required | Array of column definitions |
| data | T[] | required | Array of data objects |
| density | comfortable | compact | spacious | comfortable | Row height density |
| striped | boolean | false | Alternating row colors |
| hoverable | boolean | true | Row hover effect |
| loading | boolean | false | Show loading state |
| emptyMessage | string | No data available | Empty state message |
| onRowClick | function | - | Row click handler |
| rowClassName | string | function | - | Custom row classes |
Column Definition
| Property | Type | Required | Description |
|---|---|---|---|
| key | string | Yes | Data key to display |
| label | string | Yes | Column header label |
| width | string | No | CSS Grid width (1fr, 200px, minmax(...)) |
| align | left | center | right | No | Text alignment |
| sortable | boolean | No | Enable sorting (default: true) |
| render | function | No | Custom cell renderer |
| headerRender | function | No | Custom header renderer |
Usage Example
How to use the DataGrid component
import { DataGrid } from '@/components/ui/data-grid'
import { Badge } from '@/components/ui/badge'
import { Avatar } from '@/components/ui/avatar'
const columns = [
{
key: 'name',
label: 'Employee',
width: 'minmax(200px, 1fr)',
render: (value, row) => (
<div className="flex items-center gap-3">
<Avatar size="sm">{row.avatar}</Avatar>
<div>
<div className="font-medium">{value}</div>
<div className="text-xs text-slate-500 dark:text-slate-400">{row.email}</div>
</div>
</div>
),
},
{
key: 'status',
label: 'Status',
width: '120px',
align: 'center',
render: (value) => (
<Badge variant={value === 'Active' ? 'success' : 'default'}>
{value}
</Badge>
),
},
]
<DataGrid
columns={columns}
data={users}
density="comfortable"
striped
hoverable
selectable
onRowClick={(row) => console.log(row)}
/>