Tables and charts

A Table and a Chart are Blocks that show your data and work on your site: a table sorts when a visitor presses a header, a chart shows each value under the pointer. Both take their data the same way: type it, or paste rows copied from Google Sheets, Excel or Numbers.

They show the data you give them, not live data: a published site has no database behind it.

Add one

Open Blocks in the toolbar and choose Table, Chart or Bar chart in the Data group (see Add and style Blocks). Each arrives in your file’s colors and type, with sample data to replace.

Select it to see its section in the Design tab.

Give it your data

Press Edit data. A grid of its columns and rows opens:

• Type in any cell, or copy rows from a spreadsheet and paste them into a cell: they fill from there, and the grid grows to hold them.
• Paste into the first column name to replace everything, the first row of what you paste becoming the names.
• Add a row and Add a column at the bottom, or remove one with its ×.
• Press Apply: the canvas updates in one step, which Undo takes back. Closing with changes not applied asks first.

A table holds up to 200 rows and 12 columns. A chart holds up to 60 rows and 6 series: its first column is the labels along its axis, each other column a series of numbers. A value that is not a number is marked in the grid and left out of the chart.

Tables

Each column holds a kind of value, chosen in its row under Columns: Text, Number, Money, Percent, Date, Status, Person or Link. The kind decides:

• How it sorts. Money and numbers sort as numbers ($1,200 above $192), dates as dates.
• How its cells look. A status is a badge; a person has their initials beside their name; numbers are aligned right.

Beside each column, the arrows say whether its header sorts, and the phone says whether it shows on phones.

The rest of the section:

• Sorted by and Order: how it is sorted when the page opens.
• Rows a page (0 for all) and Counter: its words, with {from}, {to} and {total} filled in as visitors page and search.
• Search box: a box above the table that keeps only the rows that match.
• First column held in place on phones: on a narrow screen the table scrolls sideways inside itself and its first column stays put.
• Every other row tinted and Rows (Compact or Comfortable).
• Status colours: a color for each status the table holds (Positive, Negative, Warning, Info or Neutral), always readable against its badge.

Every part is a layer: restyle a header, a row or a cell like anything else on the canvas.

Charts

• Drawn as: Line, Area or Bars. Bars of several series can be stacked in one bar; a line can be smooth, with a dot on each point.
• Values from zero, Grid lines and a Legend when it shows several series.
• Numbers: Number (1,200), Compact (1.2k) or Percent (12%), with something before each number (a currency sign) or after it (a unit), and the Decimals shown.
• Headline: what its large value says of the first series: the Total, the Last value, the Average or the Highest.
• Axis labels: at most how many labels sit along its axis. On a narrow screen, labels that would overlap step aside.
• Draws in: Once as it comes into view, Each time, or Off.

The chart is redrawn from its data whenever it changes. A color you give a series’ line or bars stays through the redraw.

On your site

• A table is read as a table by screen readers, its sorted column announced. A chart shows a tooltip with each value under the pointer; a keyboard reaches it with Tab and reads each point aloud with the arrow keys, and screen readers get its data as a table.
• Preview works the same way, so you can try both before publishing.
• People who ask for less motion see the chart drawn at once.

Catches

• Sample data, not live data. Update a table or a chart in uxdeck and publish again.
• Choose each column’s kind. A money column left as Text sorts “$1,200” before “$192”.
• A chart’s colors are its layers’. Change a series’ color on the canvas; new series take colors from your file’s accent onward.