Data Table
Presents sortable, filterable tabular data with built-in toolbar, selection, and pagination.
Bind columns and items (or data_source) to get a working table. Enable advanced capabilities via DataTableFeatures and tune toolbar/header chrome with DataTableToolbarConfig and DataTableHeaderChromeConfig. For static HTML tables without a data engine, use Table instead.
- Interactive grids over medium client-side datasets with sort, search, and pagination
- Server-driven paging, sort, and filter via
DataTableSource::Server - Admin views that need selection, editing, export, or grouping
- Define columns with
DataTableColumnDef— see Column Definition. - Supply rows via
itemsordata_source. - Enable feature flags on
featuresas needed (pinning, virtualization, pivot, etc.). - Customize toolbar and header chrome with
toolbar_configandheader_chromewithout replacing slots.
Default data table
Ada | Admin |
Grace | Editor |
Row selection
Multiselect with checkboxes.
Alpha | |
Beta |
Density variants
Row and header heights respond to theme density.
DensityCompact
Ada |
Layout
Fixed height and flex-fill in a bounded parent.
Row 0 |
Row 1 |
Row 2 |
Row 3 |
Row 4 |
Row 5 |
Row 6 |
Row 7 |
Row 8 |
Row 9 |
Row 10 |
Row 11 |
Row 12 |
Row 13 |
Row 14 |
Row 15 |
Row 16 |
Row 17 |
Row 18 |
Row 19 |
Row 20 |
Row 21 |
Row 22 |
Row 23 |
Row 24 |
Row 25 |
Row 26 |
Row 27 |
Row 28 |
Row 29 |
Custom slots
Replace toolbar, footer, and empty views with custom content via Leptos slot children.
Custom footer
Toolbar and header chrome
Toggle built-in toolbar controls and column-header actions without replacing the whole toolbar.
Ada |