Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Table

You can create tables using a combination of:

  • Table: The main table wrapper.
  • TableHead: Used to create column labels for your table.
  • TableRow: Signifies a row of cells in your table.
  • TableCell: A cell of table content.
  • TableBody: The main body of your table.
  • ExpandingRow: A row that can be clicked to reveal additional information.

Basic usage

Setting a minWidth will result in a responsive table that scrolls once smaller than that width.

NameAgeHeightSexLocation
Ben McMahen30180MaleBC
James Bond53185MaleEngland
<Table minWidth="600px">
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell align="right">Age</TableCell>
      <TableCell align="right">Height</TableCell>
      <TableCell align="right">Sex</TableCell>
      <TableCell align="right">Location</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell component="th" scope="row">
        Ben McMahen
      </TableCell>
      <TableCell align="right">30</TableCell>
      <TableCell align="right">180</TableCell>
      <TableCell align="right">Male</TableCell>
      <TableCell align="right">BC</TableCell>
    </TableRow>
    <TableRow>
      <TableCell component="th" scope="row">
        James Bond
      </TableCell>
      <TableCell align="right">53</TableCell>
      <TableCell align="right">185</TableCell>
      <TableCell align="right">Male</TableCell>
      <TableCell align="right">England</TableCell>
    </TableRow>
  </TableBody>
</Table>

Fixed width

Create fixed column widths by assigining the fixed prop a series of widths for each column.

NameAgeHeightSexLocation
Ben McMahen30180MaleBC
James Bond53185MaleEngland
<Table fixed={["40%", "125px", "125px", "125px", "125px"]} minWidth="600px">
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell align="right">Age</TableCell>
      <TableCell align="right">Height</TableCell>
      <TableCell align="right">Sex</TableCell>
      <TableCell align="right">Location</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell ellipsis component="th" scope="row">
        Ben McMahen
      </TableCell>
      <TableCell align="right">30</TableCell>
      <TableCell align="right">180</TableCell>
      <TableCell align="right">Male</TableCell>
      <TableCell align="right">BC</TableCell>
    </TableRow>
    <TableRow>
      <TableCell ellipsis component="th" scope="row">
        James Bond
      </TableCell>
      <TableCell align="right">53</TableCell>
      <TableCell align="right">185</TableCell>
      <TableCell align="right">Male</TableCell>
      <TableCell align="right">England</TableCell>
    </TableRow>
  </TableBody>
</Table>

Expanding rows

Using expanding rows is useful for when you want to reveal additional information about a particular row. This UI pattern is inspired by the one found in the Firebase console. Currently this will not work with minWidth set on the table.

NameAgeHeightSexLocation
Ben McMahen30180MaleBC
James Bond53185MaleEngland
<Table fixed={["40%", "125px", "125px", "125px", "125px"]}>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell align="right">Age</TableCell>
      <TableCell align="right">Height</TableCell>
      <TableCell align="right">Sex</TableCell>
      <TableCell align="right">Location</TableCell>
    </TableRow>
  </TableHead>
  <ExpandingRow
    content={close => (
      <div>
        <Text>A form perhaps?</Text>
        <div>
          <Button onPress={close}>Close</Button>
        </div>
      </div>
    )}
  >
    <TableCell ellipsis component="th" scope="row">
      Ben McMahen
    </TableCell>
    <TableCell align="right">30</TableCell>
    <TableCell align="right">180</TableCell>
    <TableCell align="right">Male</TableCell>
    <TableCell align="right">BC</TableCell>
  </ExpandingRow>

  <ExpandingRow
    content={close => (
      <div>
        <Text>A form perhaps?</Text>
        <div>
          <Button onPress={close}>Close</Button>
        </div>
      </div>
    )}
  >
    <TableCell ellipsis component="th" scope="row">
      James Bond
    </TableCell>
    <TableCell align="right">53</TableCell>
    <TableCell align="right">185</TableCell>
    <TableCell align="right">Male</TableCell>
    <TableCell align="right">England</TableCell>
  </ExpandingRow>
</Table>

API

TableHead
TableBody
Table
minWidthstring
An optional minimum width for table content.
fixedstring[]
An optional array of fixed layout widths for each column
TableRow
onClick() => void
A callback when a row is selected
TableCell
align"left" | "center" | "right" | "justify"
varianttableCellVariants
ellipsisboolean
componentReactType<TableCellBaseProps>
ExpandingRow
content*(close: () => void) => ReactNode
The expanded content to show when the user selects the row
```