Skip to main content

Table

Display data in rows and columns.

Table uses header cells as the column header. The columns come in two variants––size S and size M.

note

This component implements a third-party solution. Please refer to its Notes in Storybook for more information.

View in StorybookExternal link icon
View examples in FigmaExternal link icon

Behavior​

Column header​

  • Sorting works as a toggle and linearly changes states from idle to ascending, descending, and then resets back to idle.

  • Cells inherit the height of the largest cell in the row.

  • Hovering over the info icon displays a Tooltip.

Cell​

  • When a cell's content is in an error or warning state, an indicator appears to its right. If the cell itself contains an interactive component, that component's state also updates to reflect the error or warning.

  • Hovering over a cell in the error or warning state triggers a tooltip with a state explanation.

  • En-dashes signify empty cells.

Usage​

  • Place the table inside a white card while using it on a page.

  • Usually, a table is used together with the Toolbar component.

Column Header​

  • Checkbox: Use it as a control and indicator for selectable rows in the table. Hovering over a corresponding row shows a checkbox to a user.

  • Empty: Use en-dashes as a placeholder for the column content that doesn't need explanation, such as indicators or actions.

  • Text alignment: Align labels according to the content alignment in the related cells.

Cell​

  • Text alignment: Align numbers to the right and other content to the left.

  • Content type: Cells contain different content types, including text, images, selection components, actions, and their mix.

  • Totals: The total sums up all values or the amount of content by rows or columns, depending on the content type.

Best practices​

  • Avoid placing tables on grey background.