# Tables and charts

> Add a table that sorts, searches and pages, or a line, area or bar chart, and give it your data by pasting rows from a spreadsheet.

Source: https://uxdeck.app/guide/tables-charts (checked against uxdeck on 30 October 2026)

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](/guide/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.