Replies: 1 comment 2 replies
-
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:
Cons:
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> 2. Simple approach Something similar to Buefy's table component here: Pros:
Cons:
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 👍🏽 |
Beta Was this translation helpful? Give feedback.
-
Describe the solution you'd like
A table component, that supports the following props:
Describe alternatives you've considered
Normal HTML tags and
v-chakra
😅Beta Was this translation helpful? Give feedback.
All reactions