Skip to main content

Table - Header cell

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

BetaThis component is new in v2.

Code documentation

Web

Anatomy

The table header cell component is made up of two elements.

Anatomy diagram numbering two elements of a table header cell.
  1. Default slot
  2. Icon

The table header cell component is part of a collection of related components that are used for composing tables. These include table, table row, and table data 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 header 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 header 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 header cell.

Sortable

When enabled, a column as defined by a header cell can be sorted. Any number of columns within a table can be set as sortable.

Sample header text is positioned within the left edge of the cell. An icon with up and down arrows is positioned within the right edge of the cell.

Sorted

The sorted property sets the method by which a given column is sorted.

When a user clicks a sortable header, it cycles through a set order of options. By default, a column is set to none. Each click on the header progresses then to ascending, then descending, and then back to none. If the sorted property is set to something other than none, the cycle starts at that point.

None

None doesn’t apply any sorting method to the column. However, data can still be manually sorted before it is rendered into the table.

A column includes a table header cell and five table data cells. The header cell includes an icon with up and down arrows. The body cells include numbers 100 through 500 in multiples of one hundred arranged in random order.

Ascending

Ascending orders data rows from the smallest/lowest value at the top to the largest/highest value at the bottom.

A column includes a table header cell and five table data cells. The header cell includes an icon with an up arrow. The body cells include numbers 100 through 500 in multiples of one hundred arranged in increasing order with 100 at the top and 500 at the bottom.

Descending

Descending orders data rows from the largest/highest value at the top to the smallest/lowest value at the bottom.

A column includes a table header cell and five table data cells. The header cell includes an icon with a down arrow. The body cells include numbers 100 through 500 in multiples of one hundred arranged in decreasing order with 500 at the top and 100 at the bottom.

Default slot

The default slot is used to insert the cell contents. This only slots content into the main text area. The sort icon is not affected and is always present when enabled. Default styling is applied to basic text. However, complex data configurations and stylings can be inserted as needed.

Two separate header cells are displayed. The top cell includes only text. The bottom cell includes text along with a sort icon. A rectangle marks the slot boundaries within each cell. The boundary of the top cell slot is the full width of the cell. The boundary of the bottom cell slot extends from the left edge of the cell up to the sort icon.

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.

Two separate header cells are displayed. The top cell includes only text that spans the full width of the cell and wraps to a new line. The bottom cell includes text and a sort icon. The text spans from the left of the cell up to the sort icon then wraps to a new line.

Icon slots

There are three icon slots available to insert a custom icon for each of the sorting methods: none, ascending, and descending.

Three separate header cells are displayed representing each of the three sort options. A rectangle marks the boundary of the icon slot within each cell.

Behavior

Table header cells have five available states.

States

Enabled

An unsorted header cell is displayed in its enabled state.

Focus

Three separate header cells are displayed representing each of the three sort options. Each cell is shown in its focus state with a light gray background and blue outline.

Hover

Thee separate header cells are displayed representing each of the three sort options. Each cell is shown in its hover state with a light gray background.

Active

Three separate header cells are displayed representing each of the three sort options. Each cell is shown in its active state with a medium gray background.

Selected

Three separate header cells are displayed representing each of the three sort options. Each cell is shown in its selected state. The top unsorted cell is shown with a white background. The middle ascending and bottom descending cells are shown with a light blue background.