This component should be used when your table has lots of columns and thus doesn't display well on smaller screens. On smaller screens, tables with lots of columns display with a horizontal scrollbar on the bottom. This can make the information on the table hard to see and read.
Start in the Body content tab.
Add the data table component
On the component type dropdown, choose Data table. Then click the Add another component button.
Set your options
When the data table component is added, you'll see you have a few 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.
The header settings are optional but for accessibility purposes all data tables should have a heading row set as well. Row-oriented tables should have the first row set as the header. Column-oriented tables should have the first column set as the header. You can also check both if your table has both.
Headers
You can show only first column as header, show only first row as header or both.
For accessibility reasons, all data tables should have a header applied.
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.
Use the Add row button to add one more row at a time. You also can add a single row by tabbing your cursor through the table till it reaches the end. If you hit the tab key again, an additional row will be added at the bottom of the table.
If you want to add or remove rows or columns, click 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.
Import from CSV
You can import table data as a CSV file. This is a type of file you can create in Excel that contains no formatting, just the plain data. (CSV means comma separated values.)
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=" ">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)
Some HTML code not allowed in our design system gets stripped out. If you need any other type of formatting in cells and you have been unable to get it to work, contact digital@dpc.vic.gov.au.
Example of the data table component in action
See below for an example of the data table component in use. This was created by uploading a CSV file, using HTML to embed links and input line breaks in the 'when' column.
To see how this was done, you can download a copy of the sample CSV table below.
Sample CSV data table with HTML edits
Reviewed 17 August 2022