Table

A simple, stateless, composable table component for rendering tabular data. Unlike DataTable, this component does not include virtual scrolling, sorting, or column management — it is designed for straightforward data display using a declarative API.

#Import

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

#Usage

#Basic Table

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."))

#With 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"))
    ))

#Column Widths

Use .w() on TableHead and TableCell to set fixed column widths:

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

#Text Alignment

// Center-aligned header
TableHead::new().text_center().child("Status")

// Right-aligned cell (e.g., for numbers)
TableCell::new().text_right().child("$1,000.00")

#Without Border (via Styled)

All table sub-components implement the Styled trait, so you can customize styles directly:

// Remove border and rounded corners
Table::new()
    .border_0()
    .rounded_none()
    .child(/* ... */)

#Custom Styling

Since all components implement Styled, you can apply any GPUI style:

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

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

#Sub-components

#API Reference

#Table

• new() - Create a new table
• Implements Styled, ParentElement, Sizable, RenderOnce

#TableHead / TableCell

• new() - Create a new head/cell
• w(width) - Set fixed width (otherwise flex-1)
• text_center() - Center-align content
• text_right() - Right-align content
• Implements Styled, ParentElement, RenderOnce

#TableHeader / TableBody / TableFooter / TableRow / TableCaption

• new() - Create a new instance
• Implements Styled, ParentElement, RenderOnce

#Table vs DataTable