GPUI Box GitHub

Components / data

DataGrid builder

A grid that virtualizes rows and columns over caller-owned data.

A builder is RenderOnce. Construct and mount it in one expression.

use gpui_kit::data::DataGrid;

Reviewed in data-grid data-grid-editing.

Construct
new(ident: impl Into<Ident>, count: usize, render_row: impl Fn(usize, &mut Window, &mut App) -> GridRow + 'static) -> Self
Options

Chain onto the value.

total(total: usize) -> Self
column(column: GridColumn) -> Self
columns(columns: impl IntoIterator<Item = GridColumn>) -> Self
group(group: ColumnGroup) -> Self
groups(groups: impl IntoIterator<Item = ColumnGroup>) -> Self
footer_cell(key: impl Into<SharedString>, value: impl Into<SharedString>) -> Self
lines(lines: GridLines) -> Self
sort(sort: Option<(SharedString, SortDirection)>) -> Self
sorted_by(key: impl Into<SharedString>, direction: SortDirection) -> Self
selection_mode(mode: SelectionMode) -> Self
selected(ids: impl IntoIterator<Item = impl Into<SharedString>>) -> Self
expanded(rows: impl IntoIterator<Item = Expanded>) -> Self
detail_rows(rows: usize) -> Self
detail(render: impl Fn(SharedString, &mut Window, &mut App) -> AnyElement + 'static) -> Self
editing(cell: Option<EditingCell>) -> Self
row_height(height: f32) -> Self
visible_rows(rows: usize) -> Self
scroll_to_cell(row: usize, column: impl Into<SharedString>) -> Self
loading(loading: bool) -> Self
failure(failure: impl Into<SharedString>) -> Self
empty(empty: EmptyState) -> Self
on_sort(handler: impl Fn(SharedString, SortDirection, &mut Window, &mut App) + 'static) -> Self
on_select(handler: impl Fn(&SelectionChange, &mut Window, &mut App) + 'static) -> Self
on_resize(handler: impl Fn(SharedString, f32, &mut Window, &mut App) + 'static) -> Self
on_fit(handler: impl Fn(SharedString, &mut Window, &mut App) + 'static) -> Self
on_reorder(handler: impl Fn(&DropIntent, &mut Window, &mut App) + 'static) -> Self
range(range: Option<CellRange>) -> Self
on_range_change(handler: impl Fn(&CellRange, &mut Window, &mut App) + 'static) -> Self
on_copy(handler: impl Fn(SharedString, &mut Window, &mut App) + 'static) -> Self
on_expand(handler: impl Fn(SharedString, bool, &mut Window, &mut App) + 'static) -> Self
on_edit_request(handler: impl Fn(SharedString, SharedString, &mut Window, &mut App) + 'static) -> Self
on_edit(handler: impl Fn(&EditIntent, &mut Window, &mut App) + 'static) -> Self
Example · data-grid
fn data_grid(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let detail_theme = theme.clone();
    stack(&theme)
        .w(px(760.0))
        .child(
            BulkBar::new("scene.data-grid.bulk", 2)
                .total(FIXTURE_JOBS_TOTAL)
                .action(
                    Button::new("scene.data-grid.bulk.retry")
                        .label("Retry")
                        .secondary()
                        .small()
                        .on_click(|_, _| {}),
                )
                .action(
                    Button::new("scene.data-grid.bulk.archive")
                        .label("Archive")
                        .secondary()
                        .small()
                        .on_click(|_, _| {}),
                )
                .on_select_all(|_, _| {})
                .on_dismiss(|_, _| {}),
        )
        .child(
            DataGrid::new(
                "scene.data-grid.jobs",
                FIXTURE_JOBS_LOADED,
                |index, _, _| grid_row(index),
            )
            .total(FIXTURE_JOBS_TOTAL)
            .columns(grid_columns())
            // Groups stay within one scrolling section, so each bracket has
            // one visual address while the Job section remains frozen.
            .group(ColumnGroup::new("identity", "Identity").columns(["name"]))
            .group(
                ColumnGroup::new("execution", "Execution").columns(["owner", "state", "duration"]),
            )
            .footer_cell("duration", "4.2s")
            .sorted_by("duration", SortDirection::Descending)
            .selection_mode(SelectionMode::Multiple)
            .selected(["job-0001", "job-0003"])
            .expanded([Expanded::new("job-0002", 2)])
            .detail_rows(2)
            .detail(move |id, _, _| grid_detail(&detail_theme, id))
            .visible_rows(9)
            .on_sort(|_, _, _, _| {})
            .on_select(|_, _, _| {})
            .on_resize(|_, _, _, _| {})
            .on_fit(|_, _, _| {})
            .on_reorder(|_, _, _| {})
            .on_expand(|_, _, _, _| {})
            .on_edit_request(|_, _, _, _| {})
            .on_edit(|_, _, _| {})
            .range(Some(CellRange::new(
                "job-0001", "name", "job-0003", "state",
            )))
            .on_range_change(|_, _, _| {})
            .on_copy(|_, _, _| {}),
        )
        .child(
            crate::foundation::text(
                &theme,
                TypeScale::Caption,
                SharedString::from(format!(
                    "{FIXTURE_JOBS_LOADED} of {FIXTURE_JOBS_TOTAL} loaded · scroll right for \
                     Duration · Job stays pinned"
                )),
            )
            .text_tone(&theme, TextTone::Muted),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/data/grid.rs