Components / Data display

Table

Rows and columns of your data, with sortable headers, selectable rows and any component in a cell.

Functions: cui_table, cui_table_cell, cui_table_cell_textf, cui_table_row

Usage

cui_table_column cols[] = {
    { "Name", CUI_FILL, CUI_TEXT_LEFT, true },          /* title, width, align, sortable */
    { "Status", CUI_PX(120), CUI_TEXT_LEFT, false },
    { "Amount", CUI_PX(110), CUI_TEXT_RIGHT, true },
};
static cui_table_sort sort;
cui_table(ui, "orders", cols, 3, .sort = &sort, .selectable = true, .height = CUI_PX(400)) {
    for (int i = 0; i < n; i++) {
        if (cui_table_row(ui, selected == i)) selected = i;
        cui_table_cell(ui);
        cui_avatar(ui, rows[i].name, .size = 24);
        cui_text(ui, rows[i].name, .nowrap = true);
        cui_table_cell(ui);
        cui_badge(ui, rows[i].status, .tone = CUI_TONE_SUCCESS, .dot = true);
        cui_table_cell_textf(ui, "$%.2f", rows[i].amount);
    }
}

Cells hold any components. Clicking a sortable header updates sort (column and direction); you sort your data. With height the body scrolls under a fixed header. When the container is narrower than the fixed columns plus 96 points for each flexible one, the table scrolls sideways instead of squeezing cells.

Keyboard

• Tab reaches the headers of sortable columns, and Enter or Space sorts by the focused one. Rows are selected with the pointer; for arrow keys through rows use the data grid.

Options of cui_table

Option	Type	Default	Description
.sort	cui_table_sort *		optional, updated when a sortable header is clicked
.height	cui_size		scrolls when set
.striped	bool		Shades every other row.
.compact	bool		rows at least 36 points tall instead of 44
.selectable	bool		rows take keyboard focus and show the hand cursor (pass the chosen row's state to cui_table_row)

cui_table_column

Field	Type	Description
title	const char *	text of the column's header
width	cui_size	default fill
align	cui_text_align	One of CUI_TEXT_START, CUI_TEXT_CENTER, CUI_TEXT_RIGHT, CUI_TEXT_LEFT or CUI_TEXT_END.
sortable	bool	The column's header can be clicked to sort by it.

cui_text_align: CUI_TEXT_START, CUI_TEXT_CENTER, CUI_TEXT_RIGHT, CUI_TEXT_LEFT, CUI_TEXT_END

Related

• List and tree: List rows with an avatar or an icon, a title and a detail line, and a tree of items that fold.
• Accordion: Sections that fold open and closed under their headers.
• Timeline and progress ring: A vertical list of events in order, and a ring that fills with a percentage.
• Reorderable list: A list whose rows the user drags into a new order.