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_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

Component	Description
Table	Root container with border, rounded corners, and background
TableHeader	Header section with distinct background and font weight
TableBody	Body section wrapping data rows
TableFooter	Footer section with top border
TableRow	A flex row with bottom border
TableHead	Header cell with alignment and width options
TableCell	Data cell with alignment and width options
TableCaption	Caption text below the table

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

Feature	Table	DataTable
Virtual scrolling	No	Yes
Column sorting	No	Yes
Column resizing	No	Yes
Column moving	No	Yes
Cell selection	No	Yes
Row selection	No	Yes
Infinite loading	No	Yes
Keyboard navigation	No	Yes
State management	Stateless	TableState
Best for	Small, static data	Large, interactive datasets