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