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

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:

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!

1

Answered Oct 08 '19 at 15:07

jeanverster

Hi all, here's my table implementation: https://codesandbox.io/s/upbeat-christian-3hbgp?file=/src/index.tsx.

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.

1

Answered Jun 16 '20 at 16:37

aaronmcadam

Here are some nice ideas for table designs (from https://twitter.com/steveschoger/status/1167479729282310145):

1

Answered Oct 03 '19 at 15:45

aaronmcadam

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

https://codesandbox.io/s/chakra-ui-react-table-o6psn

1

Answered Feb 25 '20 at 11:47

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?

1

Answered Oct 01 '19 at 09:17

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.

1

Answered Nov 06 '19 at 12:30

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.

1

Answered Jul 17 '20 at 23:39

with-heart

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

1

Answered Nov 26 '20 at 19:15

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: https://codesandbox.io/s/simple--react-table--chakra-ui-3sem5 Footers: https://codesandbox.io/s/footers--react-table--chakra-ui-5x58q Sorting: https://codesandbox.io/s/sorting--react-table--chakra-ui-h1qx9

1

Answered Jul 16 '20 at 19:15

esteban-url