Table

View source on GitHub

A table is a set of structured data that is easy for a user to scan, examine, and compare. Table data is displayed in a grid format and can be used to structure both interactive and static data.

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

Props

Component props
Name	Type	Default
`accessibilityLabel` Required	`string`	-
	Label for screen readers to announce Table.
`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.

Best practices

Style

Example of a 'do' for table style
Not all checkboxes are checked	Status	Campaign
	The best ad	Engagement
	This ad is great	Awareness
	Mary's pincycle	Catalogs
	Best Purchase Wins	Awareness
	The third campaign	Conversions

Use accessible Gestalt grays for table text, and reserve colors to sparingly accent important status and information. Avoid over-styling text.

Example of a Dont do for table style
Not all checkboxes are checked	Status	Campaign
	The best ad	Engagement
	This ad is great	Awareness
	Mary's pincycle	Catalogs
	BEST PURCHASE WINS	Awareness
	The third campaign	CONVERSIONS

Don't

Overuse color and styling for text in tables; it can make it hard to scan for important status updates and crucial information.

Alignment

Example of a 'do' for table alignment
Not all checkboxes are checked	Campaign	Spend
	The best ad	$5.50
	This ad is great	$3,000.00
	Mary's pincycle	$1.75
	Best Purchase Wins	$51,650,500.54
	The third campaign	$67.60

Align content so that it’s easy to scan, read and compare:

Start-align text and combo-content (combinations of text, numbers and/or graphics)
End-align numbers only
Align headers with their corresponding content
Use tabular lining for numbers

Example of a 'Dont' do for table alignment
Not all checkboxes are checked	Campaign	Spend
	The best ad 12/20/21	$5
	This ad is great 01/16/21	$3,000.00
	Mary's pincycle 07/15/22	$1.750
	Best Purchase Wins 06/15/22	$51,650,500.54
	The third campaign 06/24/22	$67.60

Don't

Align content so that it makes it harder to scan, read, and compare.

Center-align content
Use proportional figures for numbers as they don’t quite align
End-align text and combo-content (combinations of text, numbers and/or graphics)
Misalign headers with their corresponding content

Another example of a 'do' for table alignment
Status	Rate	Type
Active Ends 11/20/2021	100	CTR
Paused Ends 11/20/2021	5,000	Engagement
Warning Ends 11/20/2021	2	Conversions
Complete Ends 11/20/2021	50	CTR

Place unit type on a separate column so that amounts can still align and be compared.

Another Example of a 'Dont' do for table alignment
Status	Rate
Active Ends 11/20/2021	100 CTR
Paused Ends 11/20/2021	5,000 Engagement
Warning Ends 11/20/2021	2 Conversions
Complete Ends 11/20/2021	50 CTR

Don't

Mix text and graphics with numbers that need to be compared with each other.

Content

Example of a 'do' for table content
Name	Total
Video views for all Q3 campaigns and ad groups David Brown, Carlota Ojeda, Olamide Olufemi, Rajesh Uttambai	--
Video views for all Q2 campaigns and ad groups David Brown, Carlota Ojeda	5,000
Video views for all Q2 ad groups David Brown, Carlota Ojeda, Olamide Olufemi, Rajesh Uttambai	6,455,434

Make content digestible and scannable:

Keep headers clear and concise
Include an a visual indicator for cells that don’t have content.
Give enough space for content to account for localization.
Wrap important content to multiple lines
Truncate secondary information, especially if a user is going to get the full content upon click of a link in the table.

Example of a 'don't' do for table content
Name	Total amounts for 2021 through 2022
Video views for all Q3 campaigns and ad groups David Brown, Carlota Ojeda, Olamide Olufemi, Rajesh Uttambai
Video views for all Q2 campaigns and ad groups David Brown, Carlota Ojeda	5,000
Video views for all Q2 ad groups David Brown, Carlota Ojeda, Olamide Olufemi, Rajesh Uttambai	6,455,434

Don't

Add so much content that it’s hard for a user to read, examine and scan:

Don’t truncate content that a user needs to examine in relation to other content in the table.
Leave cells blank so that it isn’t clear if all data has loaded.

Another Example of a 'do' for table content
Name	Team	Role	Office Hours
Ayesha Teng	Gestalt	Engineer	Monday, Friday
Ryan Costa	Analytics	Designer	Wednesdays
Kate Steele	Monetization	Design Technologist	Tuesdays, Thursdays

Expand rows if the additional content is simple, doesn’t contain a lot of interaction and doesn’t take up more than 50% of the screen.

Another example of a 'don't' do for table content
Campaing	Status	Budget	Scope
December '21	Active	$100,000	Global
January '22	Draft	$50,000	Japan, Germany, Canada, Spain, Mexico, Thailand, Italy
February '22	Draft	$50,000	Japan, Germany, Canada

Don't

Use an expand to display dense, highly-interactive content. Use a new page or a Sheet for that.

Localization

Be sure to localize text and accessibilityLabel.

Note that localization can lengthen text by 20 to 30 percent; follow our guidelines on concise content and headings to account for localization.

Wrap important table content instead of truncating. Use truncation only for secondary content, and include a tooltip to show the full text on hover.

Accessibility

Labels

Use accessibilityLabel to properly announce the content of the table. For example, use "Campaign Status Information".

Don’t include the word “table” as part of the label to prevent redundancy: the VoiceOver already appends “table” to the label and the Category “Table” in the rotor already describes the nature of the component.

In terms of structure and content, HTML tables already provide accessible ways to navigate content via cells <td> and headers <th>.

The Tab key should only place the focus on interactive elements like sortable headers, expands and links. If a cell does not contain interactive content, tabbing should skip the cell. Enter, Space and Return activate buttons and other controls after focusing. Arrow keys can be used to scroll table content vertically and horizontally.

Other considerations

Internally, Gestalt Table implements visually-hidden captions through the accessibilityLabel prop. Therefore, if we want to add visual captions (at the top or bottom of the Table), we must prevent redundancy. Any top or bottom text that describes the Table should be removed from navigation using aria-hidden.

See the examples below for more details.

Your campaigns summary
Not all checkboxes are checked	Status	Campaign
	In progress Ends 11/20/2021	Engagement
	Paused Ends 11/20/2021	Awareness
	Warning Ends 11/20/2021	Catalogs
	Complete Ends 11/20/2021	Awareness

function Example() {
  const HeaderRow = ({ id }) => {
    return (
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>
            <Box display="visuallyHidden"><Label htmlFor={id}>Not all checkboxes are checked</Label></Box>
            <Checkbox
              id={id}
   onChange={() => {}}
              indeterminate
              size="sm"
            />
          </Table.HeaderCell>
          {["Status", "Campaign"].map((title, idx) => {
            return (
              <Table.HeaderCell key={idx}>
                <Text weight="bold">{title}</Text>
              </Table.HeaderCell>
            );
          })}
        </Table.Row>
      </Table.Header>
    );
  };

  const BaseRow = ({ id, checked, disabled, type, text, subtext, campaign }) => {
    return (
      <Table.Row>
        <Table.Cell>
          <Checkbox
            id={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")} onChange={() => {}}
            disabled={disabled}
            size="sm"
            checked={checked}
          />
        </Table.Cell>
        <Table.Cell>
          <Status type={type} title={text} subtext={subtext} />
        </Table.Cell>
        <Table.Cell>
          <Label htmlFor={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")}>
            <Text color={disabled ? "gray" : "darkGray"}>{campaign}</Text>
          </Label>
        </Table.Cell>
      </Table.Row>
    );
  };

  const tableID = "Example of correct accessibility with top caption";

  return (
    <Flex gap={2} direction="column">
      <Box aria-hidden>
        <Heading
          size="sm"
          accessibilityLevel="none"
        >
          Your Campaigns Summary
        </Heading>
      </Box>
      <Table accessibilityLabel="Your campaigns summary">
        <HeaderRow id={tableID}/>
        <Table.Body>
          <BaseRow
            id={tableID}
            checked={true}
            type="inProgress"
            text="In progress"
            subtext="Ends 11/20/2021"
            campaign="Engagement"
          />
          <BaseRow
            id={tableID}
            disabled
            type="halted"
            text="Paused"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
          <BaseRow
            id={tableID}
            checked={true}
            type="warning"
            text="Warning"
            subtext="Ends 11/20/2021"
            campaign="Catalogs"
          />
          <BaseRow
            id={tableID}
            checked={false}
            type="ok"
            text="Complete"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
        </Table.Body>
      </Table>
    </Flex>
  );
}

function Example() {
  const HeaderRow = ({ id }) => {
    return (
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>
            <Box display="visuallyHidden"><Label htmlFor={id}>Not all checkboxes are checked</Label></Box>
            <Checkbox
              id={id}
   onChange={() => {}}
              indeterminate
              size="sm"
            />
          </Table.HeaderCell>
          {["Status", "Campaign"].map((title, idx) => {
            return (
              <Table.HeaderCell key={idx}>
                <Text weight="bold">{title}</Text>
              </Table.HeaderCell>
            );
          })}
        </Table.Row>
      </Table.Header>
    );
  };
  const BaseRow = ({ id, checked, disabled, type, text, subtext, campaign }) => {
    return (
      <Table.Row>
        <Table.Cell>
          <Checkbox
            id={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")} onChange={() => {}}
            disabled={disabled}
            size="sm"
            checked={checked}
          />
        </Table.Cell>
        <Table.Cell>
          <Status type={type} title={text} subtext={subtext} />
        </Table.Cell>
        <Table.Cell>
          <Label htmlFor={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")}>
            <Text color={disabled ? "gray" : "darkGray"}>{campaign}</Text>
          </Label>
        </Table.Cell>
      </Table.Row>
    );
  };
  const tableID = "Example of correct accessibility with top caption";
  return (
    <Flex gap={2} direction="column">
      <Box aria-hidden>
        <Heading
          size="sm"
          accessibilityLevel="none"
        >
          Your Campaigns Summary
        </Heading>
      </Box>
      <Table accessibilityLabel="Your campaigns summary">
        <HeaderRow id={tableID}/>
        <Table.Body>
          <BaseRow
            id={tableID}
            checked={true}
            type="inProgress"
            text="In progress"
            subtext="Ends 11/20/2021"
            campaign="Engagement"
          />
          <BaseRow
            id={tableID}
            disabled
            type="halted"
            text="Paused"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
          <BaseRow
            id={tableID}
            checked={true}
            type="warning"
            text="Warning"
            subtext="Ends 11/20/2021"
            campaign="Catalogs"
          />
          <BaseRow
            id={tableID}
            checked={false}
            type="ok"
            text="Complete"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
        </Table.Body>
      </Table>
    </Flex>
  );
}

Top captions

Your campaigns summary
Not all checkboxes are checked	Status	Campaign
	In progress Ends 11/20/2021	Engagement
	Paused Ends 11/20/2021	Awareness
	Warning Ends 11/20/2021	Catalogs
	Complete Ends 11/20/2021	Awareness

function Example() {
  const HeaderRow = ({ id }) => {
    return (
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>
            <Box display="visuallyHidden"><Label htmlFor={id}>Not all checkboxes are checked</Label></Box>
            <Checkbox
              id={id}
   onChange={() => {}}
              indeterminate
              size="sm"
            />
          </Table.HeaderCell>
          {["Status", "Campaign"].map((title, idx) => {
            return (
              <Table.HeaderCell key={idx}>
                <Text weight="bold">{title}</Text>
              </Table.HeaderCell>
            );
          })}
        </Table.Row>
      </Table.Header>
    );
  };

  const BaseRow = ({ id, checked, disabled, type, text, subtext, campaign }) => {
    return (
      <Table.Row>
        <Table.Cell>
          <Checkbox
            id={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")} onChange={() => {}}
            disabled={disabled}
            size="sm"
            checked={checked}
          />
        </Table.Cell>
        <Table.Cell>
          <Status type={type} title={text} subtext={subtext} />
        </Table.Cell>
        <Table.Cell>
          <Label htmlFor={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")}>
            <Text color={disabled ? "gray" : "darkGray"}>{campaign}</Text>
          </Label>
        </Table.Cell>
      </Table.Row>
    );
  };

  const tableID = "Example of correct accessibility with bottom caption";

  return (
    <Flex gap={2} direction="column">
      <Table accessibilityLabel="Your campaigns summary">
        <HeaderRow id={tableID}/>
        <Table.Body>
          <BaseRow
            id={tableID}
            checked={true}
            type="inProgress"
            text="In progress"
            subtext="Ends 11/20/2021"
            campaign="Engagement"
          />
          <BaseRow
            id={tableID}
            disabled
            type="halted"
            text="Paused"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
          <BaseRow
            id={tableID}
            checked={true}
            type="warning"
            text="Warning"
            subtext="Ends 11/20/2021"
            campaign="Catalogs"
          />
          <BaseRow
            id={tableID}
            checked={false}
            type="ok"
            text="Complete"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
        </Table.Body>
      </Table>
      <Box aria-hidden>
        <Text align="center" size="sm">Your campaigns summary</Text>
      </Box>
    </Flex>
  );
}

function Example() {
  const HeaderRow = ({ id }) => {
    return (
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>
            <Box display="visuallyHidden"><Label htmlFor={id}>Not all checkboxes are checked</Label></Box>
            <Checkbox
              id={id}
   onChange={() => {}}
              indeterminate
              size="sm"
            />
          </Table.HeaderCell>
          {["Status", "Campaign"].map((title, idx) => {
            return (
              <Table.HeaderCell key={idx}>
                <Text weight="bold">{title}</Text>
              </Table.HeaderCell>
            );
          })}
        </Table.Row>
      </Table.Header>
    );
  };
  const BaseRow = ({ id, checked, disabled, type, text, subtext, campaign }) => {
    return (
      <Table.Row>
        <Table.Cell>
          <Checkbox
            id={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")} onChange={() => {}}
            disabled={disabled}
            size="sm"
            checked={checked}
          />
        </Table.Cell>
        <Table.Cell>
          <Status type={type} title={text} subtext={subtext} />
        </Table.Cell>
        <Table.Cell>
          <Label htmlFor={id.replace(/ /g, "_").replace(/'/g, "") + "_" + text.replace(/ /g, "_").replace(/'/g, "")}>
            <Text color={disabled ? "gray" : "darkGray"}>{campaign}</Text>
          </Label>
        </Table.Cell>
      </Table.Row>
    );
  };
  const tableID = "Example of correct accessibility with bottom caption";
  return (
    <Flex gap={2} direction="column">
      <Table accessibilityLabel="Your campaigns summary">
        <HeaderRow id={tableID}/>
        <Table.Body>
          <BaseRow
            id={tableID}
            checked={true}
            type="inProgress"
            text="In progress"
            subtext="Ends 11/20/2021"
            campaign="Engagement"
          />
          <BaseRow
            id={tableID}
            disabled
            type="halted"
            text="Paused"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
          <BaseRow
            id={tableID}
            checked={true}
            type="warning"
            text="Warning"
            subtext="Ends 11/20/2021"
            campaign="Catalogs"
          />
          <BaseRow
            id={tableID}
            checked={false}
            type="ok"
            text="Complete"
            subtext="Ends 11/20/2021"
            campaign="Awareness"
          />
        </Table.Body>
      </Table>
      <Box aria-hidden>
        <Text align="center" size="sm">Your campaigns summary</Text>
      </Box>
    </Flex>
  );
}

Bottom captions

Subcomponents

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

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 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

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"`

Variants

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>

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>

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>

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 Row Expandable

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

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 Example() {
      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 Example() {
      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>);
    }

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 Example() {
      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 Example() {
      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> );
    }

Sortable header cells

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.

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>
      );
    }

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

Table

Props

Usage guidelines

Best practices

Style

Alignment

Content

Localization

Accessibility

Labels

Keyboard navigation

Other considerations

Subcomponents

Table.Body Props

Table.Cell Props

Table.Footer Props

Table.Header Props

Table.HeaderCell Props

Table.Row Props

Table.RowExpandable Props

Table.SortableHeaderCell Props

Variants

Sticky header

Sticky Column

Multiple sticky columns

Sticky header and sticky columns

Table Row Expandable

Table Row Expandable with Sticky Columns

Sortable header cells

Sortable header cells with sticky columns