The Table contains the following composable elements: Table, Table.Body, Table.Cell, Table.Footer, Table.Header, Table.HeaderCell, Table.Row, Table.SortableHeaderCell.

Props

Name
Type
Default
borderStyle
"sm" | "none"
"none"

Specify a border width for table: "sm" is 1px

children
React.Node
-
number | string
-

Use numbers for pixels: maxHeight={100} and strings for percentages: maxHeight="100%"

stickyColumns
number
-

Specify how many columns from the start of the Table should be sticky when scrolling horizontally. See the sticky column example for details.

Usage guidelines

When to Use
  • Displaying a set of structured data in a scannable way, that populates 2 or more rows.
  • Allowing users to compare information in rows and columns.
When Not to Use
  • There will never be enough data to populate at least 2 rows.
  • Displaying content that doesn’t follow a consistent pattern and can't be broken down into columns.
  • Providing robust data that doesn't fit in a tabular format. If there is a need to display a more complex data relationship, consider an info-graphic or a non-tabular format.

Example: Basic Table

Name
House
Birthday
Luna Lovegood
Ravenclaw
June 25, 1993
Draco Malfoy
Slytherin
December 3, 1992
Hermione Granger
Gryffindor
September 19, 1979
Neville Longbottom
Gryffindor
July 30, 1980

Table.Body Props

Name
Type
Default
children
React.Node
-

Table.Cell Props

Name
Type
Default
children
React.Node
-
colSpan
number
1
rowSpan
number
1

Table.Footer Props

Name
Type
Default
children
React.Node
-

Table.Header

Table.Header Props

Name
Type
Default
children
React.Node
-
boolean
false

If true, the table header will be sticky and the table body will be scrollable

Image
Name
House
Luna
Luna Lovegood
Ravenclaw
Draco
Draco Malfoy
Slytherin
Neville
Neville Longbottom
Gryffindor

Example: Sticky Column

Try scrolling horizontally to see the first column remain in place.

Image
Name
Super Name
Favorite Food
Best Friend
Birthday
Tony
Tony Stark
Iron Man
Shawarma
Spiderman
May 29, 1970
Peter
Peter Parker
Spiderman
Sandwiches
Iron Man
December 28, 1995
T'Challa
T'Challa
Black Panther
Beef suya
Shuri
November 28, 1977

Example: Multiple sticky columns

Try scrolling horizontally to see the first 3 columns remain in place.

Image
Name
Super Name
Best Friend
Favorite Food
Super Powers
Home
Aliases
Tony
Tony Stark
Iron Man
Spiderman
Shawarma
Flight, Super strength
New York
N/A
Peter
Peter Parker
Spiderman
Iron Man
Sandwiches
Spidey senses, super strength, web shooters
Brooklyn
Friendly Neighborhood Spiderman
Wanda
Wanda Maximoff
Scarlet Witch
Vision
Chicken paprikash
Chaos magic, spells, reality warping
Sokovia
N/A
Black Panther
T'Challa
Black Panther
Shuri
Beef suya
Enhanced strength, speed, reflexes + Vibranium suit
Wakanda
King of the Dead

Example: Sticky header and sticky columns

Try scrolling horizontally and vertically to see the columns and header remain in place.

Image
Name
Super Name
Best Friend
Favorite Food
Super Powers
Home
Aliases
Tony
Tony Stark
Iron Man
Spiderman
Shawarma
Flight, Super strength
New York
N/A
Peter
Peter Parker
Spiderman
Iron Man
Sandwiches
Spidey senses, super strength, web shooters
Brooklyn
Friendly Neighborhood Spiderman
Wanda
Wanda Maximoff
Scarlet Witch
Vision
Chicken paprikash
Chaos magic, spells, reality warping
Sokovia
N/A
Black Panther
T'Challa
Black Panther
Shuri
Beef suya
Enhanced strength, speed, reflexes + Vibranium suit
Wakanda
King of the Dead

Table.HeaderCell Props

Name
Type
Default
children
React.Node
-
colSpan
number
1
rowSpan
number
1
scope
"col" | "row" | "colgroup" | "rowgroup"
"col"

Table.Row Props

Name
Type
Default
children
React.Node
-

Table.RowExpandable

Expandable row that is able to hold content that will displayed depending on the clickable expand/collapse button icon.

Table.RowExpandable Props

Name
Type
Default
accessibilityCollapseLabel
Required
string
-

Supply a short, descriptive label for screen-readers as a text alternative to the Collapse button.

Accessibility: It populates aria-label on the <button> element for the Collapse button.

accessibilityExpandLabel
Required
string
-

Supply a short, descriptive label for screen-readers as a text alternative to the Expand button.

Accessibility: It populates aria-label on the <button> element for the Expand button.

expandedContents
Required
React.Node
-
id
Required
string
-
children
React.Node
-
hoverStyle
"none" | "gray"
"gray"
onExpand
({ event: SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> | SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement> expanded: boolean }) => void
-

Callback fired when the expand button component is clicked

Example: Table Row Expandable

Open/Close row
Name
House
Birthday
Luna Lovegood
Ravenclaw
June 25, 1993
Draco Malfoy
Slytherin
December 3, 1992
Neville Longbottom
Gryffindor
July 30, 1980

Example: Table Row Expandable with Sticky Columns

When specifying stickyColumns with expandable rows, include the column of arrows in your count. This example sets stickyColumns to 3.

Open/Close row
Name
Super Name
Best Friend
Favorite Food
Home
Alias
Super Powers
Tony Stark
Iron Man
Spiderman
Shawarma
New York City
N/A
Flight, Super strength
Wanda Maximoff
Scarlet Witch
Vision
Chicken paprikash
Sokovia
Wanda Frank
Chaos magic, spells, reality warping
T'Challa
Black Panther
Shuri
Beef suya
Wakana
King of the Dead
Enhanced strength, speed, reflexes + Vibranium suit

Table.SortableHeaderCell

Sortable header cells are clickable in an accessible way and have an icon to display whether the table is currently being sorted by that column.

Table.SortableHeaderCell Props

Name
Type
Default
Required
({ event: SyntheticMouseEvent<HTMLTableCellElement> | SyntheticKeyboardEvent<HTMLTableCellElement> }) => void
-
Required
"asc" | "desc"
-
Required
"active" | "inactive"
-
children
React.Node
-
colSpan
number
1
rowSpan
number
1
scope
"col" | "row" | "colgroup" | "rowgroup"
"col"

Example: Sortable header cells

Name
Id

Example: Sortable header cells with sticky columns

Name
Nickname
Favorite Food
Best Friend
Birthdate
Description
Favorite Color