-
Notifications
You must be signed in to change notification settings - Fork 60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(store-ui): Table Molecule #987
Conversation
✔️ Deploy Preview for storeui ready! 🔨 Explore the source changes: 35a85ac 🔍 Inspect the deploy log: https://app.netlify.com/sites/storeui/deploys/616db5d1a1ea8c0007ddff34 😎 Browse the preview: https://deploy-preview-987--storeui.netlify.app |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 35a85ac:
|
@igorbrasileiro solved it here: #989 ;) |
Create `Table` component as a molecule and also: - `TableBody` - `TableCell` - `TableFooter` - `TableHead` - `TableRow`
b72dec6
to
f1bce00
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏
import React from 'react' | ||
|
||
import type { TableProps } from '../Table' | ||
import TableComponent from '../Table' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any reason for not be calling it "Table"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just because I wanted the story name to also be Table
😅 And to do so, I have to export a Table
variable.
What's the purpose of this pull request?
This PR creates adds a
Table
molecule to@vtex/store-ui
.Closes #840.
How it works?
The
Table
component simply takeschildren
and renders them. But to aid in the construction of tables, individual components that should be placed inside of aTable
component were also created in this branch:TableBody
, renders a<tbody>
tag.TableHead
, renders a<thead>
tag.TableRow
, renders a<tr>
tag.TableFooter
, renders a<tfoot>
tag.TableCell
, can render a<th>
or<td>
tag, according to avariation
prop that supports values"header"
and"data"
.All of those components expect to receive
children
, and render them out.Here's an example of a table and the JSX markup that generates it:
How to test it?
You can check it out in the Storybook linked below.
Here's also a
base.store
preview with this table: https://sfj-b961b7e--base.preview.vtex.app/small-messenger-bag-with-double-g-70/p.References
For inspiration:
References about HTML tables and a11y: