Table

View source on GitHub

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

Props

Component props
Name	Type	Default
`borderStyle`	`"sm" \| "none"`	`"none"`
	Specify a border width for table: "sm" is 1px
`children`	`React.Node`	-
`maxHeight`	`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

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 accessibilityLabel="Basic Table">
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>
        <Text weight="bold">Name</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">House</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">Birthday</Text>
      </Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>
        <Text>Luna Lovegood</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Ravenclaw</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>June 25, 1993</Text>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Text>Draco Malfoy</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Slytherin</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>December 3, 1992</Text>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Text>Hermione Granger</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Gryffindor</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>September 19, 1979</Text>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Text>Neville Longbottom</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Gryffindor</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>July 30, 1980</Text>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

<Table accessibilityLabel="Basic Table">
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>
        <Text weight="bold">Name</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">House</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">Birthday</Text>
      </Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>
        <Text>Luna Lovegood</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Ravenclaw</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>June 25, 1993</Text>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Text>Draco Malfoy</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Slytherin</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>December 3, 1992</Text>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Text>Hermione Granger</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Gryffindor</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>September 19, 1979</Text>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Text>Neville Longbottom</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>Gryffindor</Text>
      </Table.Cell>
      <Table.Cell>
        <Text>July 30, 1980</Text>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Table.Body Props

Table.Body subcomponent props
Name	Type	Default
`children`	`React.Node`	-

Table.Cell Props

Table.Cell subcomponent props
Name	Type	Default
`children`	`React.Node`	-
`colSpan`	`number`	`1`
`rowSpan`	`number`	`1`

Table.Footer Props

Table.Footer subcomponent props
Name	Type	Default
`children`	`React.Node`	-

Table.Header Props

Table.Header subcomponent props
Name	Type	Default
`children`	`React.Node`	-
`sticky`	`boolean`	`false`
	If true, the table header will be sticky and the table body will be scrollable

Example: Sticky header

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

<Table accessibilityLabel="Sticky header" maxHeight={200}>
  <Table.Header sticky>
    <Table.Row>
      <Table.HeaderCell>
        <Text weight="bold">Image</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">Name</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">House</Text>
      </Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>
        <Box width={50}>
          <Mask rounding="circle">
            <Image
              alt="Luna"
              src="https://i.ibb.co/QY9qR7h/luna.png"
              naturalHeight={50}
              naturalWidth={50}
            />
          </Mask>
        </Box>
      </Table.Cell>
      <Table.Cell><Text>Luna Lovegood</Text></Table.Cell>
      <Table.Cell><Text>Ravenclaw</Text></Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Box width={50}>
          <Mask rounding="circle">
            <Image
              alt="Draco"
              src="https://i.ibb.co/Hzcfxjt/draco.png"
              naturalHeight={50}
              naturalWidth={50}
            />
          </Mask>
        </Box>
      </Table.Cell>
      <Table.Cell><Text>Draco Malfoy</Text></Table.Cell>
      <Table.Cell><Text>Slytherin</Text></Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Box width={50}>
          <Mask rounding="circle">
            <Image
              alt="Neville"
              src="https://i.ibb.co/JvY9DKK/neville.png"
              naturalHeight={50}
              naturalWidth={50}
            />
          </Mask>
        </Box>
      </Table.Cell>
      <Table.Cell><Text>Neville Longbottom</Text></Table.Cell>
      <Table.Cell><Text>Gryffindor</Text></Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

<Table accessibilityLabel="Sticky header" maxHeight={200}>
  <Table.Header sticky>
    <Table.Row>
      <Table.HeaderCell>
        <Text weight="bold">Image</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">Name</Text>
      </Table.HeaderCell>
      <Table.HeaderCell>
        <Text weight="bold">House</Text>
      </Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>
        <Box width={50}>
          <Mask rounding="circle">
            <Image
              alt="Luna"
              src="https://i.ibb.co/QY9qR7h/luna.png"
              naturalHeight={50}
              naturalWidth={50}
            />
          </Mask>
        </Box>
      </Table.Cell>
      <Table.Cell><Text>Luna Lovegood</Text></Table.Cell>
      <Table.Cell><Text>Ravenclaw</Text></Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Box width={50}>
          <Mask rounding="circle">
            <Image
              alt="Draco"
              src="https://i.ibb.co/Hzcfxjt/draco.png"
              naturalHeight={50}
              naturalWidth={50}
            />
          </Mask>
        </Box>
      </Table.Cell>
      <Table.Cell><Text>Draco Malfoy</Text></Table.Cell>
      <Table.Cell><Text>Slytherin</Text></Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>
        <Box width={50}>
          <Mask rounding="circle">
            <Image
              alt="Neville"
              src="https://i.ibb.co/JvY9DKK/neville.png"
              naturalHeight={50}
              naturalWidth={50}
            />
          </Mask>
        </Box>
      </Table.Cell>
      <Table.Cell><Text>Neville Longbottom</Text></Table.Cell>
      <Table.Cell><Text>Gryffindor</Text></Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Example: Sticky Column

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

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

<Box width="50%" overflow="auto">
  <Table accessibilityLabel="Sticky Column" maxHeight={200} stickyColumns={1}>

    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Image</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Favorite Food</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Best Friend</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Birthday</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Tony"
                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Shawarma</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell>
          <Box width={200}><Text>May 29, 1970</Text></Box>
        </Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Peter"
                src="https://i.ibb.co/64NxM43/spiderman.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>December 28, 1995</Text></Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="T'Challa"
                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>T'Challa</Text></Table.Cell>
        <Table.Cell><Text>Black Panther</Text></Table.Cell>
        <Table.Cell><Text>Beef suya</Text></Table.Cell>
        <Table.Cell><Text>Shuri</Text></Table.Cell>
        <Table.Cell><Text>November 28, 1977</Text></Table.Cell>
      </Table.Row>

    </Table.Body>
  </Table>
</Box>

<Box width="50%" overflow="auto">
  <Table accessibilityLabel="Sticky Column" maxHeight={200} stickyColumns={1}>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Image</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Favorite Food</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Best Friend</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Birthday</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Tony"
                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Shawarma</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell>
          <Box width={200}><Text>May 29, 1970</Text></Box>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Peter"
                src="https://i.ibb.co/64NxM43/spiderman.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>December 28, 1995</Text></Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="T'Challa"
                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>T'Challa</Text></Table.Cell>
        <Table.Cell><Text>Black Panther</Text></Table.Cell>
        <Table.Cell><Text>Beef suya</Text></Table.Cell>
        <Table.Cell><Text>Shuri</Text></Table.Cell>
        <Table.Cell><Text>November 28, 1977</Text></Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
</Box>

Example: Multiple sticky columns

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

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

<Box width="60%" overflow="auto">
  <Table accessibilityLabel="Multiple sticky columns" maxHeight={200} stickyColumns={3} borderStyle="none">

    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Image</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Best Friend</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Favorite Food</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Powers</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Home</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Aliases</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Tony"
                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Shawarma</Text></Table.Cell>
        <Table.Cell><Text>Flight, Super strength</Text></Table.Cell>
        <Table.Cell><Text>New York</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Peter"
                src="https://i.ibb.co/64NxM43/spiderman.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
        <Table.Cell><Text>Spidey senses, super strength, web shooters</Text></Table.Cell>
        <Table.Cell><Text>Brooklyn</Text></Table.Cell>
        <Table.Cell><Text>Friendly Neighborhood Spiderman</Text></Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Wanda"
                src="https://i.ibb.co/hV6Vpbf/scarlet.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Wanda Maximoff</Text></Table.Cell>
        <Table.Cell><Text>Scarlet Witch</Text></Table.Cell>
        <Table.Cell><Text>Vision</Text></Table.Cell>
        <Table.Cell><Text>Chicken paprikash</Text></Table.Cell>
        <Table.Cell><Text>Chaos magic, spells, reality warping</Text></Table.Cell>
        <Table.Cell><Text>Sokovia</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Black Panther"
                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>T'Challa</Text></Table.Cell>
        <Table.Cell><Text>Black Panther</Text></Table.Cell>
        <Table.Cell><Text>Shuri</Text></Table.Cell>
        <Table.Cell><Text>Beef suya</Text></Table.Cell>
        <Table.Cell><Text>Enhanced strength, speed, reflexes + Vibranium suit</Text></Table.Cell>
        <Table.Cell><Text>Wakanda</Text></Table.Cell>
        <Table.Cell><Text>King of the Dead</Text></Table.Cell>
      </Table.Row>

    </Table.Body>
  </Table>
</Box>

<Box width="60%" overflow="auto">
  <Table accessibilityLabel="Multiple sticky columns" maxHeight={200} stickyColumns={3} borderStyle="none">
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Image</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Best Friend</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Favorite Food</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Powers</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Home</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Aliases</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Tony"
                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Shawarma</Text></Table.Cell>
        <Table.Cell><Text>Flight, Super strength</Text></Table.Cell>
        <Table.Cell><Text>New York</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Peter"
                src="https://i.ibb.co/64NxM43/spiderman.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
        <Table.Cell><Text>Spidey senses, super strength, web shooters</Text></Table.Cell>
        <Table.Cell><Text>Brooklyn</Text></Table.Cell>
        <Table.Cell><Text>Friendly Neighborhood Spiderman</Text></Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Wanda"
                src="https://i.ibb.co/hV6Vpbf/scarlet.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Wanda Maximoff</Text></Table.Cell>
        <Table.Cell><Text>Scarlet Witch</Text></Table.Cell>
        <Table.Cell><Text>Vision</Text></Table.Cell>
        <Table.Cell><Text>Chicken paprikash</Text></Table.Cell>
        <Table.Cell><Text>Chaos magic, spells, reality warping</Text></Table.Cell>
        <Table.Cell><Text>Sokovia</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Black Panther"
                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>T'Challa</Text></Table.Cell>
        <Table.Cell><Text>Black Panther</Text></Table.Cell>
        <Table.Cell><Text>Shuri</Text></Table.Cell>
        <Table.Cell><Text>Beef suya</Text></Table.Cell>
        <Table.Cell><Text>Enhanced strength, speed, reflexes + Vibranium suit</Text></Table.Cell>
        <Table.Cell><Text>Wakanda</Text></Table.Cell>
        <Table.Cell><Text>King of the Dead</Text></Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
</Box>

Example: Sticky header and sticky columns

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

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

<Box width="60%" overflow="auto">
  <Table accessibilityLabel="Sticky header and sticky columns" maxHeight={200} stickyColumns={3} borderStyle="none">

    <Table.Header sticky>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Image</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Best Friend</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Favorite Food</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Powers</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Home</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Aliases</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Tony"
                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Shawarma</Text></Table.Cell>
        <Table.Cell><Text>Flight, Super strength</Text></Table.Cell>
        <Table.Cell><Text>New York</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Peter"
                src="https://i.ibb.co/64NxM43/spiderman.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
        <Table.Cell><Text>Spidey senses, super strength, web shooters</Text></Table.Cell>
        <Table.Cell><Text>Brooklyn</Text></Table.Cell>
        <Table.Cell><Text>Friendly Neighborhood Spiderman</Text></Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Wanda"
                src="https://i.ibb.co/hV6Vpbf/scarlet.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Wanda Maximoff</Text></Table.Cell>
        <Table.Cell><Text>Scarlet Witch</Text></Table.Cell>
        <Table.Cell><Text>Vision</Text></Table.Cell>
        <Table.Cell><Text>Chicken paprikash</Text></Table.Cell>
        <Table.Cell><Text>Chaos magic, spells, reality warping</Text></Table.Cell>
        <Table.Cell><Text>Sokovia</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Black Panther"
                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>T'Challa</Text></Table.Cell>
        <Table.Cell><Text>Black Panther</Text></Table.Cell>
        <Table.Cell><Text>Shuri</Text></Table.Cell>
        <Table.Cell><Text>Beef suya</Text></Table.Cell>
        <Table.Cell><Text>Enhanced strength, speed, reflexes + Vibranium suit</Text></Table.Cell>
        <Table.Cell><Text>Wakanda</Text></Table.Cell>
        <Table.Cell><Text>King of the Dead</Text></Table.Cell>
      </Table.Row>

    </Table.Body>
  </Table>
</Box>

<Box width="60%" overflow="auto">
  <Table accessibilityLabel="Sticky header and sticky columns" maxHeight={200} stickyColumns={3} borderStyle="none">
    <Table.Header sticky>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Image</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Name</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Best Friend</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Favorite Food</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Super Powers</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Home</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Aliases</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Tony"
                src="https://i.ibb.co/r3R04Y9/ironman.jpg"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Tony Stark</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Shawarma</Text></Table.Cell>
        <Table.Cell><Text>Flight, Super strength</Text></Table.Cell>
        <Table.Cell><Text>New York</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Peter"
                src="https://i.ibb.co/64NxM43/spiderman.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Peter Parker</Text></Table.Cell>
        <Table.Cell><Text>Spiderman</Text></Table.Cell>
        <Table.Cell><Text>Iron Man</Text></Table.Cell>
        <Table.Cell><Text>Sandwiches</Text></Table.Cell>
        <Table.Cell><Text>Spidey senses, super strength, web shooters</Text></Table.Cell>
        <Table.Cell><Text>Brooklyn</Text></Table.Cell>
        <Table.Cell><Text>Friendly Neighborhood Spiderman</Text></Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Wanda"
                src="https://i.ibb.co/hV6Vpbf/scarlet.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>Wanda Maximoff</Text></Table.Cell>
        <Table.Cell><Text>Scarlet Witch</Text></Table.Cell>
        <Table.Cell><Text>Vision</Text></Table.Cell>
        <Table.Cell><Text>Chicken paprikash</Text></Table.Cell>
        <Table.Cell><Text>Chaos magic, spells, reality warping</Text></Table.Cell>
        <Table.Cell><Text>Sokovia</Text></Table.Cell>
        <Table.Cell><Text>N/A</Text></Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Box width={50}>
            <Mask rounding="circle">
              <Image
                alt="Black Panther"
                src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                naturalHeight={50}
                naturalWidth={50}
              />
            </Mask>
          </Box>
        </Table.Cell>
        <Table.Cell><Text>T'Challa</Text></Table.Cell>
        <Table.Cell><Text>Black Panther</Text></Table.Cell>
        <Table.Cell><Text>Shuri</Text></Table.Cell>
        <Table.Cell><Text>Beef suya</Text></Table.Cell>
        <Table.Cell><Text>Enhanced strength, speed, reflexes + Vibranium suit</Text></Table.Cell>
        <Table.Cell><Text>Wakanda</Text></Table.Cell>
        <Table.Cell><Text>King of the Dead</Text></Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
</Box>

Table.HeaderCell Props

Table.HeaderCell subcomponent props
Name	Type	Default
`children`	`React.Node`	-
`colSpan`	`number`	`1`
`rowSpan`	`number`	`1`
`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	`"col"`

Table.Row Props

Table.Row subcomponent 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

Table.RowExpandable subcomponent 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

Table Row Expandable
Name	House	Birthday
Luna Lovegood	Ravenclaw	June 25, 1993
Draco Malfoy	Slytherin	December 3, 1992
Neville Longbottom	Gryffindor	July 30, 1980

function RowExpandableExample() {
      const [textShown, setTextShown] = React.useState(false);
      const showTextOnExpand = () => {
        return <Text>Row expanded</Text>;
      };

      return(
        <Table accessibilityLabel="Table Row Expandable">

          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>
                <Box display="visuallyHidden">
                  <Text weight="bold">Open/Close row</Text>
                </Box>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Name</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">House</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Birthday</Text>
              </Table.HeaderCell>
            </Table.Row>
          </Table.Header>

          <Table.Body>

            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row1"
              onExpand={() => setTextShown(!textShown)}
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="luna avatar"
                        src="https://i.ibb.co/QY9qR7h/luna.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Luna's Info
                        </Box>
                      </Link>
                    </Text>
                    {textShown && showTextOnExpand()}
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>Luna Lovegood</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Ravenclaw</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>June 25, 1993</Text>
              </Table.Cell>
            </Table.RowExpandable>

            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row2"
              expandedContents={
                <Table maxWidth={800} maxHeight={500}>
                  <Table.Header sticky>
                    <Table.Row>
                      <Table.HeaderCell>
                        <Text weight="bold">Image</Text>
                      </Table.HeaderCell>
                      <Table.HeaderCell>
                        <Text weight="bold">Name</Text>
                      </Table.HeaderCell>
                      <Table.HeaderCell>
                        <Text weight="bold">House</Text>
                      </Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  <Table.Body>
                    <Table.Row colSpan={10}>
                      <Table.Cell>
                        <Box width={50}>
                          <Mask rounding="circle">
                            <Image
                              alt="Luna"
                              src="https://i.ibb.co/QY9qR7h/luna.png"
                              naturalHeight={50}
                              naturalWidth={50}
                            />
                          </Mask>
                        </Box>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Luna Lovegood</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Ravenclaw</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Box width={50}>
                          <Mask rounding="circle">
                            <Image
                              alt="Draco"
                              src="https://i.ibb.co/Hzcfxjt/draco.png"
                              naturalHeight={50}
                              naturalWidth={50}
                            />
                          </Mask>
                        </Box>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Draco Malfoy</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Slytherin</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Box width={50}>
                          <Mask rounding="circle">
                            <Image
                              alt="Neville"
                              src="https://i.ibb.co/JvY9DKK/neville.png"
                              naturalHeight={50}
                              naturalWidth={50}
                            />
                          </Mask>
                        </Box>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Neville Longbottom</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Gryffindor</Text>
                      </Table.Cell>
                    </Table.Row>
                  </Table.Body>
                </Table>
              }
            >
              <Table.Cell>
                <Text>Draco Malfoy</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Slytherin</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>December 3, 1992</Text>
              </Table.Cell>
            </Table.RowExpandable>

            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row3"
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="luna avatar"
                        src="https://i.ibb.co/JvY9DKK/neville.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Neville's Info
                        </Box>
                      </Link>
                    </Text>
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>Neville Longbottom</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Gryffindor</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>July 30, 1980</Text>
              </Table.Cell>
            </Table.RowExpandable>

          </Table.Body>
        </Table>);
    }

function RowExpandableExample() {
      const [textShown, setTextShown] = React.useState(false);
      const showTextOnExpand = () => {
        return <Text>Row expanded</Text>;
      };
      return(
        <Table accessibilityLabel="Table Row Expandable">
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>
                <Box display="visuallyHidden">
                  <Text weight="bold">Open/Close row</Text>
                </Box>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Name</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">House</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Birthday</Text>
              </Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row1"
              onExpand={() => setTextShown(!textShown)}
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="luna avatar"
                        src="https://i.ibb.co/QY9qR7h/luna.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Luna's Info
                        </Box>
                      </Link>
                    </Text>
                    {textShown && showTextOnExpand()}
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>Luna Lovegood</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Ravenclaw</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>June 25, 1993</Text>
              </Table.Cell>
            </Table.RowExpandable>
            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row2"
              expandedContents={
                <Table maxWidth={800} maxHeight={500}>
                  <Table.Header sticky>
                    <Table.Row>
                      <Table.HeaderCell>
                        <Text weight="bold">Image</Text>
                      </Table.HeaderCell>
                      <Table.HeaderCell>
                        <Text weight="bold">Name</Text>
                      </Table.HeaderCell>
                      <Table.HeaderCell>
                        <Text weight="bold">House</Text>
                      </Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  <Table.Body>
                    <Table.Row colSpan={10}>
                      <Table.Cell>
                        <Box width={50}>
                          <Mask rounding="circle">
                            <Image
                              alt="Luna"
                              src="https://i.ibb.co/QY9qR7h/luna.png"
                              naturalHeight={50}
                              naturalWidth={50}
                            />
                          </Mask>
                        </Box>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Luna Lovegood</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Ravenclaw</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Box width={50}>
                          <Mask rounding="circle">
                            <Image
                              alt="Draco"
                              src="https://i.ibb.co/Hzcfxjt/draco.png"
                              naturalHeight={50}
                              naturalWidth={50}
                            />
                          </Mask>
                        </Box>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Draco Malfoy</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Slytherin</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Box width={50}>
                          <Mask rounding="circle">
                            <Image
                              alt="Neville"
                              src="https://i.ibb.co/JvY9DKK/neville.png"
                              naturalHeight={50}
                              naturalWidth={50}
                            />
                          </Mask>
                        </Box>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Neville Longbottom</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Gryffindor</Text>
                      </Table.Cell>
                    </Table.Row>
                  </Table.Body>
                </Table>
              }
            >
              <Table.Cell>
                <Text>Draco Malfoy</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Slytherin</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>December 3, 1992</Text>
              </Table.Cell>
            </Table.RowExpandable>
            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row3"
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="luna avatar"
                        src="https://i.ibb.co/JvY9DKK/neville.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Neville's Info
                        </Box>
                      </Link>
                    </Text>
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>Neville Longbottom</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Gryffindor</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>July 30, 1980</Text>
              </Table.Cell>
            </Table.RowExpandable>
          </Table.Body>
        </Table>);
    }

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.

Table Row Expandable with Sticky Columns
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

function RowExpandableExample() {
      const [textShown, setTextShown] = React.useState(false);
      const showTextOnExpand = () => {
        return <Text>Row expanded</Text>;
      };

      return(
      <Box width="60%" overflow="auto">
        <Table accessibilityLabel="Table Row Expandable with Sticky Columns" stickyColumns={3}>

          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>
                <Box display="visuallyHidden">
                  <Text weight="bold">Open/Close row</Text>
                </Box>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Name</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Super Name</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Best Friend</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Favorite Food</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Home</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Alias</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Box width={200}>
                  <Text weight="bold">Super Powers</Text>
                </Box>
              </Table.HeaderCell>
            </Table.Row>
          </Table.Header>

          <Table.Body>

            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row1"
              onExpand={() => setTextShown(!textShown)}
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="tony avatar"
                        src="https://i.ibb.co/8948ym5/avenge.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Tony's Info
                        </Box>
                      </Link>
                    </Text>
                    {textShown && showTextOnExpand()}
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>Tony Stark</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Iron Man</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Spiderman</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Shawarma</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>New York City</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>N/A</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Flight, Super strength</Text>
              </Table.Cell>
            </Table.RowExpandable>

            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row2"
              expandedContents={
                <Table maxWidth={800} maxHeight={500}>
                  <Table.Header sticky>
                    <Table.Row>
                      <Table.HeaderCell>
                        <Text weight="bold">Name</Text>
                      </Table.HeaderCell>
                      <Table.HeaderCell>
                        <Text weight="bold">Relationship</Text>
                      </Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  <Table.Body>
                    <Table.Row colSpan={10}>
                      <Table.Cell>
                        <Text>Vision</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Husband</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Text>Wiccan</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Child</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Text>Speed</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Child</Text>
                      </Table.Cell>
                    </Table.Row>
                  </Table.Body>
                </Table>
              }
            >
              <Table.Cell>
                <Text>Wanda Maximoff</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Scarlet Witch</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Vision</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Chicken paprikash</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Sokovia</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Wanda Frank</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Chaos magic, spells, reality warping</Text>
              </Table.Cell>
            </Table.RowExpandable>

            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row3"
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="Black panther avatar"
                        src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Black Panther's Info
                        </Box>
                      </Link>
                    </Text>
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>T'Challa</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Black Panther</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Shuri</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Beef suya</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Wakana</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>King of the Dead</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Enhanced strength, speed, reflexes + Vibranium suit</Text>
              </Table.Cell>
            </Table.RowExpandable>

          </Table.Body>
        </Table>
      </Box> );
    }

function RowExpandableExample() {
      const [textShown, setTextShown] = React.useState(false);
      const showTextOnExpand = () => {
        return <Text>Row expanded</Text>;
      };
      return(
      <Box width="60%" overflow="auto">
        <Table accessibilityLabel="Table Row Expandable with Sticky Columns" stickyColumns={3}>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>
                <Box display="visuallyHidden">
                  <Text weight="bold">Open/Close row</Text>
                </Box>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Name</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Super Name</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Best Friend</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Favorite Food</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Home</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Text weight="bold">Alias</Text>
              </Table.HeaderCell>
              <Table.HeaderCell>
                <Box width={200}>
                  <Text weight="bold">Super Powers</Text>
                </Box>
              </Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row1"
              onExpand={() => setTextShown(!textShown)}
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="tony avatar"
                        src="https://i.ibb.co/8948ym5/avenge.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Tony's Info
                        </Box>
                      </Link>
                    </Text>
                    {textShown && showTextOnExpand()}
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>Tony Stark</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Iron Man</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Spiderman</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Shawarma</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>New York City</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>N/A</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Flight, Super strength</Text>
              </Table.Cell>
            </Table.RowExpandable>
            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row2"
              expandedContents={
                <Table maxWidth={800} maxHeight={500}>
                  <Table.Header sticky>
                    <Table.Row>
                      <Table.HeaderCell>
                        <Text weight="bold">Name</Text>
                      </Table.HeaderCell>
                      <Table.HeaderCell>
                        <Text weight="bold">Relationship</Text>
                      </Table.HeaderCell>
                    </Table.Row>
                  </Table.Header>
                  <Table.Body>
                    <Table.Row colSpan={10}>
                      <Table.Cell>
                        <Text>Vision</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Husband</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Text>Wiccan</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Child</Text>
                      </Table.Cell>
                    </Table.Row>
                    <Table.Row>
                      <Table.Cell>
                        <Text>Speed</Text>
                      </Table.Cell>
                      <Table.Cell>
                        <Text>Child</Text>
                      </Table.Cell>
                    </Table.Row>
                  </Table.Body>
                </Table>
              }
            >
              <Table.Cell>
                <Text>Wanda Maximoff</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Scarlet Witch</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Vision</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Chicken paprikash</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Sokovia</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Wanda Frank</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Chaos magic, spells, reality warping</Text>
              </Table.Cell>
            </Table.RowExpandable>
            <Table.RowExpandable
              accessibilityExpandLabel="Expand"
              accessibilityCollapseLabel="Collapse"
              id="row3"
              expandedContents={
                <Box maxWidth={236} padding={2} column={12}>
                  <Card
                    image={
                      <Avatar
                        name="Black panther avatar"
                        src="https://i.ibb.co/GpNtW5N/black-Panther.png"
                      />
                    }
                  >
                    <Text align="center" weight="bold">
                      <Link href="https://pinterest.com">
                        <Box paddingX={3} paddingY={2}>
                          Black Panther's Info
                        </Box>
                      </Link>
                    </Text>
                  </Card>
                </Box>
              }
            >
              <Table.Cell>
                <Text>T'Challa</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Black Panther</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Shuri</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Beef suya</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Wakana</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>King of the Dead</Text>
              </Table.Cell>
              <Table.Cell>
                <Text>Enhanced strength, speed, reflexes + Vibranium suit</Text>
              </Table.Cell>
            </Table.RowExpandable>
          </Table.Body>
        </Table>
      </Box> );
    }

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

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

Example: Sortable header cells

Sortable header cells
Name	Id

function SortableHeaderExample() {
      const [sortOrder, setSortOrder] = React.useState('desc');
      const [sortCol, setSortCol] = React.useState('name');

      const onSortChange = (col) => {
        if (sortCol !== col) {
          setSortCol(col);
          setSortOrder('desc');
        } else {
          setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
        }
      }

      return (
        <Table accessibilityLabel="Sortable header cells">
          <Table.Header>
            <Table.Row>
              <Table.SortableHeaderCell onSortChange={() => onSortChange('name')} sortOrder={sortOrder} status={sortCol === 'name' ? 'active' : 'inactive'}>
                <Text weight="bold">Name</Text>
              </Table.SortableHeaderCell>
              <Table.SortableHeaderCell onSortChange={() => onSortChange('id')} sortOrder={sortOrder} status={sortCol === 'id' ? 'active' : 'inactive'}>
                <Text weight="bold">Id</Text>
              </Table.SortableHeaderCell>
            </Table.Row>
          </Table.Header>
        </Table>
      );
    }

function SortableHeaderExample() {
      const [sortOrder, setSortOrder] = React.useState('desc');
      const [sortCol, setSortCol] = React.useState('name');
      const onSortChange = (col) => {
        if (sortCol !== col) {
          setSortCol(col);
          setSortOrder('desc');
        } else {
          setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
        }
      }
      return (
        <Table accessibilityLabel="Sortable header cells">
          <Table.Header>
            <Table.Row>
              <Table.SortableHeaderCell onSortChange={() => onSortChange('name')} sortOrder={sortOrder} status={sortCol === 'name' ? 'active' : 'inactive'}>
                <Text weight="bold">Name</Text>
              </Table.SortableHeaderCell>
              <Table.SortableHeaderCell onSortChange={() => onSortChange('id')} sortOrder={sortOrder} status={sortCol === 'id' ? 'active' : 'inactive'}>
                <Text weight="bold">Id</Text>
              </Table.SortableHeaderCell>
            </Table.Row>
          </Table.Header>
        </Table>
      );
    }

Example: Sortable header cells with sticky columns

Sortable header cells with sticky columns
Name	Nickname	Favorite Food	Best Friend	Birthdate	Description	Favorite Color

function SortableHeaderExample() {
      const [sortOrder, setSortOrder] = React.useState('desc');
      const [sortCol, setSortCol] = React.useState('name');

      const onSortChange = (col) => {
        if (sortCol !== col) {
          setSortCol(col);
          setSortOrder('desc');
        } else {
          setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
        }
      }

      return (
        <Box width="70%" overflow="auto">
          <Table accessibilityLabel="Sortable header cells with sticky columns" stickyColumns={2}>
            <Table.Header>
              <Table.Row>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('name')} sortOrder={sortOrder} status={sortCol === 'name' ? 'active' : 'inactive'}>
                  <Text weight="bold">Name</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('id')} sortOrder={sortOrder} status={sortCol === 'id' ? 'active' : 'inactive'}>
                  <Text weight="bold">Nickname</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('food')} sortOrder={sortOrder} status={sortCol === 'food' ? 'active' : 'inactive'}>
                  <Text weight="bold">Favorite Food</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('friend')} sortOrder={sortOrder} status={sortCol === 'friend' ? 'active' : 'inactive'}>
                  <Text weight="bold">Best Friend</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('birth')} sortOrder={sortOrder} status={sortCol === 'birth' ? 'active' : 'inactive'}>
                  <Text weight="bold">Birthdate</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('desc')} sortOrder={sortOrder} status={sortCol === 'desc' ? 'active' : 'inactive'}>
                  <Text weight="bold">Description</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('color')} sortOrder={sortOrder} status={sortCol === 'color' ? 'active' : 'inactive'}>
                  <Text weight="bold">Favorite Color</Text>
                </Table.SortableHeaderCell>
              </Table.Row>
            </Table.Header>

          </Table>
        </Box>
      );
    }

function SortableHeaderExample() {
      const [sortOrder, setSortOrder] = React.useState('desc');
      const [sortCol, setSortCol] = React.useState('name');
      const onSortChange = (col) => {
        if (sortCol !== col) {
          setSortCol(col);
          setSortOrder('desc');
        } else {
          setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
        }
      }
      return (
        <Box width="70%" overflow="auto">
          <Table accessibilityLabel="Sortable header cells with sticky columns" stickyColumns={2}>
            <Table.Header>
              <Table.Row>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('name')} sortOrder={sortOrder} status={sortCol === 'name' ? 'active' : 'inactive'}>
                  <Text weight="bold">Name</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('id')} sortOrder={sortOrder} status={sortCol === 'id' ? 'active' : 'inactive'}>
                  <Text weight="bold">Nickname</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('food')} sortOrder={sortOrder} status={sortCol === 'food' ? 'active' : 'inactive'}>
                  <Text weight="bold">Favorite Food</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('friend')} sortOrder={sortOrder} status={sortCol === 'friend' ? 'active' : 'inactive'}>
                  <Text weight="bold">Best Friend</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('birth')} sortOrder={sortOrder} status={sortCol === 'birth' ? 'active' : 'inactive'}>
                  <Text weight="bold">Birthdate</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('desc')} sortOrder={sortOrder} status={sortCol === 'desc' ? 'active' : 'inactive'}>
                  <Text weight="bold">Description</Text>
                </Table.SortableHeaderCell>
                <Table.SortableHeaderCell onSortChange={() => onSortChange('color')} sortOrder={sortOrder} status={sortCol === 'color' ? 'active' : 'inactive'}>
                  <Text weight="bold">Favorite Color</Text>
                </Table.SortableHeaderCell>
              </Table.Row>
            </Table.Header>
          </Table>
        </Box>
      );
    }

Edit page on GitHub