Skip to main content

Table - Row

The table row defines a row of cells in a table.

BetaThis component is new in v2.

Code documentation

Web

Anatomy

The table row component is made up of one element.

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

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

Variants

Default slot

The default slot is used to insert table data cells into the row. The slot accommodates any number of cell components.

A rectangle marks the boundary where table cells are placed within the row.

By default, cells equally grow to fill their row container. The cell widths can be overridden to have fixed or other relative widths as needed.

Two separate sample table rows are displayed. The wider first row shows the cell content at a relatively comfortable reading length and only wrapping to a few lines. The second row is narrower than the first causing the cell content to wrap after only a couple of words and on to at least four lines.

Behavior

States

Table rows have two available states:

The table row includes enabled and hover states.
  1. Enabled
  2. Hover