Repository navigation
feat: add stack-on-phone attribute to os-table - #981
Conversation
|
Thank you for taking on #900, @Pranjal1423! Keying the layout off the shell's mode stamp instead of a media query is the right call, and the help block and components reference are nicely updated. One case still slips through, and it's the one #900 is about. In an // os-table.ts, attributeChangedCallback()
if (
( name === 'stacked' || name === 'sticky-columns' ) &&
this.isConnected &&
this.hasAttribute( 'stack-on-phone' )
) {
this._syncStackOnPhone();
}A test that runs |
|
Thank you for the thorough review, @epeicher! That makes complete sense — on In commit 984703b, I have:
|
epeicher
left a comment
There was a problem hiding this comment.
Thanks for addressing the comments @Pranjal1423! I have tested it with a wide table, and it works as expected, it renders the columns as stacked cards. I like it. Changes LGTM!
| Before | After |
|---|---|
![]() |
![]() |
P.S. Thanks @juanlentino for the original idea as part of #900


Closes #900
Description
Added a
stack-on-phoneattribute to<os-table>so tables can automatically switch to a card layout on phone-sized screens without requiring extra JavaScript.Changes
stack-on-phoneattribute to<os-table>and updated its documentation.stackOnPhone(this)when the attribute is present.data-os-modeso the table switches between stacked and normal layouts.stack-on-phone.tsto find the nearest[data-os-mode]ancestor when no root is provided.docs/components-reference.md.tests/vitest/os-table-stack-on-phone.test.ts.How to Test
npm run test:js tests/vitest/os-table-stack-on-phone.test.ts.stack-on-phoneto an<os-table>containing a standard HTML table.data-os-mode="mobile"on the container and verify that the table switches to a stacked layout with labels taken from the headers.