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 items or data_source.
  • Enable feature flags on features as needed (pinning, virtualization, pivot, etc.).
  • Customize toolbar and header chrome with toolbar_config and header_chrome without 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.

No data yet
Custom footer
Toolbar and header chrome

Toggle built-in toolbar controls and column-header actions without replacing the whole toolbar.

Ada