QTable

Pass columns and rows to display a dataset. Each column needs a unique name, a header label and a field that reads a row value. This fictional meteorite catalogue has twelve records: use the footer to change pages or the number of rows shown. Select a sortable heading once for ascending order, twice for descending order, and a third time to clear sorting.

Use format to change a displayed value while retaining its raw value for sorting. A function field can combine row properties. A custom sort receives strings and defines the ascending comparison; QTable reverses it for descending order. Try sorting Class, Mass and Storage below.

flat removes the table shadow, bordered adds an outline, and dense reduces cell padding and the minimum row height. Toggle each option on the same table to compare their effects.

Filtering and selection are application state. Pass filtered rows to QTable; use bodyCell for every default cell, or bodyCellSelect to override only the column named select. Cell snippets return a <td> and preserve its supplied style. This generic snippet reads string fields directly; custom snippets handle their own formatting and computed fields. Selections here remain checked when filtering or changing pages.

Choose a language to translate pagination, sorting labels and announcements. Column headings and specimen names remain your content. The language chooser is scoped to this example; see language setup for application configuration.