Data Table
Data Table
A powerful and flexible data table component with sorting, filtering, pagination, and row selection.
Basic Table
A simple table with automatic sorting and pagination. Toggle the style options below to explore layout variants.
ID | Name | Email | Age |
|---|---|---|---|
| 1 | Justin Green | kenneth.turner@enterprise.net | 29 |
| 2 | Gregory Miller | amanda.bailey895@enterprise.net | 41 |
| 3 | Nancy Thompson | jason.parker@business.org | 55 |
| 4 | Laura Garcia | pamela.martin@organization.com | 50 |
| 5 | Thomas Garcia | jonathan.evans37@organization.com | 42 |
Row Selection
Table with multiple row selection using checkboxes.
Name | Email | Role | |
|---|---|---|---|
| Justin Green | kenneth.turner@enterprise.net | Moderator | |
| Gregory Miller | amanda.bailey895@enterprise.net | Moderator | |
| Nancy Thompson | jason.parker@business.org | Guest | |
| Laura Garcia | pamela.martin@organization.com | Developer | |
| Thomas Garcia | jonathan.evans37@organization.com | User |
Use arrow keys to navigate rows, and Enter/Space to toggle selection. Enable keyboard navigation via the checkbox above.
Custom Cell Templates
Use custom templates to render cells with badges, buttons, and other components.
Name | Status | Role | Actions |
|---|---|---|---|
| Justin Green | Suspended | Moderator | |
| Gregory Miller | Inactive | Moderator | |
| Nancy Thompson | Suspended | Guest | |
| Laura Garcia | Inactive | Developer | |
| Thomas Garcia | Active | User |
Global Search & Column Visibility
Search across all columns and toggle column visibility.
ID | Name | Email | Age | Role | Status |
|---|---|---|---|---|---|
| 1 | Justin Green | kenneth.turner@enterprise.net | 29 | Moderator | Suspended |
| 2 | Gregory Miller | amanda.bailey895@enterprise.net | 41 | Moderator | Inactive |
| 3 | Nancy Thompson | jason.parker@business.org | 55 | Guest | Suspended |
| 4 | Laura Garcia | pamela.martin@organization.com | 50 | Developer | Inactive |
| 5 | Thomas Garcia | jonathan.evans37@organization.com | 42 | User | Active |
| 6 | Dorothy Evans | mary.cruz@business.org | 27 | Manager | Suspended |
| 7 | Daniel Anderson | jonathan.perez@organization.com | 66 | Moderator | Suspended |
| 8 | David Scott | sarah.mitchell@company.com | 19 | Admin | Active |
| 9 | Jeffrey King | stephen.jackson@business.org | 31 | Admin | Active |
| 10 | Andrew Flores | samuel.jackson@business.org | 60 | Designer | Pending |
Empty State
Displays a message when there's no data to show.
No results found
Loading State
Shows a loading indicator while data is being fetched.
Name | Email | Role |
|---|---|---|
| Justin Green | kenneth.turner@enterprise.net | Moderator |
| Gregory Miller | amanda.bailey895@enterprise.net | Moderator |
| Nancy Thompson | jason.parker@business.org | Guest |
| Laura Garcia | pamela.martin@organization.com | Developer |
| Thomas Garcia | jonathan.evans37@organization.com | User |
Without Toolbar
A minimal table without the toolbar (no search or column visibility).
Name | Email | Age |
|---|---|---|
| Justin Green | kenneth.turner@enterprise.net | 29 |
| Gregory Miller | amanda.bailey895@enterprise.net | 41 |
| Nancy Thompson | jason.parker@business.org | 55 |
| Laura Garcia | pamela.martin@organization.com | 50 |
| Thomas Garcia | jonathan.evans37@organization.com | 42 |
Custom Toolbar Actions
Add custom action buttons to the toolbar.
Name | Email | Role |
|---|---|---|
| Justin Green | kenneth.turner@enterprise.net | Moderator |
| Gregory Miller | amanda.bailey895@enterprise.net | Moderator |
| Nancy Thompson | jason.parker@business.org | Guest |
| Laura Garcia | pamela.martin@organization.com | Developer |
| Thomas Garcia | jonathan.evans37@organization.com | User |
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
ARIA Attributes
- ✓
role="grid"for screen readers - ✓
aria-sortindicates column sort direction - ✓
aria-selectedindicates row selection state - ✓
aria-labelon checkboxes for selection - ✓ Focusable rows with visible focus indicator
Keyboard Shortcuts
Navigate and interact with the table using keyboard.
Navigate to next row
ArrowDown
Navigate to previous row
ArrowUp
Toggle row selection
Enter
/
Space
Sort column (click header)
Click
API Reference
DataTable component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Data | IEnumerable<TData> | — | Required. The data source for the table. |
| Columns | RenderFragment? | null | Slot for DataTableColumn child components. |
| SelectionMode | DataTableSelectionMode | None | Row selection mode: None, Single, Multiple. |
| SelectedItems | IReadOnlyCollection<TData> | [ ] | Currently selected items. Use @bind-SelectedItems for two-way binding. |
| EnableKeyboardNavigation | bool | true | Arrow key navigation and Enter/Space row selection. |
| ShowToolbar | bool | true | Whether to show the toolbar (search + column visibility). |
| ShowPagination | bool | true | Whether to show pagination controls. |
| ColumnsVisibility | bool | true | Whether to show the column visibility toggle button in the toolbar. |
| IsLoading | bool | false | Shows a loading indicator instead of table content. |
| InitialPageSize | int | 5 | The initial number of rows per page. |
| PageSizes | int[] | [5,10,20,50,100] | Available page size options in the pagination selector. |
| Dense | bool | true | Compact cell padding (header h-9, body py-2 px-4). When false, uses h-12 / p-4. |
| HeaderBackground | bool | true | Applies bg-muted/50 to the header row. |
| HeaderBorder | bool | false | Vertical dividers between header cells (divide-x divide-border). |
| CellBorder | bool | false | Vertical dividers between body cells (divide-x divide-border). |
| HeaderClass | string? | null | Extra CSS classes on the <thead> element. |
| HeaderRowClass | string? | null | Extra CSS classes on the header <tr>. |
| BodyRowClass | string? | null | Extra CSS classes on each body <tr>. |
| ToolbarActions | RenderFragment? | null | Custom action buttons rendered inside the toolbar. |
| EmptyTemplate | RenderFragment? | null | Custom content shown when the table has no rows. |
| LoadingTemplate | RenderFragment? | null | Custom content shown when IsLoading is true. |
| AriaLabel | string? | null | ARIA label applied to the <table> element. |
| Class | string? | null | Extra CSS classes on the outer container div. |
| OnSort | EventCallback<(string, SortDirection)> | — | Fires when the user changes the sort column or direction. |
| OnFilter | EventCallback<string?> | — | Fires when the global search value changes. |
| PreprocessData | Func<IEnumerable<TData>, Task<IEnumerable<TData>>>? | null | Async hook to transform data before filtering and sorting. |
DataTableColumn API
DataTableColumn parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Property | Func<TData, TValue> | — | Required. Expression that returns the column value from a row. |
| Header | string | — | Required. Column header label text. |
| Id | string? | null | Unique column ID. Auto-generated from Header when omitted. |
| Sortable | bool | false | Whether clicking the header sorts by this column. |
| Filterable | bool | false | Whether this column is searched by the global search filter. |
| Alignment | ColumnAlignment | Left | Cell alignment: Left, Center, Right. |
| CellTemplate | RenderFragment<TData>? | null | Custom cell render template. Receives the row item as context. |
| Visible | bool | true | Whether the column is shown. Can be toggled via the column visibility menu. |
| Width | string? | null | Fixed column width (e.g. "200px", "20%"). |
| MinWidth | string? | null | Minimum column width CSS value. |
| MaxWidth | string? | null | Maximum column width CSS value. |
| CellClass | string? | null | Extra CSS classes on every body cell in this column. |
| HeaderClass | string? | null | Extra CSS classes on this column's header cell. |