Skip to content
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: Add a "Simple" variant to Table Component #3048

Open
josh-bagwell opened this issue Nov 8, 2024 · 0 comments
Open

feat: Add a "Simple" variant to Table Component #3048

josh-bagwell opened this issue Nov 8, 2024 · 0 comments
Assignees

Comments

@josh-bagwell
Copy link
Contributor

🚀 Feature Proposal

The current Table component uses CSS Grid for it's cell and header sizing since it controls it via the Table.Row. But, the standard HTML Table element, will set the size of each cell to the largest cell within the Table. So if you were to look at this from a "column"(Table's do not build in terms of columns but in rows, this is why I used quotes to denote that) perspective, each "column" of the table would automatically be set to the width of the largest cell in that "column" using the older Table component prior to v11. The new variant would just be applying a modifier through a stencil with css and the browser Table Element will take care of the rest. It's a small fix that can give a user an experience similar to the older Table that they may have been using before but, it will be styled the same as the Table that exists now. I do not want to remove CSS Grid from the Table currently as that's a breaking change and would remove a lot of flexibility for someone who wants to use Grid.

Motivation

This had come up with someone in support as they wanted a Table to auto set the widths of each "column" to it's largest cell. The current Table does not do this automatically as each Table is made up of rows and those rows dictate that sizing needed automatically through CSS Grid's grid-template-columns property. This gives the user a lot of flexibility when it comes to sizing the Table however, it does not set the width of the cells automatically to the largest cell within that "column" of that Table.

@josh-bagwell josh-bagwell self-assigned this Nov 8, 2024
@jaclynjessup jaclynjessup moved this to 🆕 New in Canvas Kit Nov 8, 2024
@josh-bagwell josh-bagwell changed the title Add "simple" variant to Table Component feat: Add a "Simple" variant to Table Component Nov 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 🆕 New
Development

No branches or pull requests

1 participant