Data Tables

Lay out rows and columns of structured information, such as a specification list or a plan comparison, with column headings visitors can sort by and an optional summary row at the foot. It is shown in the block inserter as Canvas Data Table and registered as canvas-core/data-table.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

• ColumnsDefaultEmpty

  The columns of the table, left to right. Add one row here for every value a table row will carry.

  Each row of Columns takes:

  • Column NameDefaultEmpty

    The heading at the top of this column.

  • AlignmentDefaultEmpty

    Where the values in this column sit within it. Ranging figures to the right lines up their digits.

    ChoicesDefault (empty)LeftCenterRight

  • SortableDefaultOn

    Lets a visitor reorder the table by this column. Turn it off for a column with nothing to sort by, such as one holding buttons.

  • Cell Content ClassDefaultEmpty

    When set, every body cell in this column wraps its value in a carrying these classes.

  • WidthDefaultEmpty

    How wide this column is. A plain number is read as pixels; add a unit, as in 150px or 20%, to size it by styling instead. Leave it empty to let the content decide.

• RowsDefaultEmpty

  The rows of the table, top to bottom. Each row carries one value per column.

  Each row of Rows takes:

  • Cell Values (one per line)DefaultEmpty

    One cell per line. Inline markup is allowed, so a cell can carry a value, a link or emphasis.

  • Row Highlight ClassDefaultEmpty

    A style class that picks this one row out from the rest, for a total line or a recommended option.

• Table CSS ClassesDefaulttable

  Style classes on the table itself. Add to the default for striped rows, borders or a tighter layout.

• Header RowDefaultTable header (thead)

  Sortable / searchable tables always use a table header, because the script reads its columns from it.

  ChoicesTable header (thead)First row of the table bodyNo header row

• Show FooterDefaultOff

  Repeats the column headings at the foot of the table, which helps on a long table where the top has scrolled away.

• Responsive WrapperDefaultOn

  Lets a wide table scroll sideways on a small screen rather than squeezing its columns or pushing the page out.

• Sortable / Searchable HooksDefaultOn

  Keeps the extra wrapper element and helper classes the DataTables script needs. Turn off for a plain static table.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Google Map.