Skip to main content

Table

Tables display data in rows and columns to promote easier comparison and analysis.

BetaThis component is new in v2.

Code documentation

Web

Anatomy

The table component is made up of nine elements.

Anatomy diagram numbering nine elements of a table.
  1. Caption slot
  2. Toolbar slot
  3. Table head slot
  4. Default slot
  5. Table foot slot
  6. Pagination slot
  7. Table header cell
  8. Table data cell
  9. Table row

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

Variants

Vertical alignment

Vertical alignment determines how content is positioned within a cell. Alignment is applied to each cell within the table including header and footer cells.

Top

Setting the vertical alignment to the top vertically aligns the slotted contents to the top of the cell.

Text is aligned to the top of each cell in a sample table.

Middle

Setting the vertical alignment to the middle vertically aligns the slotted contents to the middle of the cell.

Text is aligned to the middle of each cell in a sample table.

Bottom

Setting the vertical alignment to the bottom vertically aligns the slotted contents to the bottom of the cell.

Text is aligned to the bottom of each cell in a sample table.

Striped

When enabled, table rows will alternate background colors. Striping begins on the second body row and alternates every other row. Striping is not applied to the rows within the head or foot.

Beginning with the second body row, alternating rows of a sample table are styled with a light gray background.

Rows with striping can still receive hover for wayfinding.

Striped rows are applied to the even body rows of the table. The first stripe is slightly darker than the other stripes signifying it has received a hover interaction.

Padding

Padding adjusts the table’s cell padding to allow more or less white space within the rows.

Small

Small padding reduces the amount of cell padding throughout the table to conserve space.

Cells of a sample table include a small amount of space between the cell's content and its boundaries.

Medium

Medium padding applies a moderate amount of cell padding to the table giving a bit more breathing room around cell data. This is the default setting.

Cells of a sample table include a medium amount of space between the cell's content and its boundaries.

The table’s header can be fixed in place allowing the head row to remain visible when vertically scrolling long tables.

A head row remains fixed in place overlapping part of the body rows.

The table’s footer can also be fixed in place to better accommodate vertically scrolling long tables.

A foot row remains fixed in place overlapping part of the body rows.

Scrollable

By default, tables auto-resize to fit within the parent container. At narrow widths (particularly mobile layouts), this may create aggressive wrapping of cell content.

A sample three-column table consists of a caption, head row, two body rows, and a foot row. The columns are equally sized within the boundaries of the table causing the text within each cell to wrap.

However, a table can be set to horizontally scroll when it is wider than its container. This allows data-rich or otherwise particularly wide tables to still be readable at smaller breakpoints.

A sample multi-column table consists of a caption, head row, five body rows, and a foot row. The table content overflows and is hidden beyond the right edge of the table's container. A scrollbar is displayed at the bottom of the table to signify the table's visible position within the container.

Caption slot

The caption slot is used to insert a brief descriptive summary of the table data. The slot can accept any combination of elements and content as well as custom styling to support complex layouts. By default, text that is longer than the available space within the caption slot will wrap to a new line.

A rectangle marks the boundaries above the table head where caption content is displayed.

Toolbar slot

The toolbar slot is used to insert additional table functionality such as searches and filters.

A rectangle marks the boundaries between the caption and table head where toolbar content is displayed. In this example, a search input, configuration button, and overflow button make up a sample toolbar.

Head slot

The head slot is used to insert table rows that comprise the head of the table.

A rectangle marks the boundaries between the caption and table body where the table header cells are displayed.

Default slot

The default slot is used to insert table rows that comprise the main data of the table.

A rectangle marks the boundaries between the table head and table foot where the table data cells are displayed.

Foot slot

The foot slot is used to insert table rows that comprise the foot of the table.

A rectangle marks the boundaries immediately below the table body where the table foot cells are displayed.

Pagination slot

The pagination slot is used to insert pagination controls for handling particularly long tables.

A rectangle marks the boundaries below the table foot row where pagination controls are displayed. In this example, a sample pagination component is horizontally centered within the slot.