Struct DataTableProps 

pub struct DataTableProps {

    pub class: MaybeProp<String>,
    pub columns: Option<Vec<DataTableColumnDef>>,
    pub data_source: Option<DataTableSource>,
    pub paging: PagingMode,
    pub items: Option<RwSignal<Vec<DataTableRowModel>>>,
    pub edit_mode: EditMode,
    pub show_undo_toolbar: bool,
    pub features: DataTableFeatures,
    pub toolbar_config: DataTableToolbarConfig,
    pub header_chrome: DataTableHeaderChromeConfig,
    pub sortable: bool,
    pub resizable_columns: bool,
    pub column_groups: Option<Vec<DataTableColumnGroupDef>>,
    pub header_height: Option<f64>,
    pub height: Option<f64>,
    pub max_height: Option<f64>,
    pub flex: bool,
    pub auto_row_height: bool,
    pub locale: Option<DataTableLocale>,
    pub pagination_display: PaginationDisplayFormat,
    pub page_size_options: Option<Vec<u32>>,
    pub data_table_toolbar: Option<DataTableToolbarSlot>,
    pub data_table_toolbar_slot: Option<DataTableToolbarSlot>,
    pub data_table_footer: Option<DataTableFooterSlot>,
    pub data_table_footer_slot: Option<DataTableFooterSlot>,
    pub data_table_empty_view: Option<DataTableEmptyView>,
    pub data_table_no_results_view: Option<DataTableNoResultsView>,
    pub data_table_loading_view: Option<DataTableLoadingView>,
    pub loading: Option<RwSignal<bool>>,
    pub dir: Option<Direction>,
    pub get_row_class: Option<Callback<(DataTableRowModel, usize), String>>,
    pub get_row_id: Option<GetRowId>,
    pub get_tree_path: Option<GetTreePath>,
    pub row_grouping: Option<DataTableRowGrouping>,
    pub aggregation: Option<AggregationModel>,
    pub aggregation_position: AggregationPosition,
    pub pivot: Option<DataTablePivotModel>,
    pub list_view: Option<ListViewConfig>,
    pub data_table_row_detail: Option<DataTableRowDetail>,
    pub row_detail: Option<RowDetailView>,
    pub selection_mode: Option<DataTableSelectionMode>,
    pub initial_state: Option<DataTableInitialState>,
    pub sort: Option<Signal<Option<DataTableSort>>>,
    pub filter: Option<Signal<Option<DataTableFilter>>>,
    pub pagination: Option<Signal<Option<PaginationState>>>,
    pub selection: Option<Signal<Option<HashSet<String>>>>,
    pub server_fetch_policy: ServerFetchPolicy,
    pub data_table_events: DataTableEvents,
    pub events: Option<DataTableEvents>,
    pub on_handle: Option<Callback<DataTableHandle, ()>>,
    pub children: Option<Children>,
}

Props for the DataTable component.

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.

When to use

• 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

When to use Table instead

Use Table for static or lightly interactive content without a built-in data engine.

Usage

1. Define columns with DataTableColumnDef — see Column Definition.
2. Supply rows via items or data_source.
3. Enable feature flags on features as needed (pinning, virtualization, pivot, etc.).
4. Customize toolbar and header chrome with toolbar_config and header_chrome without replacing slots.

Best Practices

Do’s

• Bind columns to FieldDef keys via DataTableColumnDef::field
• Wrap rows as DataTableRowModel over typed DataRecord values
• Prefer data_source for explicit client/server mode; items is sugar for client signals
• Use topic pages under Data Table for column, row, editing, and state patterns

Don’ts

• Do not replace the entire toolbar when you only need to hide one control — use toolbar_config
• Do not use raw HTML for toolbar/footer controls — the built-in chrome uses Orbital primitives

DataTable topic guide

• Columns — Column Definition, Column Features
• Rows — Rows
• Editing — Editing
• Sort & filter — Sorting & Filtering
• Data & paging — Data Source & Pagination
• Selection & export — Selection, Export & Clipboard
• UX — Rendering & UX
• Advanced — Tree, Grouping & Pivot, Charts Integration
• State — State & Handle

Toolbar and header chrome

Field	Type	Default	Description
quick_search	bool	true	Quick-search field in the toolbar
filter_panel	bool	true	Structured filter panel trigger
column_picker	bool	true	Column visibility picker trigger
pivot	bool	true	Pivot panel trigger (requires PIVOTING)
export_menu	bool	true	Export/print menu trigger

DataTableHeaderChromeConfig gates per-header menu, filter button, and hide-column UX. See Column Features for header chrome interaction with column menus.

Examples

Default data table

Sortable columns with quick search and pagination.

use crate::{DataTable, DataTableColumnDef, DataTableRowModel};
use std::collections::HashMap;
let items = RwSignal::new(vec![
    DataTableRowModel::from_text_cells("1", HashMap::from([("name".into(), "Ada".into()), ("role".into(), "Admin".into())])),
    DataTableRowModel::from_text_cells("2", HashMap::from([("name".into(), "Grace".into()), ("role".into(), "Editor".into())])),
]);
view! {
    <div data-testid="data-table-preview">
        <DataTable
            sortable=true
            columns=vec![
                DataTableColumnDef::new("name", "Name"),
                DataTableColumnDef::new("role", "Role"),
            ]
            items=items
        />
    </div>
}

Row selection

Multiselect with checkboxes.

use crate::{DataTable, DataTableColumnDef, DataTableRowModel, DataTableSelectionMode};
use std::collections::HashMap;
let items = RwSignal::new(vec![
    DataTableRowModel::from_text_cells("a", HashMap::from([("name".into(), "Alpha".into())])),
    DataTableRowModel::from_text_cells("b", HashMap::from([("name".into(), "Beta".into())])),
]);
view! {
    <div data-testid="data-table-selection">
        <DataTable
            selection_mode=DataTableSelectionMode::Multiselect
            columns=vec![DataTableColumnDef::new("name", "Name")]
            items=items
        />
    </div>
}

Density variants

Row and header heights respond to theme density.

use crate::{DataTable, DataTableColumnDef, DataTableRowModel};
use orbital_core_components::{Flex, FlexGap, ThemeDensityStepper};
use std::collections::HashMap;
let items = RwSignal::new(vec![
    DataTableRowModel::from_text_cells("1", HashMap::from([("name".into(), "Ada".into())])),
]);
view! {
    <div data-testid="data-table-density">
        <Flex vertical=true gap=FlexGap::Medium>
            <ThemeDensityStepper />
            <DataTable
                columns=vec![DataTableColumnDef::new("name", "Name")]
                items=items
            />
        </Flex>
    </div>
}

Layout

Fixed height and flex-fill in a bounded parent.

use std::collections::HashMap;
use crate::{DataTable, DataTableColumnDef, DataTableRowModel, PagingMode};
let items = RwSignal::new((0..30).map(|i| {
    DataTableRowModel::from_text_cells(&i.to_string(), HashMap::from([("name".into(), format!("Row {i}"))]))
}).collect::<Vec<_>>());
view! {
    <div data-testid="data-table-layout-preview" style="display: flex; flex-direction: column; height: 350px;">
        <DataTable
            flex=true
            max_height=280.0
            paging=PagingMode::None
            columns=vec![DataTableColumnDef::new("name", "Name")]
            items=items
        />
    </div>
}

Custom slots

Replace toolbar, footer, and empty views with custom content via Leptos slot children.

use std::collections::HashMap;
use crate::{
    DataTable, DataTableColumnDef, DataTableEmptyView, DataTableFooterSlot,
    DataTableRowModel, DataTableToolbarSlot, PagingMode,
};
use orbital_core_components::{Toolbar, ToolbarButton};
let empty: RwSignal<Vec<DataTableRowModel>> = RwSignal::new(vec![]);
view! {
    <div data-testid="data-table-slots-preview">
        <DataTable
            paging=PagingMode::None
            max_height=200.0
            columns=vec![DataTableColumnDef::new("name", "Name")]
            items=empty
        >
            <DataTableToolbarSlot slot>
                <div data-testid="custom-toolbar">
                    <Toolbar><ToolbarButton>"Custom toolbar"</ToolbarButton></Toolbar>
                </div>
            </DataTableToolbarSlot>
            <DataTableFooterSlot slot>
                <div data-testid="custom-footer">"Custom footer"</div>
            </DataTableFooterSlot>
            <DataTableEmptyView slot>
                <div data-testid="custom-empty">"No data yet"</div>
            </DataTableEmptyView>
        </DataTable>
    </div>
}

Toolbar and header chrome

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

use std::collections::HashMap;
use crate::{
    DataTable, DataTableColumnDef, DataTableHeaderChromeConfig, DataTableRowModel,
    DataTableToolbarConfig, PagingMode,
};
let items = RwSignal::new(vec![
    DataTableRowModel::from_text_cells("1", HashMap::from([("name".into(), "Ada".into())])),
]);
view! {
    <div data-testid="data-table-chrome-config-preview">
        <DataTable
            paging=PagingMode::None
            max_height=200.0
            toolbar_config=DataTableToolbarConfig {
                quick_search: true,
                filter_panel: false,
                column_picker: false,
                pivot: false,
                export_menu: true,
            }
            header_chrome=DataTableHeaderChromeConfig {
                column_menu: false,
                column_filter_button: false,
                column_hide: false,
            }
            columns=vec![DataTableColumnDef::new("name", "Name")]
            items=items
        />
    </div>
}

Optional Props

• class: impl Into<MaybeProp<String>>
  • Extra CSS class names merged onto the root element.
• columns: Vec<DataTableColumnDef>
  • Column definitions (bind to dataset schema field keys).
• data_source: DataTableSource
  • Unified data source (client signal or server fetcher).
• paging: PagingMode
  • Pagination presentation (Paged, InfiniteScroll, or None).
• items: RwSignal<Vec<DataTableRowModel>>
  • Reactive row data (sugar for DataTableSource::Client when data_source is omitted).
• edit_mode: EditMode
  • Inline edit scope: single cell or whole row.
• show_undo_toolbar: bool
  • Show undo/redo toolbar (typically enabled in undo preview).
• features: DataTableFeatures
  • Opt-in capability flags.
• toolbar_config: DataTableToolbarConfig
  • Built-in toolbar control visibility (ignored when a custom toolbar slot is provided).
• header_chrome: DataTableHeaderChromeConfig
  • Column header chrome visibility (menu, filter button, hide-column UX).
• sortable: bool
  • Enable column header sorting.
• resizable_columns: bool
  • Enable drag resize on column headers.
• column_groups: Vec<DataTableColumnGroupDef>
  • Optional nested column groups for multi-row headers.
• header_height: f64
  • Optional override for header row height in pixels.
• height: f64
  • Fixed height for the scroll body in pixels (enables vertical scroll).
• max_height: f64
  • Optional max height for the scroll body (enables vertical scroll).
• flex: bool
  • Fill available height in a flex parent (flex: 1; min-height: 0).
• auto_row_height: bool
  • Allow rows to grow taller than the density-mapped minimum height.
• locale: DataTableLocale
  • Localized UI strings (footer, overlays, search placeholder).
• pagination_display: PaginationDisplayFormat
  • Footer pagination label format (Locale range vs legacy Plain count).
• page_size_options: Option<Vec<u32>>
  • Rows-per-page options for footer Select (None hides the selector).
• data_table_toolbar: DataTableToolbarSlot
  • Custom toolbar — nest with <DataTableToolbarSlot slot>.
• data_table_toolbar_slot: DataTableToolbarSlot
  • Deprecated — use [data_table_toolbar].
• data_table_footer: DataTableFooterSlot
  • Custom footer — nest with <DataTableFooterSlot slot>.
• data_table_footer_slot: DataTableFooterSlot
  • Deprecated — use [data_table_footer].
• data_table_empty_view: DataTableEmptyView
  • Custom empty-state overlay — nest with <DataTableEmptyView slot>.
• data_table_no_results_view: DataTableNoResultsView
  • Custom no-results overlay — nest with <DataTableNoResultsView slot>.
• data_table_loading_view: DataTableLoadingView
  • Custom loading overlay — nest with <DataTableLoadingView slot>.
• loading: RwSignal<bool>
  • Client-controlled loading state for overlay display.
• dir: Direction
  • Text direction override (defaults to theme direction).
• get_row_class: Callback<(DataTableRowModel, usize), String>
  • Per-row CSS class callback.
• get_row_id: GetRowId
  • Custom row id resolver (default: [DataRecord::id]).
• get_tree_path: GetTreePath
  • Hierarchical path resolver for tree data (TREE_DATA).
• row_grouping: DataTableRowGrouping
  • Row grouping model (ROW_GROUPING).
• aggregation: AggregationModel
  • Aggregation rules for footer/group summaries (AGGREGATION).
• aggregation_position: AggregationPosition
  • Where aggregate values render (footer or inline on groups).
• pivot: DataTablePivotModel
  • Pivot configuration (PIVOTING).
• list_view: ListViewConfig
  • List view card layout config (LIST_VIEW).
• data_table_row_detail: DataTableRowDetail
  • Custom row detail panel — nest with <DataTableRowDetail slot render=... />.
• row_detail: RowDetailView
  • Deprecated — use DataTableRowDetail slot or [data_table_row_detail].
• selection_mode: DataTableSelectionMode
  • Row selection mode (Single or Multiselect).
• initial_state: DataTableInitialState
  • One-time initial state (sort, search, pagination, selection).
• sort: Signal<Option<DataTableSort>>
  • Controlled sort model (None = uncontrolled).
• filter: Signal<Option<DataTableFilter>>
  • Controlled filter model (None = uncontrolled).
• pagination: Signal<Option<PaginationState>>
  • Controlled pagination (None = uncontrolled).
• selection: Signal<Option<std::collections::HashSet<String>>>
  • Controlled selection ids (None = uncontrolled).
• server_fetch_policy: ServerFetchPolicy
  • Server fetch invalidation: drop stale in-flight responses; optional ServerFetchPolicy::dedupe_key.
• data_table_events: DataTableEvents
  • Side-effect callbacks for table integration.
• events: DataTableEvents
  • Deprecated — prefer [data_table_events].
• on_handle: Callback<DataTableHandle, ()>
  • Deprecated — prefer data_table_events.on_handle.
• children: Children
  • Additional children (provider context, etc.).

Fields

class: MaybeProp<String>

Extra CSS class names merged onto the root element.

columns: Option<Vec<DataTableColumnDef>>

Column definitions (bind to dataset schema field keys).

data_source: Option<DataTableSource>

Unified data source (client signal or server fetcher).

paging: PagingMode

Pagination presentation (Paged, InfiniteScroll, or None).

items: Option<RwSignal<Vec<DataTableRowModel>>>

Reactive row data (sugar for DataTableSource::Client when data_source is omitted).

edit_mode: EditMode

Inline edit scope: single cell or whole row.

show_undo_toolbar: bool

Show undo/redo toolbar (typically enabled in undo preview).

features: DataTableFeatures

Opt-in capability flags.

toolbar_config: DataTableToolbarConfig

Built-in toolbar control visibility (ignored when a custom toolbar slot is provided).

header_chrome: DataTableHeaderChromeConfig

Column header chrome visibility (menu, filter button, hide-column UX).

sortable: bool

Enable column header sorting.

resizable_columns: bool

Enable drag resize on column headers.

column_groups: Option<Vec<DataTableColumnGroupDef>>

Optional nested column groups for multi-row headers.

header_height: Option<f64>

Optional override for header row height in pixels.

height: Option<f64>

Fixed height for the scroll body in pixels (enables vertical scroll).

max_height: Option<f64>

Optional max height for the scroll body (enables vertical scroll).

flex: bool

Fill available height in a flex parent (flex: 1; min-height: 0).

auto_row_height: bool

Allow rows to grow taller than the density-mapped minimum height.

locale: Option<DataTableLocale>

Localized UI strings (footer, overlays, search placeholder).

pagination_display: PaginationDisplayFormat

Footer pagination label format (Locale range vs legacy Plain count).

page_size_options: Option<Vec<u32>>

Rows-per-page options for footer Select (None hides the selector).

data_table_toolbar: Option<DataTableToolbarSlot>

Custom toolbar — nest with <DataTableToolbarSlot slot>.

data_table_toolbar_slot: Option<DataTableToolbarSlot>

Deprecated — use [data_table_toolbar].

data_table_footer: Option<DataTableFooterSlot>

Custom footer — nest with <DataTableFooterSlot slot>.

data_table_footer_slot: Option<DataTableFooterSlot>

Deprecated — use [data_table_footer].

data_table_empty_view: Option<DataTableEmptyView>

Custom empty-state overlay — nest with <DataTableEmptyView slot>.

data_table_no_results_view: Option<DataTableNoResultsView>

Custom no-results overlay — nest with <DataTableNoResultsView slot>.

data_table_loading_view: Option<DataTableLoadingView>

Custom loading overlay — nest with <DataTableLoadingView slot>.

loading: Option<RwSignal<bool>>

Client-controlled loading state for overlay display.

dir: Option<Direction>

Text direction override (defaults to theme direction).

get_row_class: Option<Callback<(DataTableRowModel, usize), String>>

Per-row CSS class callback.

get_row_id: Option<GetRowId>

Custom row id resolver (default: [DataRecord::id]).

get_tree_path: Option<GetTreePath>

Hierarchical path resolver for tree data (TREE_DATA).

row_grouping: Option<DataTableRowGrouping>

Row grouping model (ROW_GROUPING).

aggregation: Option<AggregationModel>

Aggregation rules for footer/group summaries (AGGREGATION).

aggregation_position: AggregationPosition

Where aggregate values render (footer or inline on groups).

pivot: Option<DataTablePivotModel>

Pivot configuration (PIVOTING).

list_view: Option<ListViewConfig>

List view card layout config (LIST_VIEW).

data_table_row_detail: Option<DataTableRowDetail>

Custom row detail panel — nest with <DataTableRowDetail slot render=... />.

row_detail: Option<RowDetailView>

Deprecated — use DataTableRowDetail slot or [data_table_row_detail].

selection_mode: Option<DataTableSelectionMode>

Row selection mode (Single or Multiselect).

initial_state: Option<DataTableInitialState>

One-time initial state (sort, search, pagination, selection).

sort: Option<Signal<Option<DataTableSort>>>

Controlled sort model (None = uncontrolled).

filter: Option<Signal<Option<DataTableFilter>>>

Controlled filter model (None = uncontrolled).

pagination: Option<Signal<Option<PaginationState>>>

Controlled pagination (None = uncontrolled).

selection: Option<Signal<Option<HashSet<String>>>>

Controlled selection ids (None = uncontrolled).

server_fetch_policy: ServerFetchPolicy

Server fetch invalidation: drop stale in-flight responses; optional ServerFetchPolicy::dedupe_key.

data_table_events: DataTableEvents

Side-effect callbacks for table integration.

events: Option<DataTableEvents>

Deprecated — prefer [data_table_events].

on_handle: Option<Callback<DataTableHandle, ()>>

Deprecated — prefer data_table_events.on_handle.

children: Option<Children>

Additional children (provider context, etc.).

Implementations

impl DataTableProps

pub fn builder() -> DataTablePropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building DataTableProps. On the builder, call .class(...)(optional), .columns(...)(optional), .data_source(...)(optional), .paging(...)(optional), .items(...)(optional), .edit_mode(...)(optional), .show_undo_toolbar(...)(optional), .features(...)(optional), .toolbar_config(...)(optional), .header_chrome(...)(optional), .sortable(...)(optional), .resizable_columns(...)(optional), .column_groups(...)(optional), .header_height(...)(optional), .height(...)(optional), .max_height(...)(optional), .flex(...)(optional), .auto_row_height(...)(optional), .locale(...)(optional), .pagination_display(...)(optional), .page_size_options(...)(optional), .data_table_toolbar(...)(optional), .data_table_toolbar_slot(...)(optional), .data_table_footer(...)(optional), .data_table_footer_slot(...)(optional), .data_table_empty_view(...)(optional), .data_table_no_results_view(...)(optional), .data_table_loading_view(...)(optional), .loading(...)(optional), .dir(...)(optional), .get_row_class(...)(optional), .get_row_id(...)(optional), .get_tree_path(...)(optional), .row_grouping(...)(optional), .aggregation(...)(optional), .aggregation_position(...)(optional), .pivot(...)(optional), .list_view(...)(optional), .data_table_row_detail(...)(optional), .row_detail(...)(optional), .selection_mode(...)(optional), .initial_state(...)(optional), .sort(...)(optional), .filter(...)(optional), .pagination(...)(optional), .selection(...)(optional), .server_fetch_policy(...)(optional), .data_table_events(...)(optional), .events(...)(optional), .on_handle(...)(optional), .children(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of DataTableProps.

Trait Implementations

impl Props for DataTableProps

type Builder = DataTablePropsBuilder

fn builder() -> Self::Builder