Components / Data display

Reorderable list

A list whose rows the user drags into a new order.

Functions: cui_reorder_begin, cui_reorder_end, cui_reorder_item

Usage

static int order[5] = { 0, 1, 2, 3, 4 };     /* your item indices, in display order */
cui_reorder_begin(ui, "tasks", order, 5);
for (int i = 0; i < 5; i++) {
    cui_reorder_item(ui, i) {
        cui_text(ui, tasks[order[i]].title, .nowrap = true, .width = CUI_FILL);
    }
}
if (cui_reorder_end(ui)) save_order(order);

Press a row and drag: it lifts with a shadow and follows the pointer while the other rows glide out of the way. Dropping rewrites order. Buttons inside rows keep working, since a drag only starts after the pointer moves a few points.

cui_reorder_end returns true on the frame a drop changes the order. order is your array of count item indices and must outlive the frame, which is why it is static above. The library only moves the numbers in it: your items stay where they are, and you read them through order[i]. cui_reorder_item takes the display position, not the item index. Rows are told apart by their item index, so each index must appear once. One list handles up to 256 rows.

Keyboard

None yet. Rows are dragged with the pointer; buttons inside rows keep their own keys.

Related

• Data grid and filter bar: A grid for very large data with sticky headers, resizable and sortable columns and editable cells, and a bar of filters to go with it.
• Timeline and progress ring: A vertical list of events in order, and a ring that fills with a percentage.
• Tree table and path bar: A tree with columns, as in a file explorer or a debugger's variables, and a path bar for moving up through folders.
• Accordion: Sections that fold open and closed under their headers.