Data Table
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The DataTable component provides a powerful, feature-rich table for displaying and managing large datasets. Built with advanced functionality including sorting, filtering, searching, pagination, row selection, and data export. Perfect for admin panels, user management, analytics dashboards, and any interface requiring complex data presentation.
Basic Usage
ID | Name | Email | Role | |
|---|---|---|---|---|
| 1 | John Doe | john@example.com | Admin | |
| 2 | Jane Smith | jane@example.com | User | |
| 3 | Bob Johnson | bob@example.com | Editor | |
| 4 | Alice Wilson | alice@example.com | Manager | |
| 5 | Charlie Brown | charlie@example.com | User |
Showing 1 to 5 of 5 results
With Custom Renderers
Name | Email | Phone | Status | Role | |
|---|---|---|---|---|---|
John Doe | john@example.com | +1 (555) 123-4567 | active | Admin | |
Jane Smith | jane@example.com | +1 (555) 234-5678 | inactive | User | |
Bob Johnson | bob@example.com | +1 (555) 345-6789 | pending | Editor |
Showing 1 to 3 of 3 results
With Filters and Actions
Name | Email | Status | Role | Department | Actions | |
|---|---|---|---|---|---|---|
John Doe | john@example.com | active | Admin | Engineering | ||
Jane Smith | jane@example.com | active | User | Marketing | ||
Bob Johnson | bob@example.com | inactive | Editor | Engineering | ||
Alice Wilson | alice@example.com | pending | Manager | Sales |
Showing 1 to 4 of 4 results
Loading State
Analytics Dashboard
Properties
DataTable
| Property | Type | Description |
|---|---|---|
data | T[] | Array of data objects to display in the table. |
columns | DataTableColumn<T>[] | Column configuration array. |
searchFields | (keyof T)[] | Fields to include in search functionality. |
filters | DataTableFilter<T>[] | Filter configuration array. |
pageSize | number | Number of rows per page. Default is 40. |
loading | boolean | Whether the table is in loading state. |
className | string | Additional CSS classes for the table container. |
activeFilters | Record<string, string> | Default active filters. |
tools | DataTableTools | Configuration for table tools and features. |
DataTableColumn
| Property | Type | Description |
|---|---|---|
key | keyof T | Data field key for this column. |
title | string | Column header title. |
sortable | boolean | Whether this column is sortable. |
width | string | CSS width value for the column. |
align | "left" | "center" | "right" | Text alignment for the column. |
hidden | boolean | Whether the column is hidden. |
headerClassName | string | Additional CSS classes for the header cell. |
customRenderer | (value: any, row: T) => ReactNode | Custom render function for cell content. |
DataTableFilter
| Property | Type | Description |
|---|---|---|
field | keyof T | Data field to filter on. |
label | string | Display label for the filter. |
options | FilterOption[] | Available filter options. |
FilterOption
| Property | Type | Description |
|---|---|---|
label | string | Display label for the option. |
value | string | Value to filter by. |
DataTableTools
| Property | Type | Description |
|---|---|---|
search | { hide?: boolean; placeholder?: string } | Search tool configuration. |
export | { hide?: boolean; label?: string } | Export tool configuration. |
columnSelector | { hide?: boolean } | Column visibility tool configuration. |
clearFilters | { hide?: boolean; label?: string } | Clear filters tool configuration. |
rowSelector | { hide?: boolean } | Row selection tool configuration. |
pagination | { label?: string } | Pagination tool configuration. |
Ref Methods
The DataTable component exposes several methods through a ref:
| Method | Type | Description |
|---|---|---|
getSelectedItems | () => T[] | Get array of currently selected items. |
clearSelection | () => void | Clear all row selections. |
getSelectionCount | () => number | Get count of selected rows. |
selectItems | (ids: string[]) => void | Select specific items by ID. |
getFilteredData | () => T[] | Get current filtered dataset. |
resetFilters | () => void | Reset all filters and search. |
exportData | (filename?: string) => void | Export current data to CSV. |
goToPage | (page: number) => void | Navigate to specific page. |
refresh | () => void | Refresh the table data. |
Accessibility
The DataTable component includes comprehensive accessibility features:
- Keyboard Navigation - Full keyboard support for sorting, filtering, and selection
- Screen Reader Support - Proper ARIA labels and table semantics
- Focus Management - Clear focus indicators and logical tab order
- Sort Indicators - Visual and audible sort direction indicators
- Loading States - Proper loading announcements for screen readers
- Selection States - Clear indication of selected rows and bulk actions
Common Use Cases
The DataTable component is perfect for:
- User Management - Admin panels with user lists and actions
- Analytics Dashboards - Metrics and performance data display
- Content Management - Articles, posts, and media management
- E-commerce - Product catalogs and order management
- Financial Data - Transaction lists and financial reports
- System Logs - Error logs and activity monitoring
- Inventory Management - Stock levels and product tracking
Best Practices
- Performance - Use pagination for large datasets (1000+ rows)
- Search Fields - Include relevant fields in search configuration
- Custom Renderers - Use for complex data formatting and actions
- Loading States - Always show loading indicators for async operations
- Error Handling - Implement proper error states and retry mechanisms
- Responsive Design - Consider mobile layouts and horizontal scrolling
- Export Functionality - Provide data export for user convenience
- Accessibility - Test with keyboard navigation and screen readers