Skip to main content

Table - Data cell

The table data cell is an individual cell that stores the tabular data.

BetaThis component is new in v2.

Code documentation

Web

Anatomy

The table data cell component is made up of one element.

Anatomy diagram numbering one element of a table data cell.
  1. Default slot

The table data cell component is part of a collection of related components that are used for composing tables. These include table, table row, and table header cell.

Variants

Horizontal alignment

The horizontal alignment can be set for the content slotted within the cell.

Left

Left alignment horizontally aligns the slotted contents to the left side of the cell.

Text is aligned to the left of a sample table cell.

Center

Center alignment horizontally aligns the slotted contents to the center of the cell.

Text is aligned to the center of a sample table cell.

Right alignment horizontally aligns the slotted contents to the right side of the cell.

Text is aligned to the right of a sample table cell.

Default slot

The default slot is used to insert the cell contents.

A rectangle marks the boundaries within a sample cell where content is placed.

Default styling is applied to basic text. However, complex data configurations and stylings can be inserted as needed.

A table cell contains sample custom content that consists of a bold title above a green tag inline with screened back supplementary text.

By default, text that is longer than the available space within the default slot will wrap to a new line. The cell vertically grows to accommodate the height of the slotted content.

Sample content wraps to multiple lines within the boundaries of a table cell.