Any plans to include table component ? - chakra-ui TypeScript

if any, Is it going to be implemented from scratch or wrapper around something like react-table react-table

Asked Nov 02 '21 22:11
avatar ngprnk

9 Answer:

Hi everyone, I have recently implemented a basic table using react-table v7 new headless API with chakra. Would be happy to make a PR if anyone would be interested in checking it out?

It's pretty simple, usage would be as follows:

<Table columns={columns} data={data} />

And it looks like this:

Screenshot 2019-10-08 at 10 06 27

Out the box it has client side sorting by column headers, single page navigation, updating number of rows visible, page count & navigating to the first / last page. In terms of responsiveness it adops the overflow-x approach so the user can scroll the table content.

Lemme know what you think!

Answered Oct 08 '19 at 15:07
avatar  of jeanverster

Hi all, here's my table implementation:

Note that it doesn't try to do anything fancy with data. It is mainly about the table styles.

If people are interested, I can add an example of using data to generate the table, but I'm following the standard React pattern of mapping over an array. I'm not using the object style of react-table to generate headings and rows.

Answered Jun 16 '20 at 16:37
avatar  of aaronmcadam

Here are some nice ideas for table designs (from


Answered Oct 03 '19 at 15:45
avatar  of aaronmcadam

Hi @nejcr, see code sandbox below with a basic example 👍

Answered Feb 25 '20 at 11:47
avatar  of jeanverster

Hi @ngprnk,

Thanks for asking. A wrapper around react-table sounds like a good idea. There are 2 ways to approach this.

  • Provide simple Table components that make it easy to style tables. Bonus point if we can provide 2-4 variants (looks) of the table out of the box

  • Provide a more robust table solution, wrapping react-table and makes it super easy to compose different use cases. This path will most likely be a separate package, say @chakra-ui/table so we don't increase the size of @chakra-ui/core

What are your thoughts?

Answered Oct 01 '19 at 09:17
avatar  of segunadebayo

IMO creating a wrapper for react-table isn't a good idea. I think it should handle styling/UI only.

Personally, I'd prefer to keep my project as clean as possible, and I wouldn't like to add react-table as a dependency if I wanted to use a simple table.

If someone want to use with react-table they'll be able to use it anyway, using useTable. It'll be better for composing purpose.

Answered Nov 06 '19 at 12:30
avatar  of felippepuhle

Thank you all for the feedback and ideas!

Having a set of components for building tables would definitely be cool to have, but tables are also complex and come with a lot of edge cases to deal with (especially when it comes to dealing with responsiveness).

There's clearly a desire in the community to have this feature. Hopefully as we get through v1 and have more time to consider new ideas, we can figure out a direction to proceed.

Answered Jul 17 '20 at 23:39
avatar  of with-heart

Happy to announce that basic table support is now part of our current focus!

Answered Nov 26 '20 at 19:15
avatar  of with-heart

Hey folks, I stumbled into this issue yesterday while looking for something that would help me, the links provided by others are great, but i was looking for the simplest cases in simple js, so I made three very basic examples forked from the react-query codesandbox, they are using @chakra-ui/core@1.0.0-next.6 but the API should be very similar.

Hope this helps someone. 🙂

Simple: Footers: Sorting:

Answered Jul 16 '20 at 19:15
avatar  of esteban-url