Eidetic

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