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>