Data Tables and Charts

Data Table and Chart are in the element library under Dynamic data. Both read records through the same query as a Query Loop: an API or static data source, posts, terms or users.

Data Table#

• Columns: a header, a value (a template with the record’s fields, dynamic data and formats), and a type — text, number, date, image, link, badge or formatted — with alignment, width and whether it’s sortable.
• Search, sorting and paging for visitors, striped rows and a sticky header.
• On small screens, scroll the table sideways or stack each row as a card.
• A caption, and texts for when there are no records or the data can’t be loaded.

Sorting uses aria-sort and the table stays a real, accessible HTML table.

Chart#

• Types: column, bar, line, area, pie and doughnut.
• A label and up to six series, each a template over the record’s fields; stacked or side by side.
• Value labels, a legend, grid lines and number formats.
• Series colors start from your palette’s primary and accent colors.

Charts are drawn as plain SVG when the page is built — sharp at any size, with nothing to load — and each includes a hidden data table for screen readers.