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.

Install

#Import

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

// Installed in ui/components. That directory is on the Slint include path, so import by file name:
import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from "table.slint";

use iced::widget::{column, container, mouse_area, row, svg, text};
use iced::{Alignment, Element, Length, Task, Theme};

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

Table {
    TableHeader {
        TableRow {
            TableHead {
                text: "Invoice";
            }
            TableHead {
                text: "Status";
            }
            TableHead {
                text: "Method";
            }
            TableHead {
                text: "Amount";
                align: TextHorizontalAlignment.right;
            }
        }
    }
    TableBody {
        for row[
            i
        ]
        in invoices: TableRow {
            index: i;
            TableCell {
                text: row.invoice;
            }
            TableCell {
                text: row.status;
            }
            TableCell {
                text: row.method;
            }
            TableCell {
                text: row.amount;
                align: TextHorizontalAlignment.right;
            }
        }
    }
    TableCaption {
        text: "A list of your recent invoices.";
    }
}

// The header band, twelve rows in a bounded scroll area, and the caption.
// Slint stacks the rows and lets the page scroll; this port puts the body on
// `scrollable`, so the header and the caption stay while the rows move. The
// `index` on each row is what draws the rule above it.
let mut basic_rows = Vec::new();
for (index, (invoice, status, method, amount)) in INVOICES.iter().enumerate() {
    basic_rows.push(invoice_row(
        index,
        invoice,
        status,
        method,
        amount,
        ControlSize::Medium,
        false,
    ));
}

let basic = Table::new()
    .header(TableHeader::new().row(
        TableRow::new()
            .head("Invoice")
            .head("Status")
            .head("Method")
            .head(TableHead::new("Amount").align(Align::End)),
    ))
    .body(TableBody::new(basic_rows).height(Length::Fixed(BODY_HEIGHT)))
    .caption("A list of your recent invoices.");

#Striped, bordered and sizes

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

GridLayout {
    spacing: 8px;
    Button {
        horizontal-stretch: 0;
        text: "Striped";
        selected: striped;
        clicked => {
            striped = !striped;
        }
    }
    Button {
        horizontal-stretch: 0;
        text: "Bordered";
        selected: bordered;
        clicked => {
            bordered = !bordered;
        }
    }
    Rectangle {
        horizontal-stretch: 0;
        width: 8px;
    }
    Button {
        horizontal-stretch: 0;
        text: "Small";
        selected: table-size == ControlSize.small;
        clicked => {
            table-size = ControlSize.small;
        }
    }
    Button {
        horizontal-stretch: 0;
        text: "Medium";
        selected: table-size == ControlSize.medium;
        clicked => {
            table-size = ControlSize.medium;
        }
    }
    Button {
        horizontal-stretch: 0;
        text: "Large";
        selected: table-size == ControlSize.large;
        clicked => {
            table-size = ControlSize.large;
        }
    }
}
Table {
    bordered: bordered;
    TableHeader {
        TableRow {
            TableHead {
                text: "Invoice";
                size: table-size;
            }
            TableHead {
                text: "Status";
                size: table-size;
                align: TextHorizontalAlignment.center;
            }
            TableHead {
                text: "Method";
                size: table-size;
            }
            TableHead {
                text: "Amount";
                size: table-size;
                align: TextHorizontalAlignment.right;
            }
        }
    }
    TableBody {
        for row[
            i
        ]
        in invoices: TableRow {
            index: i;
            striped: striped;
            TableCell {
                text: row.invoice;
                size: table-size;
            }
            TableCell {
                size: table-size;
                align: TextHorizontalAlignment.center;
                VerticalLayout {
                    alignment: center;
                    Rectangle {
                        property <color> tone: row.status == "Paid" ? Theme.success : row.status == "Pending" ? Theme.warning : Theme.danger;
                        height: 20px;
                        border-radius: Theme.radius-sm;
                        background: Theme.tint(tone);
                        HorizontalLayout {
                            padding-left: 6px;
                            padding-right: 6px;
                            Text {
                                text: row.status;
                                color: tone;
                                font-size: Theme.font-size-xs;
                                font-weight: 500;
                                vertical-alignment: center;
                            }
                        }
                    }
                }
            }
            TableCell {
                text: row.method;
                size: table-size;
            }
            TableCell {
                text: row.amount;
                size: table-size;
                align: TextHorizontalAlignment.right;
            }
        }
    }
    TableFooter {
        TableRow {
            TableCell {
                text: "Total";
                size: table-size;
                col-span: 3;
            }
            TableCell {
                text: "$1,750.00";
                size: table-size;
                align: TextHorizontalAlignment.right;
            }
        }
    }
}

// The three switches the Slint example puts above its table. Only what the
// caller changes is state: the table itself reads the switch back.
let controls = row![
    Button::new("Striped")
        .selected(app.striped)
        .on_press(Message::ToggleStriped),
    Button::new("Bordered")
        .selected(app.bordered)
        .on_press(Message::ToggleBordered),
    Button::new("Small")
        .selected(app.size == ControlSize::Small)
        .on_press(Message::SetSize(ControlSize::Small)),
    Button::new("Medium")
        .selected(app.size == ControlSize::Medium)
        .on_press(Message::SetSize(ControlSize::Medium)),
    Button::new("Large")
        .selected(app.size == ControlSize::Large)
        .on_press(Message::SetSize(ControlSize::Large)),
]
.spacing(theme::SPACING_SM);

let mut striped_rows = Vec::new();
for (index, (invoice, status, method, amount)) in INVOICES.iter().take(5).enumerate() {
    striped_rows.push(
        invoice_row(
            index,
            invoice,
            status,
            method,
            amount,
            app.size,
            true,
        )
        .striped(app.striped),
    );
}

let striped = Table::new()
    .bordered(app.bordered)
    .header(TableHeader::new().row(
        TableRow::new()
            .head(TableHead::new("Invoice").size(app.size))
            .head(TableHead::new("Status").size(app.size).align(Align::Center))
            .head(TableHead::new("Method").size(app.size))
            .head(TableHead::new("Amount").size(app.size).align(Align::End)),
    ))
    .body(TableBody::new(striped_rows))
    .footer(TableFooter::new().row(
        TableRow::new()
            .cell(TableCell::new("Total").span(3).size(app.size))
            .cell(
                TableCell::new("$1,750.00")
                    .align(Align::End)
                    .size(app.size),
            ),
    ));