The tables application block displays data from a dataset in a table format on the landing page template. It includes a Search Box and Filters which allow users to quickly find the data that they require.
On this page
- Guidelines
- Create a dataset
- Adding the Tables Application block on a page
- Live examples on nsw.gov.au
Did you mean the Tables block (content source)?
The tables block (content source) shows data using existing content in the Content Management System (CMS) on a table. You can find information on this on Adding a Tables block (content Source) on a page.
Guidelines
Do
- Use the table application block to display data from an uploaded dataset.
- Use the tables application block on a landing page.
- Use full width or edge to edge section to display the table.
- Upload the dataset that will be displayed in the table in CSV format.
- Carefully configure sorting logic at each level to get the best result for edge cases.
Don’t
- Do not use the tables application block on a standard page.
- Do not add more than one tables application block on a landing page.
- Do not include data in the CSV that won’t be rendered on the front end.
Create a dataset
Before you can add a Tables Application block to a page you will need to have a dataset uploaded to the CMS. Follow the below to create the dataset:
- Create the dataset in CSV UTF-8 format. Don’t use simple CSV format or it will break any special characters like Ruvé or Môr.
- Column labels in the dataset should be in lowercase letters with _ for space.
Using entity columns for file and link fields
If your table includes files or links stored in the CMS (for example, PDFs, Word documents, Excel files or other files in the Media Library), you can reference them using entity columns in your dataset.
- Create a dataset column for each file or link you want to display (for example, certificate_map or management_obligations).
- Each cell value must contain one or more entity references using the format:
type: id
Examples:
media: 123456
media: 161835; media: 160038
- Multiple entity references can be included in a single cell by separating them with a semicolon (;) without spaces.
- Use a single entity reference per cell where possible for simpler configuration and readability.
- If files need to be clearly separated (for example, different document types), consider using multiple dataset columns instead of combining them in one cell.
Upload your CSV dataset file (data pipeline) in the CMS
The dataset can only be uploaded in the content management system (CMS) by a content administrator. If you do not have this access, submit a ticket via the 'Content changes, website updates and support from a Content Administrator' form. Choose Request type: I need support from a Content Administrator.
Adding the Tables Application block on a page
- Edit the layout of a landing page template.
- Add a section selecting Full or Edge to Edge.
- Add block.
- Select DCS Tables Application Block.
- Enter a Title.
- Search for the dataset you would like to display in the App dataset field.
- Under the Auto-suggest search box select Yes or No to determine if the search block is hidden.
- If the Auto-suggest search box is not hidden, enter a Search block heading, a Search block description, and select Searchable fields from the list.
- Under Search results, choose yes or no under ‘Do you want to show results on page load’. If the dataset is very long, selecting ‘No’ is recommended.
- Under Select result fields, select the fields you wish to display in the results.
- If your dataset includes file or link entity columns, enter the column names in the Drupal entity columns field so the table can render them correctly on the front end.
- Under result field tables, enter the labels you would like to apply to the fields returned in results, separated by commas.
- Under Select result, enter the columns you want to sort by. You can also enter whether the sort order should be ascending or descending.
- Enter a Get Started message. The message will be displayed on the page when a user hasn’t chosen any filters.
- Enter a no results found message that will display when a search has no results.
- Under Collapsed column settings, choose ‘Yes ’if you want some dataset columns to be rendered under a chevron in the results section on the front end. For mobile view, all columns except first two columns will always be rendered under the chevron for better UX on small screen size. For desktop view, in the case of ‘Yes’, select the dataset fields that will appear under the chevron. Add labels for each of the columns that will display under the chevron.
Columns that contain file or link entity references will also render correctly within both visible and collapsed sections. - Under Search filters and Pagination, choose ‘no’ if you want to show a number of results display filter on the front end, then choose a default number of results for the display filter.
- Under Search filters and Pagination, choose ‘yes’ if you want to hide the search ‘Filter by’ on the front end.
- If ‘No’ has been selected, add a label for the search filter and select the dataset column that will be used for filtering the results
- Select the filter type. Choose ‘Grid’ if you would like an A-Z grid. Choose custom options if you want to customise the filter with dropdowns.
Live examples on nsw.gov.au
Check out Tables Application Block to see how this works on a live page, or Timetable of actions to see how an agency used this.
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.