Data table component

How to add the data table component to a content page.

To view the design of the data table component, visit the Ripple design system.

This component should be used if you have one or both of these situations:

Your table has lots of columns and won’t display well on smaller screens using the table option in the Basic text component.
- Tables with lots of columns will display with a horizontal scrollbar.
You have a spreadsheet of your table data that you’d like to upload rather than manually recreate in the CMS.

There is a maximum limit of 3,000 cells allowed for this table.

This applies to the entire page, so creating separate tables on the same page will still be restricted by this limit.

Add the data table component

While editing your page click Add Component, then select the Data table option.

Component list in the CMS.

Set your options

When the data table component is added, you'll see you have a few options.

Data table component options.

Table orientation on mobile: Column oriented or row oriented

Table orientation refers to the way the table is constructed and intended to be read. Most tables are row oriented and this setting is the default.

Headers

For accessibility reasons, all data tables should have a table header applied.

You can choose between:

using the first column as the table header
using the first row as the table header
using both.

If you’re unsure, row-oriented tables should have the first row set as the header, and column-oriented tables should have the first column set as the header.

Add your data

The Data table content section is where you can manually type or cut and paste in each cell's content.

When you first add the Data table component, it will have 2 rows and 2 columns.

You can use the Add row button to add a single row at a time or, if you’d like to add multiple new rows and columns to the table, click on the accordion called Change number of rows/columns. You can use the up and down arrows or just put your cursor in one of the fields and type to update these numbers. Click Rebuild table to apply your changes. If you have added any text into the cells already, this text will remain after rebuilding.

Import from CSV

You can import your table data as a CSV (comma separated values) file. This is a type of file you can create in Excel that contains no formatting, just the plain data.

To create a CSV file, you can copy an existing table on the web or in Word, paste it into Excel and then save as .csv.

If you try to upload a file that is not in CSV format, you'll get an error message.

Using HTML to format content in cells

If you need to apply formatting to content in data tables, the only way to do it is using HTML code in cells. You can do this directly in the table cells or in cells in a CSV file.

For example:

to apply bold to content in a cell, your field will look like this: <strong>your words</strong>
to include a hyperlink in a cell, it will look like this: <a href="https://www.vic.gov.au ">your link text</a>
to set alignment for a cell, it will look like this: <p align="right">Your content</p> (note you use US spelling for 'center' in HTML)

If there is HTML code that isn’t allowed by the Ripple design system it will get stripped out when viewing your page. If you need any other type of formatting in cells and have been unable to get it to work, contact the SDP content team by emailing digital@dpc.vic.gov.au.