feat(table): fold a record into column groups on small devices - #2138
Merged
Conversation
`wrap` moves the last column onto a row of its own, which is not enough for a table with many columns: a seven-column catalog table still measured 487px against a 358px container on a 390px viewport, because the remaining columns are each narrow but there are too many of them. `wrap-cols` takes a column count per rendered row, so a record stacks as a card instead. `2,4,1` keeps the first two columns on the lead row, folds the next four onto a row of their own and gives the last the final row. That removes the horizontal scroll rather than reducing it. Both wrap paths implement it. A plain table folds server-side in the render hook with display utilities, a data table in the browser through mod-simple-datatables; the group list reaches the hook through the page store, the way the caption and the data-table flag already do. The striping is recomputed per row count: the stripe alternates per record, so a record of N rows has a period of 2N. `nth-of-type` accepts no custom property, so the rules are emitted per count rather than parameterised, and only past the default two, which the existing selector already covers. A folded group lays its values out in equal columns that drop to as many as fit. Four fixed columns across a 390px viewport are ~74px each, narrower than a label like "Warehouse" - and a rendered badge is wider than its bare text - so a fixed count breaks values mid-word. Values fill their track so a column the author centred or right-aligned keeps that after folding.
✅ Deploy Preview for gethinode-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Collaborator
Author
|
🎉 This PR is included in version 3.23.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
wrap-colsto thetableshortcode: a comma-separated column count per rendered row, so a record folds into groups and stacks as a card on small devices instead of dropping only its last column.2,4,1across seven columns keeps#and Name on the lead row, folds four badges onto a row of their own, and gives the description the last.Consumes gethinode/mod-simple-datatables#298, released in v4.2.0 and bumped here.
Why
wrapfolds one column, which is not enough for a table with many columns. A seven-column catalog table still measured 487px against a 358px container on a 390px viewport after its description was folded — the remaining columns are each narrow, but there are too many of them. Folding the badge columns as a group removes the horizontal scroll rather than reducing it: the same table now measures 342px in a 342px container.Both wrap paths
A plain table folds server-side in
render-table.htmlwith display utilities and no JavaScript; a data table folds in the browser, because simple-datatables owns that DOM. The group list reaches the render hook through the page store, the way the caption and the data-table flag already do.colspancounts the lead group rather than every column. The folded headings aredisplay: noneand contribute no column, so spanning the full count reaches past the grid and the folded row's stripe and bottom border stop part way across the table.Striping
The stripe alternates per record, so a record of N rows has a period of 2N.
nth-of-typeaccepts no custom property, so the rules are emitted per row count rather than parameterised, and only past the default two — which the existing.table-wrapselector already covers, so tables that carry no count class are untouched.Group layout
A folded group lays its values out in equal columns that drop to as many as fit. Four fixed columns across a 390px viewport are ~74px each, narrower than a label like "Warehouse" — and a rendered badge is wider than its bare text — so a fixed count breaks values mid-word.
auto-fitlays four values out 2×2 on a phone and 4-across when there is room.Values fill their track rather than being sized to content, so a column the author centred or right-aligned keeps that alignment after folding; left is simply what
text-alignalready resolves to.The layout wrapper sits inside the cell, never on it: a
displayof grid or flex on atdtakes it out of the table formatting context andcolspanstops applying with it.Validation
A group list is refused unless every entry is a positive integer and the total matches the column count. A list left stale when a column is added falls back to wrapping the last column only, rather than folding on stale boundaries and silently dropping or duplicating a column.
Testing
Five fixtures in
exampleSite/content/en/table-demo.md, driven in a browser against released modules only at 390px and 1440px:table-wrap-3, 3 rows/record, folded rows full width, 4 chips, no overflow2,4of 7), data tabletable-wrap, 2 rows/recordAt 1440px the three-group tables are unwrapped with all seven headers and seven cells per row, and sorting by Name still reorders correctly — the row model is never touched.
pnpm lintandpnpm test:templatespass.Follow-up
Docs for the new argument are ready in gethinode/mod-docs and will be raised once this ships in v3.23.0 — that PR's example passes
wrap-cols, which an older theme would not recognise.