Table

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.

Prop Type Default Description
Data IEnumerable<TData> — The data source for the table.
State TableState<TData>? — Table state for controlled mode. Supports two-way binding with @bind-State.
SelectionMode SelectionMode None Selection mode: None, Single, or Multiple.
EnableKeyboardNavigation bool true Enables row keyboard navigation (Arrow keys, Enter/Space).
ManualPagination bool false When true, table will not automatically set total item count.
OnSelectionChange EventCallback<IReadOnlyCollection<TData>> — Callback invoked when selection changes.
OnSortChange EventCallback<(string, SortDirection)> — Callback invoked when sorting changes.
TableRow.Item TData? — The data item for a row. Required for selection behavior.
TableHeaderCell.ColumnId string? — Column identifier used for sortable headers.
Previous Switch Next Tabs

Reconnecting...

Attempting to rejoin the server

Connection Lost

Retrying in seconds

Connection Failed

Failed to rejoin the server.
Please retry or reload the page.

Session Paused

The session has been paused by the server

Resume Failed

Failed to resume the session.
Please reload the page.