Usage

Use tables to structure data in rows and columns, so users can scan, sort and compare information.

When creating tables, present content in a simple and logical way for users to understand. For example, order by hierarchy or alphabetically.

Table types

There are four table variants:

  • Horizontal lined
  • Stripped
  • Bordered
  • Stripe and Bordered

Choose the table variant that best displays your data. All tables scroll horizontally on smaller breakpoints by default and columns widths can be adjusted to best space out the content for greater legibility.

When to avoid

Don’t use the tables to layout content on a page, instead use layouts or grids.

How this component works

Captions

Use a caption to describe the table's contents. The caption may be displayed at the top or bottom of the table.

Contents

To assist with readability of the table content:

  • left align with the exception of numerical data, to facilitate easy scanning
  • right align numerical data and apply mono-spacing for easier scanning and comparison
  • favour wrapping over truncating content. Multiple items starting with the same word may appear the same when truncated.

Default table

Table caption for responsive scroll version.
MethodDescriptionPurpose
Annotated prototypesPrototypes that include brief notes or comments that explain the rationale behind features and design choices.Help give context behind decisions and reminds team members why specific design elements were selected.
StoryboardsSequential images showing the main interactions or events that take place throughout a service.Help team members and stakeholders visualise the intended user experience.
Service blueprintA diagram that visualises a new process or service and how the organisation’s internal processes, people, systems and policies will support it.Helps organisations understand what will be needed for a successful implementation.
User storiesShort sentences written from the perspective of users, describing their need and the reason behind.Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context.

TEST TABLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac imperdiet dui, et congue purus. In hac habitasse platea dictumst. Aliquam hendrerit lectus et nulla lobortis sodales. Etiam varius eu nibh et suscipit. Integer eget arcu elit. Aliquam erat volutpat. Mauris urna velit, porta quis elit sit amet, finibus commodo ligula. Nunc a ex in est vehicula commodo. Morbi tristique ac nibh ut varius. Pellentesque sit amet dolor interdum, laoreet lacus at, sollicitudin ipsum. Maecenas consectetur nibh vel felis tincidunt, in sodales arcu ullamcorper. Nunc ut pretium felis. Fusce efficitur maximus enim sit amet porta. Cras tempor sodales felis, vel gravida mauris condimentum quis. Mauris ullamcorper tristique sem non mattis. In ligula nibh, fringilla in blandit id, ultricies id neque.

Table caption for responsive scroll version.
MethodDescriptionPurpose
Annotated prototypesPrototypes that include brief notes or comments that explain the rationale behind features and design choices.Help give context behind decisions and reminds team members why specific design elements were selected.
StoryboardsSequential images showing the main interactions or events that take place throughout a service.Help team members and stakeholders visualise the intended user experience.
Service blueprintA diagram that visualises a new process or service and how the organisation’s internal processes, people, systems and policies will support it.Helps organisations understand what will be needed for a successful implementation.
User storiesShort sentences written from the perspective of users, describing their need and the reason behind.Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac imperdiet dui, et congue purus. In hac habitasse platea dictumst. Aliquam hendrerit lectus et nulla lobortis sodales. Etiam varius eu nibh et suscipit. Integer eget arcu elit. Aliquam erat volutpat. Mauris urna velit, porta quis elit sit amet, finibus commodo ligula. Nunc a ex in est vehicula commodo. Morbi tristique ac nibh ut varius. Pellentesque sit amet dolor interdum, laoreet lacus at, sollicitudin ipsum. Maecenas consectetur nibh vel felis tincidunt, in sodales arcu ullamcorper. Nunc ut pretium felis. Fusce efficitur maximus enim sit amet porta. Cras tempor sodales felis, vel gravida mauris condimentum quis. Mauris ullamcorper tristique sem non mattis. In ligula nibh, fringilla in blandit id, ultricies id neque.

Striped table

Table caption for responsive scroll version.
Method Description Purpose
Annotated prototypes Prototypes that include brief notes or comments that explain the rationale behind features and design choices. Help give context behind decisions and reminds team members why specific design elements were selected.
Storyboards Sequential images showing the main interactions or events that take place throughout a service. Help team members and stakeholders visualize the intended user experience.
Service blueprint A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it. Helps organizations understand what will be needed for a successful implementation.
User stories Short sentences written from the perspective of users, describing their need and the reason behind. Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context.

Bordered

Table caption for responsive scroll version.
Method Description Purpose
Annotated prototypes Prototypes that include brief notes or comments that explain the rationale behind features and design choices. Help give context behind decisions and reminds team members why specific design elements were selected.
Storyboards Sequential images showing the main interactions or events that take place throughout a service. Help team members and stakeholders visualize the intended user experience.
Service blueprint A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it. Helps organizations understand what will be needed for a successful implementation.
User stories Short sentences written from the perspective of users, describing their need and the reason behind. Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context.

Striped and Bordered

Table caption for responsive scroll version.
Method Description Purpose
Annotated prototypes Prototypes that include brief notes or comments that explain the rationale behind features and design choices. Help give context behind decisions and reminds team members why specific design elements were selected.
Storyboards Sequential images showing the main interactions or events that take place throughout a service. Help team members and stakeholders visualize the intended user experience.
Service blueprint A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it. Helps organizations understand what will be needed for a successful implementation.
User stories Short sentences written from the perspective of users, describing their need and the reason behind. Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context.

Advanced Table component

The Advanced Table component allows for a CSV of data to be uploaded and automatically be displayed as a table. The table will only display the first 3 columns from the dataset to ensure the table can be viewed on all devices, and a link will be available to view all information for each row.

The table will have the following options enabled by default:

  • Text search (to filter table rows)
  • Sorting (A-Z and Z-A)
  • Pagination
  • Dropdown filters - can be set to display 2 columns from the dataset
  • Information icon - can be clicked to view a popup modal with all data from the dataset for that row
Website Name Website URL Size Details
Review Management System https://www.soerms.epa.nsw.gov.au/ Small
State of Environment https://soe.epa.nsw.gov.au Small
Citizen Science Hub https://citizen-science.seed.nsw.gov.au Small
Don't Be A Tosser https://www.dontbeatosser.epa.nsw.gov.au/ Medium
Asbestos NSW https://asbestos.nsw.gov.au Small
Aboriginal Housing Office https://aho.nsw.gov.au Small
Climate Data https://climatedata.environment.nsw.gov.au Small
SEED https://seed.nsw.gov.au Small
EnergyCo https://energyco.nsw.gov.au Small
AdaptNSW https://climatechange.environment.nsw.gov.au Medium
Planning Portal https://planningportal.nsw.gov.au Large
EnergySaver https://energysaver.nsw.gov.au Medium
GreenPower https://greenpower.gov.au Small
Biodiversity Conversation Trust https://bct.nsw.gov.au Small
Energy & Climate https://energy.nsw.gov.au Small
Energy NSW https://energy.nsw.gov.au Small
Everyone Can Play https://everyonecanplay.nsw.gov.au Small
Hunter Central Coast Development Corporation https://hccdc.nsw.gov.au Medium
Love Food Hate Waste https://lovefoodhatewaste.nsw.gov.au Small
Botanic Gardens https://botanicgardens.org.au Large
Koala Country https://koala.nsw.gov.au Small
Crown Land https://crownland.nsw.gov.au Small
Lord Howe Island Board https://lhib.nsw.gov.au Small
CCNSW https://cemeteries.nsw.gov.au Small
Planning https://planning.nsw.gov.au Medium
Sydney Olympic Park https://sydneyolympicpark.com.au Large
Major Projects https://majorprojects.planning.nsw.gov.au Large
Cladding Registration https://cladding.nsw.gov.au Small