# Table (/examples/widgets/table)



Table cell values [#table-cell-values]

<LvglExampleBrief>
  Populate a grid of cells with text using 

  `<lv_table-cell>`

   children.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_table_cells" path="widgets/table/lv_example_table_cells" />

File browser built from a table [#file-browser-built-from-a-table]

<LvglExampleBrief>
  Build a file browser with a sidebar, path header and table.
</LvglExampleBrief>

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`.

<LvglExample name="lv_example_table_file_browser" path="widgets/table/lv_example_table_file_browser" />

Table merge cells [#table-merge-cells]

<LvglExampleBrief>
  Span a cell across two columns by setting the 

  `merge_right`

   control flag.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_table_merge_cells" path="widgets/table/lv_example_table_merge_cells" />

Table rows and columns [#table-rows-and-columns]

<LvglExampleBrief>
  Set the table dimensions explicitly so the grid is sized before cells are placed.
</LvglExampleBrief>

`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.

<LvglExample name="lv_example_table_rows_columns" path="widgets/table/lv_example_table_rows_columns" />

Table scrolling [#table-scrolling]

<LvglExampleBrief>
  A table whose content grid is taller than its explicit height becomes scrollable.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_table_scroll" path="widgets/table/lv_example_table_scroll" />

200-row list with custom switch cell [#200-row-list-with-custom-switch-cell]

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

`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.

<LvglExample name="lv_example_table_scrollable_list" path="widgets/table/lv_example_table_scrollable_list" />

Table styling [#table-styling]

<LvglExampleBrief>
  Style the table background and the per-cell appearance.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_table_styling" path="widgets/table/lv_example_table_styling" />

Table column widths [#table-column-widths]

<LvglExampleBrief>
  Set per-column pixel widths through 

  `<lv_table-column>`

   children.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_table_width" path="widgets/table/lv_example_table_width" />