C41 Table

The Table component allows users to display structured data in a clear and organized grid format. It can be used to present various types of information, and supports customization for different column layouts, making it ideal for showcasing comparative data or detailed listings.

 

Component requirements

Table wrapper

Required:

• Table wrapper element is required; no other variables are needed.

Optional:

• Headline: Text field.

• Support Copy: Rich text field.

• Headline tag: Dropdown. H2/H3/H4/P. Default: P.

• Content alignment: Left/center. Default: center.

• Table styling: Dropdown. Custom/Standard. When Custom is selected, the top row is styled with a different color. Default: standard.

• Pin first column: Checkbox. Default: unchecked.

• Cell alignment: Left/center/right. Default: center.

Table item

Required:

• Header Row: Required top row containing column headers that describe the data.
  • Table Cell: Individual header cell containing descriptive text for the column.
• Data Row: Contains the actual data entries for each column.
  • Table Cell: Individual cell containing the data corresponding to the column header./li>

Additional notes

• All tables use horizontal scroll markup. No responsive tables or other variations are allowed.

 

ADA requirements

• Use header cells for all row and/or column headers.
• Ensure table content remains readable with horizontal scroll and on smaller screens.

 

Component examples

Example #1: Standard table example with heading and support copy enabled. All cell content is left aligned.

 

Example #2: Custom table example. Heading enabled. Support copy disabled. All cell content is center aligned. First cell in data row has an icon enabled.