DataGrid

Data Display
Tables

Modern CSS Grid-based data grid with flexible layouts, custom column widths, and rich content support.

Preview

Grid with avatars, badges, and formatted content

Employee
Department
Role
Status
Salary
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

Density Options

Compact, comfortable, and spacious row heights

Compact

Project
Owner
Tasks
Progress
Marketing Strategy
Olivia Chen
42
90%
Content Pipeline
Sofia Rodriguez
28
89%
Product Launch
Priya Sharma
56
21%
Team Operations
Yuki Tanaka
15
100%

Spacious

Project
Owner
Tasks
Progress
Marketing Strategy
Olivia Chen
42
90%
Content Pipeline
Sofia Rodriguez
28
89%
Product Launch
Priya Sharma
56
21%
Team Operations
Yuki Tanaka
15
100%

Striped Rows

Alternating row colors for better readability

Project
Owner
Tasks
Progress
Marketing Strategy
Olivia Chen
42
90%
Content Pipeline
Sofia Rodriguez
28
89%
Product Launch
Priya Sharma
56
21%
Team Operations
Yuki Tanaka
15
100%

Loading State

Built-in loading indicator

Project
Owner
Tasks
Progress

Loading...

Props

DataGrid component API reference

PropTypeDefaultDescription
columnsDataGridColumn[]—Array of column definitions (required)
dataT[]—Array of data objects (required)
density'compact' | 'comfortable' | 'spacious''comfortable'Row height density
stripedbooleanfalseAlternating row colors
hoverablebooleantrueRow hover effect
selectablebooleanfalseEnable row selection
searchablebooleantrueEnable search
paginationbooleantrueEnable pagination
pageSizenumber10Rows per page
loadingbooleanfalseShow loading state
actionsDataGridAction[]—Row action buttons
onRowClick(row: T) => void—Row click handler

Column Definition

interface DataGridColumn {
  key: string              // Data key to display
  label: string            // Column header label
  width?: string           // CSS Grid width (1fr, 200px, minmax(...))
  align?: 'left' | 'center' | 'right'
  sortable?: boolean       // Enable sorting (default: true)
  render?: (value: any, row: T) => ReactNode  // Custom cell renderer
  headerRender?: () => ReactNode              // Custom header renderer
}

Usage

Import and implementation example

import { DataGrid } from '@/blocks/data-display/data-grid'
import { Badge } from '@/components/ui/badge'
import { Avatar } from '@/components/ui/avatar'

export default function Example() {
  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">{row.email}</div>
          </div>
        </div>
      ),
    },
    {
      key: 'status',
      label: 'Status',
      width: '120px',
      align: 'center',
      render: (value) => (
        <Badge variant={value === 'Active' ? 'success' : 'default'}>
          {value}
        </Badge>
      ),
    },
  ]

  return (
    <DataGrid
      columns={columns}
      data={users}
      density="comfortable"
      striped
      hoverable
      selectable
      searchable
      pagination
      pageSize={10}
      onRowClick={(row) => console.log(row)}
    />
  )
}

Features

Built-in functionality

  • CSS Grid layout: Flexible column widths with minmax
  • Custom renderers: Rich content in cells
  • Three densities: Compact, comfortable, spacious
  • Row selection: Checkbox selection with select all
  • Search & pagination: Built-in search and pagination
  • Sorting: Column-based sorting
  • Row actions: Action buttons per row
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="grid" for the tableColumn headers use role="columnheader"Rows use role="row" with proper labeling

Keyboard Navigation

KeyAction
TabNavigate between interactive elements
Arrow KeysNavigate rows when focused
SpaceToggle row selection
EnterActivate row click handler

Notes

  • Search input is properly labeled
  • Pagination controls are keyboard accessible
  • Sort direction is communicated via aria-sort
  • Loading state announced to screen readers

Related Components

DataTableEditable TableFinancial Table