Data Table

Powerful table and datagrids — sorting, filtering, pagination, row selection, column visibility and row actions.

Overview

shadcn 示例全特性：过滤 + 列可见性 + 排序 + 复选 + 分页 + 行操作。

GPUI · Live previewGPUI WASM

Installation

Data Table 是单个 Rust 文件（src/data_table.rs）—— 过滤框复用 gpui-base 的 InputState，弹层走 deferred() overlay pass，排序箭头/复选标记/⋯ 全部 PathBuilder 手绘。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# data_table.rs is self-contained: filter uses gpui-base's5# InputState, popups go through deferred(), all glyphs are6# PathBuilder — no extra deps.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --data-table34# Other demos:5cargo run --locked -- --data-table sorting6cargo run --locked -- --data-table filtering7cargo run --locked -- --data-table selection8cargo run --locked -- --data-table full

Usage

DataTable 是实体：DataColumn 定义列（固定宽或 flex、可排序、数值列右对齐），DataRow 提供 id + cells。所有特性都是 builder 开关 —— 与 TanStack 的 features 思路一致：不启用就不渲染。

Example.rs

1use justdo_command::data_table::{2    DataColumn, DataRow, DataTable, DataTableActionEvent,3};45let input = cx.new(|cx| {6    InputState::new(window, cx).placeholder("Filter emails…".to_string())7});89let table = cx.new(|cx| {10    DataTable::new(11        vec![12            DataColumn::new("status", "Status").width(px(110.)),13            DataColumn::new("email", "Email").sortable(true),14            DataColumn::new("amount", "Amount").numeric(true).width(px(110.)),15        ],16        vec![17            DataRow::new("728ed52f", vec![18                "success".into(),19                "ken99@example.com".into(),20                "$316.00".into(),21            ]),22            // …23        ],24        cx,25    )26    .filter_input(input, Some(1), cx)27    .selection(true)28    .column_visibility(true)29    .actions(&["Copy payment ID", "View customer"])30    .paginate(5)31});3233cx.subscribe(&table, |view, _, ev: &DataTableActionEvent, cx| {34    view.handle_row_action(ev.row.clone(), ev.action.clone());35    cx.notify();36});3738div().size_full().child(table)

网页预览与桌面端运行同一份 Rust / GPUI 组件。

Composition

结构对应 Table → TableHeader + TableBody + TableFooter，外加工具栏（过滤框 + 列可见性菜单）。行渲染只画可见列；表头复选框对过滤结果做全选/半选/未选三态。

Structure

1DataTable                    entity — columns, rows, every feature flag2├── DataTableToolbar      filter InputState + "Columns ▾" visibility menu3│                         .filter_input(input, Some(col), cx)4│                         .column_visibility(true)5├── TableHeader           .sortable(true) header → click cycles ↑/↓/原序6│   ├── head checkbox     .selection(true) — all/indeterminate over filtered7│   └── ⋯ column          shown when .actions(&[..]) is non-empty8├── TableBody             DataRow { id, cells } — hover + selected accent9│   ├── row checkbox      per-row toggle (stable by row index)10│   ├── cells             parallel to columns; .numeric(true) right-aligns11│   └── row menu          ⋯ → DataTableActionEvent { action, row }12└── TableFooter           "N of M selected" / "Page x of y" + Previous·Next13                          .paginate(page_size)

Pipeline.rs

1// Rows flow through three stages, each opt-in:2//3//   rows ──filter──▶ filtered ──sort──▶ sorted ──paginate──▶ page4//    12          query        column     page_size          55//6// filtered_indices() returns stable indices into rows, so a7// checkbox keeps its identity no matter how the view reorders.8//9// Query changes reset to page 0; sort cycles none→asc→desc→none;10// numeric columns parse digits out of "$1,240.00" → 1240.0.

Interactions

Sorting

点击 sortable 列头循环升序 → 降序 → 原序，箭头颜色区分激活态。数值列（numeric(true)）从文本里提取数字比较 —— $1,240.00 > $316.00。

Popups

行操作菜单与 Columns 清单都锚定在表格自身 bounds（每帧 prepaint 捕获），滚动时位置实时校正；点击外部或再点 ⋯ 关闭。

Anchoring.rs

1// The ⋯ row menu and the Columns checklist are popups drawn2// in the deferred pass, anchored against the table's own3// bounds (captured each prepaint):4//5//   row menu   x = table right − MENU_W, y = row bottom − scroll6//   cols menu  x = table right − COLS_W, y = toolbar bottom7//8// A full-size overlay swallows outside clicks → closes both.

Accessibility

States

表头复选框三态（unchecked / indeterminate / checked）反映过滤后的选中比例；分页按钮在边界页半透明并禁用；空结果渲染 "No results." 占位行。

Honest visuals

排序方向、选中行、禁用按钮、开关状态全部由绘制态驱动 —— 不依赖 DOM 语义，状态也可从实体读取（selected_ids()）。

API Reference

实体暴露的构造器、builder 方法与事件。

API	Signature	Notes
`DataTable::new(..)`	`Vec<DataColumn>, Vec<DataRow>`	Plain table — everything else is opt-in.
`DataColumn::new(..)`	`id, header`	`.sortable(..)` `.numeric(..)` `.width(..)`
`DataRow::new(..)`	`id, Vec<SharedString>`	`cells` parallel to columns.
`.filter_input(..)`	`Entity<InputState>, Option<col>`	Toolbar search box; live substring filter.
`.selection(..)`	`bool`	Checkbox column + footer count.
`.selected_ids()`	`-> Vec<SharedString>`	Stable row ids, view-independent.
`.paginate(..)`	`page_size`	Footer pager + page slice.
`.column_visibility(..)`	`bool`	"Columns ▾" dropdown checklist.
`.actions(..)`	`&[&str]`	⋯ column + row menu items.
`DataTableActionEvent`	`{ action, row }`	Menu item label + row id.

Source & inspiration

特性组合参考 shadcn/ui Data Table (TanStack Table) 。本页交互由 Rust / GPUI 绘制，基础原语来自 gpui-kit 。