Table Primitive

Headless, unstyled table primitive with sorting, pagination, and selection capabilities.

Basic Table

Simple table with no sorting, pagination, or selection

Name Email Age Department
John Doe john@example.com 32 Engineering
Jane Smith jane@example.com 28 Design
Bob Johnson bob@example.com 45 Sales
Alice Williams alice@example.com 35 Engineering
Charlie Brown charlie@example.com 29 Marketing
Diana Prince diana@example.com 31 Design
Eve Davis eve@example.com 27 Sales
Frank Miller frank@example.com 38 Engineering

Row Actions

Table with an actions dropdown menu for each row

Name Email Department Actions
John Doe john@example.com Engineering
Jane Smith jane@example.com Design
Bob Johnson bob@example.com Sales
Alice Williams alice@example.com Engineering
Charlie Brown charlie@example.com Marketing
Diana Prince diana@example.com Design
Eve Davis eve@example.com Sales
Frank Miller frank@example.com Engineering

Sortable Table

Click column headers to sort. Three-state cycle: None → Ascending → Descending → None

Name
Email
Age
Department
John Doe john@example.com 32 Engineering
Jane Smith jane@example.com 28 Design
Bob Johnson bob@example.com 45 Sales
Alice Williams alice@example.com 35 Engineering
Charlie Brown charlie@example.com 29 Marketing
Diana Prince diana@example.com 31 Design
Eve Davis eve@example.com 27 Sales
Frank Miller frank@example.com 38 Engineering

Current Sort State

Column: None

Direction: None

Paginated Table

Table with pagination controls and configurable page size

Name Email Age Department
Jimmy Taylor jimmy.taylor@example.com 22 Engineering
John Doe john.doe@example.com 23 Design
Jane Smith jane.smith@example.com 24 Sales
Bob Johnson bob.johnson@example.com 25 Marketing
Alice Williams alice.williams@example.com 26 HR
1-5 of 500 items

Rows per page

Page 1 of 100

Selectable Table (Multi-Select)

Click rows or checkboxes to select. Click header checkbox to select/deselect all. Use arrow keys to navigate and Enter/Space to select.

Name Email Age Department Actions
John Doe john@example.com 32 Engineering
Jane Smith jane@example.com 28 Design
Bob Johnson bob@example.com 45 Sales
Alice Williams alice@example.com 35 Engineering
Charlie Brown charlie@example.com 29 Marketing
Diana Prince diana@example.com 31 Design
Eve Davis eve@example.com 27 Sales
Frank Miller frank@example.com 38 Engineering

Selection State

Selected: 0 rows

All Features Combined

Filtering, sorting, pagination, and selection all working together

Name
Email
Age
Department
Jimmy Taylor jimmy.taylor@example.com 22 Engineering
John Doe john.doe@example.com 23 Design
Jane Smith jane.smith@example.com 24 Sales
Bob Johnson bob.johnson@example.com 25 Marketing
Alice Williams alice.williams@example.com 26 HR
1-5 of 500 items

Rows per page

Page 1 of 100

Current State

Active Filters: 0

Sort Column: None

Sort Direction: None

Current Page: 1 / 100

Selected Rows: 0

Filtered Results: 500 / 500

Column Filtering

Click filter icons in headers to filter by column

Name
Email
Department
Jimmy Taylor jimmy.taylor@example.com Engineering
John Doe john.doe@example.com Design
Jane Smith jane.smith@example.com Sales
Bob Johnson bob.johnson@example.com Marketing
Alice Williams alice.williams@example.com HR
Charlie Brown charlie.brown@example.com Finance
Diana Jones diana.jones@example.com Operations
Eve Garcia eve.garcia@example.com Support
Frank Miller frank.miller@example.com Engineering
Grace Davis grace.davis@example.com Design
1-10 of 500 items

Rows per page

Page 1 of 50

Filter State

Active Filters: 0

Results: 500 / 8

Global Search

Search across all columns simultaneously

Name Email Age Department
Jimmy Taylor jimmy.taylor@example.com 22 Engineering
John Doe john.doe@example.com 23 Design
Jane Smith jane.smith@example.com 24 Sales
Bob Johnson bob.johnson@example.com 25 Marketing
Alice Williams alice.williams@example.com 26 HR
Charlie Brown charlie.brown@example.com 27 Finance
Diana Jones diana.jones@example.com 28 Operations
Eve Garcia eve.garcia@example.com 29 Support
Frank Miller frank.miller@example.com 30 Engineering
Grace Davis grace.davis@example.com 31 Design
1-10 of 500 items

Rows per page

Page 1 of 50

Search Results

Query: None

Results: 500 / 8

Accessibility Features

Built-in accessibility features following WAI-ARIA design patterns.

ARIA Attributes

  • ✓ role="grid" for screen readers
  • ✓ aria-sort indicates column sort direction
  • ✓ aria-selected indicates row selection state
  • ✓ aria-rowcount for total row count
  • ✓ 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

API Reference

Component properties and parameters.

Table

Data

Type: IEnumerable<TData>
The data source for the table.

State

Type: TableState<TData>?
The table state for controlled mode. Use with @bind-State for two-way binding.

SelectionMode

Type: SelectionMode
Default: None
The selection mode: None, Single, or Multiple.

EnableKeyboardNavigation

Type: bool
Default: true
Enables keyboard navigation for table rows (arrow keys to navigate, Enter/Space to select).

ManualPagination

Type: bool
Default: false
When true, the table will not automatically set TotalItems.

OnSelectionChange

Type: EventCallback<IReadOnlyCollection<TData>>
Callback invoked when the selection changes.

OnSortChange

Type: EventCallback<(string, SortDirection)>
Callback invoked when sorting changes.

TableRow

Item

Type: TData?
The data item for this row. Required for selection to work.

Class

Type: string?
Additional CSS classes to apply to the row.

TableHeaderCell

ColumnId

Type: string?
The column identifier. When provided, clicking the header toggles sorting.

An unhandled error has occurred. Reload 🗙