Chakra UI Table is it possible for a chakra UI component to have overflow x to have responsiveness?

user_14225775 0
Viewed 2729

I have a Chakra UI Table that I want to have an overflow x when the whole table doesnt fit the screen anymore, can't seem to figure out how to put scroll left to right.

<Table my={{ base: '1rem' }}>
  <Thead>
    <Tr>
      <Th>Question</Th>
      <Th>Answer</Th>
      <Th>Action</Th>
    </Tr>
  </Thead>
  <Tbody>
    {faqs.map(faq => (
      <Tr key={faq._id}>
        <Td>{faq.question}</Td>
        <Td>{faq.answer}</Td>
        <Td width="15%">
          <ButtonGroup spacing="3">
            <Button
              colorScheme="blue"
              onClick={() => modalOnOpenHandler(faq._id)}
            >
              <EditIcon />
            </Button>
            <Button
              colorScheme="red"
              onClick={() => idDialogHandler(faq._id)}
            >
              <DeleteIcon />
            </Button>
          </ButtonGroup>
        </Td>
      </Tr>

The problem is that I have a flex parent for the sidebar menu and the content component that is why the scroll can't detect that it needs to be scrolled.

chakra-ui reactjs javascript
1 Answers

Wrap the Table element with a Box, and use the overflowX property of the Box.

<Box overflowX="scroll">
  <Table>
  </Table>
</Box>

Note: overflowX on the Table itself didn't work for me.

I just ran into this myself, and found your question. It doesn't seem to be too documented on the Style Props docs or on the Table docs.

user_51818660
Related