Table Component

[IHIutch]

Describe the solution you'd like
A table component, that supports the following props:

Table,
  Thead,
  Tbody,
  Tfoot,
  Tr,
  Th,
  Td,
  TableCaption

Describe alternatives you've considered
Normal HTML tags and v-chakra 😅

[codebender828]

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:

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 👍🏽

[IHIutch]

I was initially thinking about the 1st approach you laid out. I think that's what my expectation would be (since that also matches the React lib). I think that would easily allow you to add additional functionality or a table library that allows you to sort, filter, etc.

That being said, there is something very compelling about approach 2.

I agree with the priority here, and since 2 would rely on roughly the same markup, could probably be added later.

[fmvnow]

Both approach would be nice! Sometimes we don't need too much customization and the simple approach worth enough