Make <Table> responsive

[renatahdo]

Hi! Is there a way where I can make the

responsive? I've tried with overflowX="scroll" but I don't know if I did it right. Thank you so much!

[chr-ge]

Can you share a codesandbox of your table?

[renatahdo]

I found a solution for the moment by adding Accordions when the screen gets smaller. Thank you very much!

[rheng001]

@renatahdo

Were you able to get the Table to be responsive? Facing the same issue

[renatahdo]

I didn't. But the solution I made is when the screen gets smaller, I transformed the Table to Accordions by changing the css property "display". Also I added a width to the "tr"', for example:

[ask2mahtab]

can you share the code with us

[milanpoudelwebdeveloper]

Using w percentage in th didn't work. Are you sure this method is working?

[bryanltobing]

does someone has solved the issue?

[chasinhues]

Tables are infamously difficult to actually make responsive themselves, purely by their nature. You can't really wrap the columns or anything.

IMO, the best way, as OP mentioned is to use overflowX. You may need to wrap your table in a box with overflowX.

Example: https://codesandbox.io/s/responsive-table-e2h0d?file=/src/App.tsx

[jfobrien29]

Appreciate the snippet @chasinhues !

[lewis-kori]

This worked for me. Thanks. I used overflowX='scroll'

[kevbarns]

Also, I used react-table with Chakra-ui and the Table component doesn't propagate props to it's children, I had to use Box as={Table} to make it work.

[with-heart]

What props were you trying to propagate?

[kgcusi]

Can you share a sandbox on this?

[kevbarns]

Hey ! So it's been some time now so I don't know if the issue is still here in the latest version, but here is a quick snippet : I was trying to propagate the react-table props coming from it's useTable hooks.

By replacing the Tables components by the Box components with the "as" props make it works.
Unless this, I couldn't get the table to display my data.

  const table = useTable({ columns: headersData, data: tableData });
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = table;

  return (
    <Box as="table" {...getTableProps()}>
      <Box bg="lightgray" as="thead">
        {headerGroups.map((headerGroup) => {
          return (
            <Box as="tr" {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => {
                return (
                  <Box p={2} minWidth="100px" fontSize="sm" as="th" {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </Box>
                );
              })}
            </Box>
          );
        })}
      </Box>

      <Box as="tbody" {...getTableBodyProps()}>
        {rows.map((row) => {
          const {
            values: {
              _id: { dangerously_added_by_user },
            },
          } = row;
          prepareRow(row);
          return (
            <Box bg={dangerously_added_by_user ? "lightblue" : ""} as="tr" {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <Box p={2} minWidth="100px" as="td" {...cell.getCellProps()}>
                    {cell.render("Cell")}
                  </Box>
                );
              })}
            </Box>
          );
        })}
      </Box>
    </Box>
  );

[renatahdo]

Thank you so much!

[henrychea]

In case anyone else is still having this issue, you can also just wrap the table in a responsive element such as Box

 <Box overflow={'scroll'}>
        <Table variant="striped" colorScheme="cyan" overflow={'scroll'}>

[alianasimoes]

<Box overflowX="auto">
<Table...></Table...>
</Box>

For React + Chakra UI v. 0.8

[gneutzling]

Hey folks, I've created a gist with a different way to create responsive tables using Chakra UI. Take a look and share your thoughts!

https://gist.github.com/gneutzling/2e8447e4ead4017e5302d04f90e79432

Ps.: still need to improve table styles.

[BrunoReCarmo]

You have multiple options available. To ensure responsiveness and control over the layout, you can utilize the overflow property with the value auto to add scroll bars when necessary, and the max-width property to set a maximum value for the element's width.

<Box overflowY="auto" height="80vh" overflowX="scroll"> {/*Table inside*/} </Box>