Table
Skip to main content
Careers Contact us

Table

Component library

How to use this component

Use the Table component to display and organize data effectively. Select this component whenever you need to present tabular data clearly and accessibly.

Displays structured data in a grid format, with options for headers, sorting, and search functionality.

Table component

View video transcript for Table component.

Best practices

  • Enable the search field for larger tables to improve data navigation.
  • Follow heading conventions (H2-H6) within table cells.
  • Use multiple table components if needed for clarity.
  • Organize tables with either a top header row or a left column header for accessibility.
  • Do not use tables for layout purposes; use the Column Control component instead.
  • Avoid setting fixed column widths; tables should be responsive to the user's viewport.
  • Do not combine multiple tables into one component.
  • Do not place images into table cells.

Characteristics and options

Tables can be placed anywhere on the page, however ensure tables have a sufficient column width.

Tables have the following properties:

  • Title
  • ID (allows you to set an anchor link)
  • Title size: H2 (default)
  • Description
  • Search field
  • Font size: small (default) or large
  • Alignment Style: top (default) or left column header

Sample Table 1

This is an example table with a top header alignment style and active search field.
Header 1 Header 2 Header 3
Row 1- Column 1 Row 1- Column 2 Row 1- Column 3
Row 2- Column 1 Row 2- Column 2 Row 2- Column 3
Row 3- Column 1 Row 3- Column 2 Row 3- Column 3
Row 4- Column 1 Row 4- Column 2 Row 4- Column 3
Row 5- Column 1 Row 5- Column 2 Row 5- Column 3

Sample Table 2

This is an example table with a left column header and disabled search field.
Header 1 Row 1- Column 1 Row 1- Column 2 Row 1- Column 3
Header 2 Row 2- Column 1 Row 2- Column 2 Row 2- Column 3
Header 3 Row 3- Column 1 Row 3- Column 2 Row 3- Column 3

Accessibility guidelines

  • Ensure tables are organized with a clear header row or column.
  • Headers should describe the data they pertain to, improving screen reader navigation.
  • Avoid using tables for non-tabular data to prevent accessibility issues.
  • All tables should be simple tables. Complex tables are not accessible. 

Web Coordinator checklist

  • Ensure a header row or column is present and accurately describes the data.
  • Activate the search field for tables with more than three rows.
  • Avoid fixed column widths; ensure the table adjusts to different viewports.