Chart 15 of 15

Data table

Use it beside any chart as the 'Show as table' view, or on its own when people need exact figures. First column is left-aligned labels; the rest are right-aligned numbers; wide tables scroll sideways.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

A real <table> with a caption and column headers (scope='col'), so screen readers announce each cell with its row and column.

How to use it

JavaScript
container.append(
  dataTable(
    ['Month', 'Groceries', 'Housing', 'Total'],
    [
      ['Jul 26', '£431', '£1,210', '£2,214'],
      ['Aug 26', '£402', '£1,210', '£2,180']
    ],
    'Spending by month'
  )
);

Options

head
Array of header strings. The first column is the row label.
rows
Array of arrays of cells (strings or numbers; null becomes empty).
caption
Optional third argument: a visible caption that names the table.