Table

Table cell values

Populate a grid of cells with text using <lv_table-cell> children.

Each cell is declared with its row/column (zero-based) and a value string. Cells default to empty, so only the populated coordinates have visible text. row_count/column_count size the grid up front so the cells render in the right slots even if their declaration order doesn't walk row-major.

File browser built from a table

Build a file browser with a sidebar, path header and table.

A grey quick-access sidebar holds DEVICE/PLACES shortcuts; the white browser area shows the current path over an lv_table filled from a directory read with the lv_fs API (lv_fs_dir_open/lv_fs_dir_read/lv_fs_dir_close). Clicking a folder row opens the child directory, the ".." row walks back up, and the sidebar shortcuts jump straight to a path. Requires a file-system driver in lv_conf.h.

Table merge cells

Span a cell across two columns by setting the merge_right control flag.

The ctrl attribute on <lv_table-cell> takes one or more flags joined with |. merge_right extends the cell into the column immediately to its right, hiding that neighbour's content — the header row here merges column 0 into column 1 so the title spans both quarters. To span more than two columns, chain merge_right on each adjacent cell except the last. text_crop is a useful companion flag when a long value would overflow the merged cell.

Table rows and columns

Set the table dimensions explicitly so the grid is sized before cells are placed.

row_count and column_count give the table its shape. Cells without declared values still occupy a slot in the grid, so the visible empty rows in the example are part of the layout, not leftover space. Here a 10×2 grid is declared and only a handful of cells are populated — the gaps between them stay rendered as empty cells. Resizing the row/column counts grows or shrinks the grid; cells outside the new bounds simply don't render. When the row count is tall enough that the grid no longer fits the widget's height, the table becomes scrollable.

Table scrolling

A table whose content grid is taller than its explicit height becomes scrollable.

The table itself handles scrolling — when its height is smaller than the height needed to draw all rows, the rest are reachable by dragging. With height="LV_SIZE_CONTENT" (the default), the table grows to fit every row and the parent decides if it scrolls. Here we fix the height so the bottom rows are off-screen and the user has to scroll the table itself.

200-row list with custom switch cell

Scrollable 200-item table that draws a toggle switch per row and reports build cost.

lv_mem_monitor and lv_tick_get bracket the creation of a one-column, 200-row table to measure memory and time usage. Each row is filled with lv_table_set_cell_value_fmt. An LV_EVENT_DRAW_TASK_ADDED handler intercepts each LV_PART_ITEMS fill task and paints a pill track and knob whose position and color reflect the row's LV_TABLE_CELL_CTRL_CUSTOM_1 flag. An LV_EVENT_VALUE_CHANGED handler toggles that flag on the selected row. A bottom label reports the row count along with elapsed time and bytes used.

Table styling

Style the table background and the per-cell appearance.

Table has two relevant parts: MAIN (the background and overall frame) and ITEMS (each cell — borders, padding, text). Attaching a named style_items style covers every cell uniformly. To make the header row stand out, attach a second style with selector="items" and the row-specific state — but XML doesn't yet have a per-row selector; instead set the header row's cell ctrl flags or restyle in code.

Table column widths

Set per-column pixel widths through <lv_table-column> children.

By default every column gets the same width (the table's content area divided by column_count). A <lv_table-column> child overrides that for a single column: pick a column index and give it a width in pixels. Mixing default-width and explicit-width columns is fine — only the ones you address change.