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.

Name	Age	Height	Sex	Location
Ben McMahen	30	180	Male	BC
James Bond	53	185	Male	England

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

Name	Age	Height	Sex	Location
Ben McMahen	30	180	Male	BC
James Bond	53	185	Male	England

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

Show Code

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.

Name	Age	Height	Sex	Location
Ben McMahen	30	180	Male	BC
James Bond	53	185	Male	England

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

Show Code