Table

用于组合表头、表体、行和单元格的语义表格原语。

和所有 GPUI Base 原语一样，Table 只提供行为和语义结构，不规定产品视觉语言。请使用 GPUI 样式并组合导出的部件，使其符合你的设计系统。

示例

原生示例和页面上方的 WASM 预览共用同一份实现：

cargo run -p gpui-base --example components -- table

导入

use gpui_base::{Table, TableBody, TableCell, TableHead, TableHeader, TableRow};

结构与 API

示例组合上述公开类型。GPUI 的标准样式和事件 trait 负责表现，Base 类型负责交互结构。权威实现位于 components/table.rs，原生与浏览器预览编译的是同一文件。

状态与事件

排序、选择和数据状态由应用持有，表格原语只表达结构。

受控状态应保存在父渲染类型或 GPUI entity 中；在回调中更新并调用 cx.notify()，不要在每次渲染时重建持久 entity。

完整 Rust 示例

use super::*;

impl BaseShowcase {
    pub(in super::super) fn table(&self) -> impl IntoElement {
        Table::new("example-table")
            .w_72()
            .text_xs()
            .border_1()
            .border_color(super::example_rgb(0xe5e7eb))
            .overflow_hidden()
            .child(
                TableHeader::new("header").child(
                    TableRow::new("header-row", 1)
                        .flex()
                        .bg(super::example_rgb(0xf5f5f5))
                        .child(
                            TableHead::new("name-head", 1)
                                .w(px(124.))
                                .px_2()
                                .py_1()
                                .child("Component"),
                        )
                        .child(
                            TableHead::new("status-head", 2)
                                .w(px(84.))
                                .px_2()
                                .py_1()
                                .child("Status"),
                        )
                        .child(
                            TableHead::new("version-head", 3)
                                .w(px(92.))
                                .px_2()
                                .py_1()
                                .child("Version"),
                        ),
                ),
            )
            .child(
                TableBody::new("body").children(
                    [
                        ("gpui-base", "Stable", "0.4.1"),
                        ("gpui-component", "Active", "0.4.1"),
                        ("story-web", "Preview", "0.2.8"),
                        ("gpui-web", "Beta", "0.1.0"),
                    ]
                    .into_iter()
                    .enumerate()
                    .map(|(ix, (name, status, version))| {
                        TableRow::new(("body-row", ix), ix)
                            .flex()
                            .border_t_1()
                            .border_color(super::example_rgb(0xe5e7eb))
                            .child(
                                TableCell::new("name", 1)
                                    .w(px(124.))
                                    .px_2()
                                    .py_1()
                                    .child(name),
                            )
                            .child(
                                TableCell::new(("status", ix), 2)
                                    .w(px(84.))
                                    .px_2()
                                    .py_1()
                                    .child(
                                        div()
                                            .px_1()
                                            .border_1()
                                            .border_color(super::example_rgb(0xd4d4d4))
                                            .child(status),
                                    ),
                            )
                            .child(
                                TableCell::new(("version", ix), 3)
                                    .w(px(92.))
                                    .px_2()
                                    .py_1()
                                    .text_color(super::example_rgb(0x737373))
                                    .child(version),
                            )
                    }),
                ),
            )
    }
}

可访问性

保留表头与单元格关系；交互式行或单元格必须有清晰焦点和名称。

注意事项

在支持的位置使用稳定元素 ID，并在消费端设计系统中验证焦点、悬停、按下、选中、禁用、减少动态效果和高对比度状态。