Table

Simple Table, TableHead, TableBody, TableRow and TableCell components. Customisation can be done outside of the core components (sorting, pagination, etc).

Props

NameTypeDescription
children
React$Node

Table

A lightweight table with basic styling ✨
NameUser LevelPosition
Mike Jablonskimike@acme.com
Standard UserEditor
Emily Daviesemily.has.a.very.long.email.address@acme.com
Team OwnerHR Manager
<Table> <TableHead> <TableRow> <TableCell width="calc(32px + 8px)"> Name </TableCell> <TableCell /> <TableCell> User Level </TableCell> <TableCell> Position </TableCell> <TableCell width="calc(24px + 2 * 8px)" /> </TableRow> </TableHead> <TableBody border={undefined}> <TableRow> <TableCell paddingRight={0}> <SkeletonAvatar height={32} width={32} /> </TableCell> <TableCell> <Box> <Text lineHeight="1.3" size="medium" weight="semi-bold" > Mike Jablonski </Text> <Text size="extra-small" weight="light" > mike@acme.com </Text> </Box> </TableCell> <TableCell> <Text size="small" weight="light" > Standard User </Text> </TableCell> <TableCell> <Text size="small" weight="light" > Editor </Text> </TableCell> <TableCell> <Box cursor="pointer"> <Icon color="navy600" size={24} > more_vert </Icon> </Box> </TableCell> </TableRow> <TableRow> <TableCell paddingRight={0}> <SkeletonAvatar height={32} width={32} /> </TableCell> <TableCell> <Box> <Text lineHeight="1.3" size="medium" weight="semi-bold" > Emily Davies </Text> <Text size="extra-small" weight="light" > emily.has.a.very.long.email.address@acme.com </Text> </Box> </TableCell> <TableCell> <Text size="small" weight="light" > Team Owner </Text> </TableCell> <TableCell> <Text size="small" weight="light" > HR Manager </Text> </TableCell> <TableCell> <Box cursor="pointer"> <Icon color="navy600" size={24} > more_vert </Icon> </Box> </TableCell> </TableRow> </TableBody> </Table>

Borderless table

Sure, borders are optional ✌️
NameUser LevelPosition
Mike Jablonskimike@acme.com
Standard UserEditor
Emily Daviesemily.has.a.very.long.email.address@acme.com
Team OwnerHR Manager
<Table> <TableHead> <TableRow> <TableCell width="calc(32px + 8px)"> Name </TableCell> <TableCell /> <TableCell> User Level </TableCell> <TableCell> Position </TableCell> <TableCell width="calc(24px + 2 * 8px)" /> </TableRow> </TableHead> <TableBody border={false}> <TableRow> <TableCell paddingRight={0}> <SkeletonAvatar height={32} width={32} /> </TableCell> <TableCell> <Box> <Text lineHeight="1.3" size="medium" weight="semi-bold" > Mike Jablonski </Text> <Text size="extra-small" weight="light" > mike@acme.com </Text> </Box> </TableCell> <TableCell> <Text size="small" weight="light" > Standard User </Text> </TableCell> <TableCell> <Text size="small" weight="light" > Editor </Text> </TableCell> <TableCell> <Box cursor="pointer"> <Icon color="navy600" size={24} > more_vert </Icon> </Box> </TableCell> </TableRow> <TableRow> <TableCell paddingRight={0}> <SkeletonAvatar height={32} width={32} /> </TableCell> <TableCell> <Box> <Text lineHeight="1.3" size="medium" weight="semi-bold" > Emily Davies </Text> <Text size="extra-small" weight="light" > emily.has.a.very.long.email.address@acme.com </Text> </Box> </TableCell> <TableCell> <Text size="small" weight="light" > Team Owner </Text> </TableCell> <TableCell> <Text size="small" weight="light" > HR Manager </Text> </TableCell> <TableCell> <Box cursor="pointer"> <Icon color="navy600" size={24} > more_vert </Icon> </Box> </TableCell> </TableRow> </TableBody> </Table>