Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Table

Table

Tables are used to organize and display data efficiently, allowing users to scan, sort, compare, and take action on them.

Preview

Figma
Table preview

Uses

The data table functions are ideal for organizing and displaying data in a user interface. Column headers can sort data in ascending or descending order, rows can be expanded to reveal information progressively, and individual or batch actions can be performed on the rows.

When to use

To organize and display data. If your user must navigate to a specific data among many data. If your user must navigate to a specific data among many data.

When not to use

When a more complex visualization of the data or interactions is required. When a more complex visualization of the data or interactions is required.

Behaviour

Types

Display of the default table
Default
Display of the multiselect type table
Multiselect
Display of the accordion type table
Accordion
Display of the table type radiobutton
Radiobutton
Display of the table with sections
With sections

Size

Display of the default table
Default
Display of the compact table
Compact

States

Display of the multiselect type table by default
Multiselect-Default
Display of the table type multiselect selection
Multiselect-Selection
Display of the accordion-type table by default
Accordion-Default
Display of the table type accordion selection
Accordion-Selection
Display of the radiobutton type table by default
Radiobutton-Default
Display of the table type radiobutton selection
Radiobutton- Selection

Responsive

In its mobile version, the behavior is as follows: only the first cell with the label and the content is shown, this cell is accompanied by the chevron to be able to deploy the rest of the content of the row. The rows may contain the data of one column or two depending on the configuration of the component.

Displaying table behavior on mobile-sized screens - Example 1
Mobile collapse - 1 data
Display of table behavior on mobile size screens - Example 2
Mobile expand - 1 data
Display of table behavior on mobile-sized screens - Example 3
Mobile collapse - 2 data
"Displaying table behavior on mobile-sized screens - Example 4
Mobile expand - 2 data

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The table is constructed with native labeling: table, thead, tbody, tr, th and td. The table headers should not be empty.
Funded by the European Union NextGenerationEU, opens in new tab Recovery Plan, Transformation and Resilience, opens in new tab Digital Spain, opens in new tab Support Accessibility Web Map Cookies Policy

This website uses its own and third-party cookies to offer a better service. If you continue browsing, we consider that you accept its use.