Table
View Chakra UI documentation
<Stack spacing="16"> <TableContainer whiteSpace="normal"> <Table> <Thead> <Tr> <Th>Column one</Th> <Th>Column three</Th> <Th>Status</Th> <Th></Th> </Tr> </Thead> <Tbody> <Tr> <Td>Value</Td> <Td>Value</Td> <Td> <Badge>New</Badge> </Td> <Td isNumeric> <ButtonGroup variant="ghost" size="sm"> <Tooltip label="Edit"> <IconButton icon={ <Icon> <path d={mdiPencilOutline} /> </Icon> } aria-label={'Edit'} /> </Tooltip> <Menu> <Tooltip label="More options"> <MenuButton as={IconButton} icon={ <Icon> <path d={mdiDotsHorizontal} /> </Icon> } aria-label={'More options'} /> </Tooltip> <MenuList> <MenuItem icon={ <Icon> <path d={mdiFormTextbox} /> </Icon> } > Rename </MenuItem> <MenuItem icon={ <Icon> <path d={mdiContentCopy} /> </Icon> } > Duplicate </MenuItem> <MenuItem color="danger" icon={ <Icon color="danger"> <path d={mdiTrashCanOutline} /> </Icon> } > Delete </MenuItem> </MenuList> </Menu> </ButtonGroup> </Td> </Tr> <Tr> <Td>Value</Td> <Td>Value</Td> <Td> <Badge colorScheme="success">Done</Badge> </Td> <Td isNumeric> <ButtonGroup variant="ghost" size="sm"> <Tooltip label="Edit"> <IconButton icon={ <Icon> <path d={mdiPencilOutline} /> </Icon> } aria-label={'Edit'} /> </Tooltip> <Menu> <Tooltip label="More options"> <MenuButton as={IconButton} icon={ <Icon> <path d={mdiDotsHorizontal} /> </Icon> } aria-label={'More options'} /> </Tooltip> <MenuList> <MenuItem icon={ <Icon> <path d={mdiFormTextbox} /> </Icon> } > Rename </MenuItem> <MenuItem icon={ <Icon> <path d={mdiContentCopy} /> </Icon> } > Duplicate </MenuItem> <MenuItem color="danger" icon={ <Icon color="danger"> <path d={mdiTrashCanOutline} /> </Icon> } > Delete </MenuItem> </MenuList> </Menu> </ButtonGroup> </Td> </Tr> <Tr> <Td>Value</Td> <Td>Value</Td> <Td> <Badge colorScheme="danger">Failed</Badge> </Td> <Td isNumeric> <ButtonGroup variant="ghost" size="sm"> <Tooltip label="Edit"> <IconButton icon={ <Icon> <path d={mdiPencilOutline} /> </Icon> } aria-label={'Edit'} /> </Tooltip> <Menu> <Tooltip label="More options"> <MenuButton as={IconButton} icon={ <Icon> <path d={mdiDotsHorizontal} /> </Icon> } aria-label={'More options'} /> </Tooltip> <MenuList> <MenuItem icon={ <Icon> <path d={mdiFormTextbox} /> </Icon> } > Rename </MenuItem> <MenuItem icon={ <Icon> <path d={mdiContentCopy} /> </Icon> } > Duplicate </MenuItem> <MenuItem color="danger" icon={ <Icon color="danger"> <path d={mdiTrashCanOutline} /> </Icon> } > Delete </MenuItem> </MenuList> </Menu> </ButtonGroup> </Td> </Tr> </Tbody> </Table> </TableContainer> <TableContainer as={Card} variant="flat" size="lg" whiteSpace="normal"> <Table> <Thead> <Tr> <Th>Column one</Th> <Th>Column three</Th> <Th>Status</Th> <Th></Th> </Tr> </Thead> <Tbody> <Tr> <Td>Value</Td> <Td>Value</Td> <Td> <Badge>New</Badge> </Td> <Td isNumeric> <ButtonGroup variant="ghost" size="sm"> <Tooltip label="Edit"> <IconButton icon={ <Icon> <path d={mdiPencilOutline} /> </Icon> } aria-label={'Edit'} /> </Tooltip> <Menu> <Tooltip label="More options"> <MenuButton as={IconButton} icon={ <Icon> <path d={mdiDotsHorizontal} /> </Icon> } aria-label={'More options'} /> </Tooltip> <MenuList> <MenuItem icon={ <Icon> <path d={mdiFormTextbox} /> </Icon> } > Rename </MenuItem> <MenuItem icon={ <Icon> <path d={mdiContentCopy} /> </Icon> } > Duplicate </MenuItem> <MenuItem color="danger" icon={ <Icon color="danger"> <path d={mdiTrashCanOutline} /> </Icon> } > Delete </MenuItem> </MenuList> </Menu> </ButtonGroup> </Td> </Tr> <Tr> <Td>Value</Td> <Td>Value</Td> <Td> <Badge colorScheme="success">Done</Badge> </Td> <Td isNumeric> <ButtonGroup variant="ghost" size="sm"> <Tooltip label="Edit"> <IconButton icon={ <Icon> <path d={mdiPencilOutline} /> </Icon> } aria-label={'Edit'} /> </Tooltip> <Menu> <Tooltip label="More options"> <MenuButton as={IconButton} icon={ <Icon> <path d={mdiDotsHorizontal} /> </Icon> } aria-label={'More options'} /> </Tooltip> <MenuList> <MenuItem icon={ <Icon> <path d={mdiFormTextbox} /> </Icon> } > Rename </MenuItem> <MenuItem icon={ <Icon> <path d={mdiContentCopy} /> </Icon> } > Duplicate </MenuItem> <MenuItem color="danger" icon={ <Icon color="danger"> <path d={mdiTrashCanOutline} /> </Icon> } > Delete </MenuItem> </MenuList> </Menu> </ButtonGroup> </Td> </Tr> <Tr> <Td>Value</Td> <Td>Value</Td> <Td> <Badge colorScheme="danger">Failed</Badge> </Td> <Td isNumeric> <ButtonGroup variant="ghost" size="sm"> <Tooltip label="Edit"> <IconButton icon={ <Icon> <path d={mdiPencilOutline} /> </Icon> } aria-label={'Edit'} /> </Tooltip> <Menu> <Tooltip label="More options"> <MenuButton as={IconButton} icon={ <Icon> <path d={mdiDotsHorizontal} /> </Icon> } aria-label={'More options'} /> </Tooltip> <MenuList> <MenuItem icon={ <Icon> <path d={mdiFormTextbox} /> </Icon> } > Rename </MenuItem> <MenuItem icon={ <Icon> <path d={mdiContentCopy} /> </Icon> } > Duplicate </MenuItem> <MenuItem color="danger" icon={ <Icon color="danger"> <path d={mdiTrashCanOutline} /> </Icon> } > Delete </MenuItem> </MenuList> </Menu> </ButtonGroup> </Td> </Tr> </Tbody> </Table> </TableContainer> </Stack>