Table

Table 是一个简单、无状态、可组合的表格组件，用于渲染表格型数据。与 DataTable 不同，它不包含虚拟滚动、排序或列管理能力，更适合直接用声明式 API 展示较小且静态的数据。

#导入

use gpui_kit::component::table::{
    Table, TableHeader, TableBody, TableFooter,
    TableRow, TableHead, TableCell, TableCaption,
};

#用法

#基础表格

Table::new()
    .child(TableHeader::new().child(
        TableRow::new()
            .child(TableHead::new().child("Name"))
            .child(TableHead::new().child("Email"))
            .child(TableHead::new().text_right().child("Amount"))
    ))
    .child(TableBody::new()
        .child(TableRow::new()
            .child(TableCell::new().child("John"))
            .child(TableCell::new().child("john@example.com"))
            .child(TableCell::new().text_right().child("$100.00")))
        .child(TableRow::new()
            .child(TableCell::new().child("Jane"))
            .child(TableCell::new().child("jane@example.com"))
            .child(TableCell::new().text_right().child("$200.00")))
    )
    .child(TableCaption::new().child("A list of recent invoices."))

#带 Footer

Table::new()
    .child(TableHeader::new().child(
        TableRow::new()
            .child(TableHead::new().child("Invoice"))
            .child(TableHead::new().child("Status"))
            .child(TableHead::new().text_right().child("Amount"))
    ))
    .child(TableBody::new()
        .child(TableRow::new()
            .child(TableCell::new().child("INV001"))
            .child(TableCell::new().child("Paid"))
            .child(TableCell::new().text_right().child("$250.00")))
    )
    .child(TableFooter::new().child(
        TableRow::new()
            .child(TableCell::new().child("Total"))
            .child(TableCell::new().child(""))
            .child(TableCell::new().text_right().child("$250.00"))
    ))

#列宽

可以在 TableHead 和 TableCell 上使用 .w() 设置固定列宽：

TableRow::new()
    .child(TableHead::new().w(px(80.)).child("ID"))
    .child(TableHead::new().child("Name"))
    .child(TableHead::new().w(px(120.)).child("Date"))

#文本对齐

TableHead::new().text_center().child("Status")

TableCell::new().text_right().child("$1,000.00")

#去掉边框

所有表格子组件都实现了 Styled，可以直接自定义样式：

Table::new()
    .border_0()
    .rounded_none()
    .child(/* ... */)

#自定义样式

TableRow::new()
    .bg(cx.theme().table_even)
    .child(/* ... */)

TableCell::new()
    .px_4()
    .child("Custom padded content")

#子组件

#API 摘要

#Table

• new() - 创建新表格
• 实现了 Styled、ParentElement、Sizable、RenderOnce

#TableHead / TableCell

• new() - 创建单元格
• w(width) - 设置固定宽度
• text_center() - 居中对齐
• text_right() - 右对齐

#TableHeader / TableBody / TableFooter / TableRow / TableCaption

• new() - 创建实例
• 实现了 Styled、ParentElement、RenderOnce

#Table 和 DataTable 的区别