Thanks @IHIutch 😀❤️

This API is coming to the v1 version of the library as well. (https://chakra-ui.com/docs/data-display/table)

I could use something like this in v0 as well. Up until now, this is another component I wasn't sure about including to the core API for v0. But I'm open to us having a discussion around the API.

What would a good Table API look like?

There's two directions we could go with this:
1) The compound approach.
Pros:

• Conforms to v1 API
• Flexibility with layout
• Flexibility with styling of table elements

Cons:

• Markup dense.
• Consumers have to handle the table data props themselves

Sample code

<c-table>
 <c-table-caption>Teddy bear collectors:</c-table-caption>
 <c-tr>
 <c-th scope="col">Last Name</c-th>
 <c-th scope="col">First Name</c-th>
 <c-th scope="col">City</c-th>
 </c-tr>
 <c-tr>
 <c-td>Phoenix</c-td>
 <c-td>Imari</c-td>
 <c-td>Henry</c-td>
 </c-tr>
 <c-tr>
 <c-td>Zeki</c-td>
 <c-td>Rome</c-td>
 <c-td>Min</c-td>
 </c-tr>
 <c-tr>
 <c-td>Apirka</td>
 <c-td>Kelly</c-td>
 <c-td>Brynn</c-td>
 </c-tr>
</c-table>

This would yield:
image

2. Simple approach
The second approach would be to create a single c-table component that can accept an array of objects for the table content. It could also provide a scoped slot for all the table data so it's children can manipulate the layout of the table's content.

Something similar to Buefy's table component here:
https://codepen.io/codebender828/pen/ExNMgpb?editors=101

Pros:

• No declarative flexibility with styling of the table elements
• Need to use a scoped slot to modify table styles

Cons:

• Plug and play approach to creating a table. (Just bring the data)

Example code

<!-- Plug and play -->
<c-table :data="tableData" caption="My fancy table" />
<!-- With scoped slots to modify styles -->
<c-table #default="{ rows, columns }" v-chakra="{ 'th': { bg: 'gray.500' } }">
 <c-box v-for="(col, i) in columns" :key="i" as="th" bg="gray.50">
 {{ col }}
 </c-box>
</c-table>

I for one would prefer approach 1 since you get some flexibility with layouts and conforms with Chakra's design principles.

This will be implemented in pattern 1 for v1

Also since we're still kinda fleshing this out, it makes sense for us to make this issue a discussion instead 👍🏽