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 😀❤️

I could use something like this. Up until now, this is another component I wasn't sure about including to the core API. 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:

• 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-table-row>
    <c-table-head scope="col">Last Name</c-table-head>
    <c-table-head scope="col">First Name</c-table-head>
    <c-table-head scope="col">City</c-table-head>
  </c-table-row>
  <c-table-row>
    <c-table-data>Phoenix</c-table-data>
    <c-table-data>Imari</c-table-data>
    <c-table-data>Henry</c-table-data>
  </c-table-row>
  <c-table-row>
    <c-table-data>Zeki</c-table-data>
    <c-table-data>Rome</c-table-data>
    <c-table-data>Min</c-table-data>
  </c-table-row>
  <c-table-row>
    <c-table-data>Apirka</c-table-data>
    <c-table-data>Kelly</c-table-data>
    <c-table-data>Brynn</c-table-data>
  </c-table-row>
</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.

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