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.
🚀 Feature Proposal
The current
Tablecomponent uses CSS Grid for it's cell and header sizing since it controls it via theTable.Row. But, the standard HTMLTableelement, 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 olderTablecomponent 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-columnsproperty. 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.