Data Table Component
A powerful and flexible data table component with sorting, filtering, pagination, and row selection.
Basic Table
A simple table with automatic sorting and pagination.
ID | Name | Email | Age |
|---|---|---|---|
| 1 | Joshua James | john.murphy@enterprise.net | 53 |
| 2 | Jimmy Ramirez | amanda.morris539@example.com | 36 |
| 3 | Joseph Phillips | linda.jones@company.com | 32 |
| 4 | Steven Cruz | nicole.flores@company.com | 31 |
| 5 | Susan Kelly | mark.murphy@organization.com | 21 |
Row Selection
Table with multiple row selection using checkboxes. Use arrow keys to navigate and Enter/Space to select.
Name | Email | Role | |
|---|---|---|---|
| Joshua James | john.murphy@enterprise.net | Admin | |
| Jimmy Ramirez | amanda.morris539@example.com | Admin | |
| Joseph Phillips | linda.jones@company.com | Admin | |
| Steven Cruz | nicole.flores@company.com | Admin | |
| Susan Kelly | mark.murphy@organization.com | Designer |
Custom Cell Templates
Use custom templates to render cells with badges, buttons, and other components.
Name | Status | Role | Actions |
|---|---|---|---|
| Joshua James | Suspended | Admin | |
| Jimmy Ramirez | Suspended | Admin | |
| Joseph Phillips | Inactive | Admin | |
| Steven Cruz | Active | Admin | |
| Susan Kelly | Pending | Designer |
Global Search & Column Visibility
Search across all columns and toggle column visibility.
ID | Name | Email | Age | Role | Status |
|---|---|---|---|---|---|
| 1 | Joshua James | john.murphy@enterprise.net | 53 | Admin | Suspended |
| 2 | Jimmy Ramirez | amanda.morris539@example.com | 36 | Admin | Suspended |
| 3 | Joseph Phillips | linda.jones@company.com | 32 | Admin | Inactive |
| 4 | Steven Cruz | nicole.flores@company.com | 31 | Admin | Active |
| 5 | Susan Kelly | mark.murphy@organization.com | 21 | Designer | Pending |
| 6 | Katherine Garcia | carol.mitchell@example.com | 41 | Admin | Pending |
| 7 | Cynthia Garcia | donna.richardson336@example.com | 54 | User | Inactive |
| 8 | Jacob Jones | edward.walker@enterprise.net | 62 | Moderator | Inactive |
| 9 | Deborah Wright | larry.ramos@enterprise.net | 57 | Analyst | Inactive |
| 10 | Katherine Perez | amanda.ramos@enterprise.net | 65 | Analyst | Inactive |
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 |
|---|---|---|
| Joshua James | john.murphy@enterprise.net | Admin |
| Jimmy Ramirez | amanda.morris539@example.com | Admin |
| Joseph Phillips | linda.jones@company.com | Admin |
| Steven Cruz | nicole.flores@company.com | Admin |
| Susan Kelly | mark.murphy@organization.com | Designer |
Without Toolbar
A minimal table without the toolbar (no search or column visibility).
Name | Email | Age |
|---|---|---|
| Joshua James | john.murphy@enterprise.net | 53 |
| Jimmy Ramirez | amanda.morris539@example.com | 36 |
| Joseph Phillips | linda.jones@company.com | 32 |
| Steven Cruz | nicole.flores@company.com | 31 |
| Susan Kelly | mark.murphy@organization.com | 21 |
Custom Toolbar Actions
Add custom action buttons to the toolbar.
Name | Email | Role |
|---|---|---|
| Joshua James | john.murphy@enterprise.net | Admin |
| Jimmy Ramirez | amanda.morris539@example.com | Admin |
| Joseph Phillips | linda.jones@company.com | Admin |
| Steven Cruz | nicole.flores@company.com | Admin |
| Susan Kelly | mark.murphy@organization.com | Designer |
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.
API Reference
Component properties and parameters.
DataTable
Data
Type: IEnumerable<TData>
The data source for the table.
SelectionMode
Type: DataTableSelectionMode
Default: None
The selection mode: None, Single, or Multiple.
SelectedItems
Type: IReadOnlyCollection<TData>
The currently selected items. Use with @bind-SelectedItems for two-way binding.
EnableKeyboardNavigation
Type: bool
Default: true
When true, enables keyboard navigation for table rows (arrow keys to navigate, Enter/Space to select).
ShowToolbar
Type: bool
Default: true
Whether to show the toolbar with global search and column visibility.
ShowPagination
Type: bool
Default: true
Whether to show pagination controls.
IsLoading
Type: bool
Default: false
Whether the table is in a loading state.
InitialPageSize
Type: int
Default: 5
The initial page size.
PageSizes
Type: int[]
Default: [5, 10, 20, 50, 100]
The available page size options.
DataTableColumn
Property
Type: Func<TData, TValue>
Expression to get the column value from a data item.
Header
Type: string
The column header text.
Sortable
Type: bool
Default: false
Whether the column is sortable.
CellTemplate
Type: RenderFragment<TData>?
Custom template for rendering the cell content.
Visible
Type: bool
Default: true
Whether the column is visible.