Feedback: Grid Limitations for Data Tables
Introduction
Thank you for this Grid update! Features like "hug" and "fractional units" are clearly a welcome improvement for simple cases (galleries, basic layouts, etc.). However, I must share a different experience regarding the creation of data tables, where Grid actually introduces significant friction compared to auto-layout.
The problem: loss of structural hierarchy
With auto-layout, you could create a natural and maintainable architecture:
Table
├── Header (slot / component)
│ ├── tr (reusable component)
│ │ ├── th (cell)
│ │ ├── th (cell)
│ │ └── ...
├── Rows (slot)
│ ├── tr (reusable component)
│ │ ├── td (cell)
│ │ ├── td (cell)
│ │ └── ...
│ ├── tr (component)
│ └── ...Advantages: Clear parent/child relationships, reusable components, easy to maintain and scale.
---
Practical Problems with Grid
1. Flat and Unmaintainable Hierarchy
With Grid, we end up with a flat structure: Table > 70 direct children (for a 7-column × 10-row array).
Consequences:
- Unable to create components at the row level
- Accidentally moving a child element shifts the entire table (Word-like behavior)
- Unable to maintain and scale
2. Padding and Border Management
In code, horizontal padding is always applied at the row level (tr), which ensures that the bottom borders extend correctly from left to right.
With Grid, we don't have "rows":
- We can't add padding to the row (the row no longer exists)
- We can't add padding to the table itself (the borders wouldn't reach the sides)
- We end up having to create variations for each cell (with/without padding, with/without a border, ...) — which is tedious and very different from how it works in code
3. Global Gap and Borders
We can’t use the gap between columns because the border-bottom can’t take the full width.
Furthermore, the gap is necessarily the same everywhere: it's impossible to have 20px between columns A and B, and 50px between C and D for example.
---
Suggestion
Grid is fantastic for simple layouts, but for complex tabular data, it should:
- Allow logical containers at the row level, for the hierarchy.
- Having an option to make grid behave like the HTML table.
- Offer better padding and margin management.
- Allow asymmetric gaps per column.
Without these improvements, auto-layout remains the best solution for tables, which somewhat limits Grid's usefulness for this use case.
--
In summary
Grid is a great improvement for simple cases. But for real tabular data (with structure, maintainability, components and fine control over spacing/borders), these limitations need to be addressed to truly challenge auto-layout.
Thank you for considering this feedback!
