Data Display

DataTable

A world-class responsive data table with sorting, selection, pagination, and full accessibility. Designed for healthcare data where clarity and accuracy are critical.

Patient List with Selection

Display patient information with row selection for bulk actions. Select rows to enable actions.

Patient list with selection
Select all rows	Patient Name	MRN	Age	Status	Last Visit	Insurance
Select row	Sarah Johnson	2024-001234	45	active	2024-01-15	Blue Cross
Select row	Michael Chen	2024-001235	62	active	2024-01-20	Aetna
Select row	Emily Rodriguez	2024-001236	78	critical	2023-12-10	UnitedHealth
Select row	David Kim	2024-001237	34	active	2024-01-18	Cigna
Select row	Maria Garcia	2024-001238	56	pending	2024-01-22	Medicare
Select row	James Wilson	2024-001239	41	active	2024-01-19	Blue Cross

Size Variants

Choose size based on data density needs. Use 'sm' for dense displays, 'lg' for comfortable scanning.

Small - Dense display

Small size appointments
Patient	Date	Type
Sarah Johnson	2024-02-01	Follow-up
Michael Chen	2024-02-01	Consultation
Emily Rodriguez	2024-02-02	Check-up

Large - Comfortable scanning

Large size appointments
Patient	Date	Type
Sarah Johnson	2024-02-01	Follow-up
Michael Chen	2024-02-01	Consultation
Emily Rodriguez	2024-02-02	Check-up

Lab Results with Row Highlighting

Highlight rows based on status for quick visual scanning. Critical values are highlighted in red, abnormal in yellow.

Laboratory test results
Test	Value	Unit	Reference	Status
Hemoglobin	14.2	g/dL	12.0-17.5	normal
Glucose (Fasting)	95	mg/dL	70-100	normal
Total Cholesterol	245	mg/dL	<200	abnormal
Potassium	6.2	mEq/L	3.5-5.0	⚠ Critical
Creatinine	1.1	mg/dL	0.7-1.3	normal

Sticky Header with Scroll

Keep headers visible when scrolling through large datasets. Essential for long patient lists.

Appointments with sticky header
Patient	Date	Time	Type	Status
Sarah Johnson	2024-02-01	10:00 AM	Follow-up	scheduled
Michael Chen	2024-02-01	2:30 PM	Consultation	scheduled
Emily Rodriguez	2024-02-02	9:15 AM	Check-up	scheduled
David Kim	2024-02-02	11:00 AM	Lab Review	completed
Maria Garcia	2024-02-03	3:00 PM	Follow-up	cancelled
Sarah Johnson	2024-02-01	10:00 AM	Follow-up	scheduled
Michael Chen	2024-02-01	2:30 PM	Consultation	scheduled
Emily Rodriguez	2024-02-02	9:15 AM	Check-up	scheduled
David Kim	2024-02-02	11:00 AM	Lab Review	completed
Maria Garcia	2024-02-03	3:00 PM	Follow-up	cancelled
Sarah Johnson	2024-02-01	10:00 AM	Follow-up	scheduled
Michael Chen	2024-02-01	2:30 PM	Consultation	scheduled
Emily Rodriguez	2024-02-02	9:15 AM	Check-up	scheduled
David Kim	2024-02-02	11:00 AM	Lab Review	completed
Maria Garcia	2024-02-03	3:00 PM	Follow-up	cancelled

Pagination

Navigate through large datasets with pagination. Shows current position and total items.

Paginated patient list
Patient Name	MRN	Status	Last Visit
Sarah Johnson	2024-001234	active	2024-01-15
Michael Chen	2024-001235	active	2024-01-20
Emily Rodriguez	2024-001236	critical	2023-12-10
David Kim	2024-001237	active	2024-01-18
Maria Garcia	2024-001238	pending	2024-01-22
James Wilson	2024-001239	active	2024-01-19

Showing 1 - 3 of 6

1 / 2

Loading State

Show skeleton placeholders while fetching data. Communicates system activity without blocking interaction.

Loading state demo
Patient Name	MRN	Status	Last Visit
Sarah Johnson	2024-001234	active	2024-01-15
Michael Chen	2024-001235	active	2024-01-20
Emily Rodriguez	2024-001236	critical	2023-12-10
David Kim	2024-001237	active	2024-01-18

Empty State

Display helpful empty states when no data matches the current filters.

Default empty message

Patient Name	Status
No patients found Try adjusting your search criteria or filters.

Custom empty state

Patient Name	Status
No results found We couldn't find any patients matching your search. Try different keywords.

Props

Prop	Type	Default	Description
`columns`	`TableColumn<T>[]`	—	Column definitions (required)
`data`	`T[]`	—	Data rows (required)
`caption`	`string`	—	Table caption for accessibility
`captionHidden`	`boolean`	false	Visually hide caption (still accessible)
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size variant for cell padding
`sortState`	`SortState`	—	Current sort state
`hoverable`	`boolean`	true	Whether rows are hoverable
`striped`	`boolean`	false	Whether rows are striped
`stickyHeader`	`boolean`	false	Sticky header when scrolling
`maxHeight`	`string`	—	Max height for scrollable table
`selectable`	`boolean`	false	Enable row selection
`selectedKeys`	`Set<string>`	—	Currently selected row keys
`loading`	`boolean`	false	Show loading skeleton
`loadingRows`	`number`	5	Number of skeleton rows
`emptyMessage`	`string`	'No data available'	Empty state title
`emptyDescription`	`string`	—	Empty state description
`getRowKey`	`(row: T, index: number) => string`	—	Row key function
`cellRenderer`	`Snippet`	—	Custom cell renderer
`emptyState`	`Snippet`	—	Custom empty state
`onRowClick`	`(row: T) => void`	—	Row click handler
`onSort`	`(state: SortState) => void`	—	Sort change handler
`onSelectionChange`	`(keys: Set<string>) => void`	—	Selection change handler
`currentPage`	`number`	—	Current page (1-indexed)
`pageSize`	`number`	—	Items per page
`totalItems`	`number`	—	Total items (server pagination)
`onPageChange`	`(page: number) => void`	—	Page change handler
`getRowHighlight`	`(row: T) => string \| null`	—	Row highlight function

Healthcare Best Practices

Row Highlighting: Use getRowHighlight to visually distinguish critical values (abnormal lab results, urgent status).
Selection for Actions: Enable selectable for bulk operations like exporting records or batch updates.
Caption for Accessibility: Always provide a caption describing the table's purpose for screen reader users.
Sticky Headers: Use stickyHeader with maxHeight for long patient lists.
Pagination: Use pagination for datasets over 20-30 rows to improve load time and readability.
Loading States: Always show skeleton loading when fetching data to indicate system activity.
Hide on Mobile: Use hideOnMobile on non-essential columns to maintain readability on small screens.

Accessibility Notes

WCAG Compliance: Uses semantic HTML (<table>, <thead>, <tbody>, <th>) with proper scope attributes.
Sort Announcements: Uses aria-live region to announce sort changes to screen readers.
Keyboard Navigation: All interactive elements (sortable headers, clickable rows, selection) are keyboard accessible.
Focus Indicators: Clear focus rings on all interactive elements for keyboard navigation.
Loading State: Uses aria-busy to indicate loading state to assistive technology.
Selection State: Uses aria-selected to indicate selected rows.