Table (table)
A table shows information in columns and rows.
đź”— External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| header | Header | Drupal expects an array of cells for the header. See template_preprocess_table in core > includes > theme.inc for more information. | |
| colgroups | Colgroups | Sticked to Drupal structure after preprocessing of the Drupal table element. | |
| rows | Rows | For the body of the table, Drupal expects an array of rows with each row keyed with the name 'cells', which is an array values for each cell. See template_preprocess_table in core > includes > theme.inc for more information. | |
| footer | Footer | Drupal expects an array of cells for the footer. See template_preprocess_table in core > includes > theme.inc for more information. | |
| empty | Empty | Render element used when there is no rows. | |
| caption | Caption | A caption functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. By default it is displayed at the bottom of the table. | |
| striped | Striped | A striped table can improve readability by visually grouping row content with alternating background colors. |
|
| borderless | Borderless | A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends. |
|
| scrollable | Scrollable | A scrollable table is ideal for dense data. |
|
| stacked | Responsive Stacked | A responsive stacked table collapses at narrow widths for better readability on small screens. |
|
| stacked_header | Responsive Stacked - Header | Stacks the table cells on narrow screens and visually promotes the first cell of every row into a “header” for that group. Preferred for directories and other lists where the first cell of every row is a name. If you use this variant, you must ensure there is a data-label attribute on each cell of the table that matches the column header. |
|
| sortable | Sortable | A sorted column changes the row ordering based on alphabetical or numeric cell values. Requires a caption. |
|
| compact | Compact | Reduces the row height and vertical spacing to display more table rows within a limited space. Should only be used with dense, numerical data, not text content. Pairs well with scrollable and striped variants, but is not suitable for use with stacked variants. |
|
| header_columns | Number of columns in the header | Used to display properly the empty message if the table is empty. Leave empty for automatic value. |
|
id: table
label: Table
description: 'A table shows information in columns and rows.'
group: Other
homepage: 'https://designsystem.digital.gov/components/table/'
slots:
header:
id: header
label: Header
description: 'Drupal expects an array of cells for the header. See template_preprocess_table in core > includes > theme.inc for more information.'
colgroups:
id: colgroups
label: Colgroups
description: 'Sticked to Drupal structure after preprocessing of the Drupal table element.'
rows:
id: rows
label: Rows
description: "For the body of the table, Drupal expects an array of rows with each row keyed with the name 'cells', which is an array values for each cell. See template_preprocess_table in core > includes > theme.inc for more information."
footer:
id: footer
label: Footer
description: 'Drupal expects an array of cells for the footer. See template_preprocess_table in core > includes > theme.inc for more information.'
empty:
id: empty
label: Empty
description: 'Render element used when there is no rows.'
caption:
id: caption
label: Caption
description: "A caption functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. By default it is displayed at the bottom of the table."
props:
striped:
id: striped
label: Striped
description: 'A striped table can improve readability by visually grouping row content with alternating background colors.'
schema:
type: boolean
borderless:
id: borderless
label: Borderless
description: 'A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends.'
schema:
type: boolean
scrollable:
id: scrollable
label: Scrollable
description: 'A scrollable table is ideal for dense data.'
schema:
type: boolean
stacked:
id: stacked
label: 'Responsive Stacked'
description: 'A responsive stacked table collapses at narrow widths for better readability on small screens.'
schema:
type: boolean
stacked_header:
id: stacked_header
label: 'Responsive Stacked - Header'
description: 'Stacks the table cells on narrow screens and visually promotes the first cell of every row into a “header” for that group. Preferred for directories and other lists where the first cell of every row is a name. If you use this variant, you must ensure there is a data-label attribute on each cell of the table that matches the column header.'
schema:
type: boolean
sortable:
id: sortable
label: Sortable
description: 'A sorted column changes the row ordering based on alphabetical or numeric cell values. Requires a caption.'
schema:
type: boolean
compact:
id: compact
label: Compact
description: 'Reduces the row height and vertical spacing to display more table rows within a limited space. Should only be used with dense, numerical data, not text content. Pairs well with scrollable and striped variants, but is not suitable for use with stacked variants.'
schema:
type: boolean
header_columns:
id: header_columns
label: 'Number of columns in the header'
description: 'Used to display properly the empty message if the table is empty. Leave empty for automatic value.'
schema:
type: number
examples:
preview:
id: preview
label: Preview
renderable:
'@component': table
header:
-
content: 'Table head A'
-
content: 'Table head B'
-
content: 'Table head C'
-
content: 'Table head D'
-
content: 'Table head E'
-
content: 'Table head F'
-
content: 'Table head G'
-
content: 'Table head H'
rows:
-
cells:
-
content: 'Cell A1'
-
content: 'Cell A2'
-
content: 'Cell A3'
-
content: 'Cell A4'
-
content: 'Cell A5'
-
content: 'Cell A6'
-
content: 'Cell A7'
-
content: 'Cell A8'
-
cells:
-
content: 'Cell B1'
-
content: 'Cell B2'
-
content: 'Cell B3'
-
content: 'Cell B4'
-
content: 'Cell B5'
-
content: 'Cell B6'
-
content: 'Cell B7'
-
content: 'Cell B8'
-
cells:
-
content: 'Cell C1'
-
content: 'Cell C2'
-
content: 'Cell C3'
-
content: 'Cell C4'
-
content: 'Cell C5'
-
content: 'Cell C6'
-
content: 'Cell C7'
-
content: 'Cell C8'
-
cells:
-
content: 'Cell D1'
-
content: 'Cell D2'
-
content: 'Cell D3'
-
content: 'Cell D4'
-
content: 'Cell D5'
-
content: 'Cell D6'
-
content: 'Cell D7'
-
content: 'Cell D8'
footer:
-
cells:
-
content: Footer
-
content: Footer
-
content: Footer
-
content: Footer
-
content: Footer
-
content: Footer
-
content: Footer
-
content: Footer
caption: 'Example table (caption)'
striped: true
scrollable: true
stacked: true
sortable: true
| Table head A | Table head B | Table head C | Table head D | Table head E | Table head F | Table head G | Table head H |
|---|---|---|---|---|---|---|---|
| Cell A1 | Cell A2 | Cell A3 | Cell A4 | Cell A5 | Cell A6 | Cell A7 | Cell A8 |
| Cell B1 | Cell B2 | Cell B3 | Cell B4 | Cell B5 | Cell B6 | Cell B7 | Cell B8 |
| Cell C1 | Cell C2 | Cell C3 | Cell C4 | Cell C5 | Cell C6 | Cell C7 | Cell C8 |
| Cell D1 | Cell D2 | Cell D3 | Cell D4 | Cell D5 | Cell D6 | Cell D7 | Cell D8 |
| Footer | Footer | Footer | Footer | Footer | Footer | Footer | Footer |