Feat/implement mobile tables#644
Conversation
There was a problem hiding this comment.
prefer having one expect(case) peer it(test)
| cursor: pointer; | ||
| } | ||
|
|
||
| @media screen and (max-width: 767px) { |
There was a problem hiding this comment.
it worth making this the default one and the desktop to be inside a @media
| } | ||
|
|
||
| @media screen and (max-width: 767px) { | ||
| table { |
There was a problem hiding this comment.
it worth using proper bem classes
|
|
||
| .mobile-expanded-label { | ||
| font-size: 0.875rem; | ||
| font-weight: 700; |
There was a problem hiding this comment.
don't we have a var for size and weight?
There was a problem hiding this comment.
we only have var for font-size
| }) => { | ||
| const accessors = getVisibleAccessors(columns); | ||
| const defaultAccessor = getDefaultAccessor(columns); | ||
| const isMobile = windowWidth < breakpoints.md; |
There was a problem hiding this comment.
shouldn't this be accessed by a hook?
There was a problem hiding this comment.
splitting it in more components it would probably help readability
|
|
||
| th, | ||
| td { | ||
| display: none; |
There was a problem hiding this comment.
Yes, this hides all the data cells expect from the primary one. The styles below display: none; are applied to the primary one
There was a problem hiding this comment.
It is still confusing for me this one
| } | ||
|
|
||
| .autohide-cell { | ||
| > div { |
There was a problem hiding this comment.
prefer using specific classes
| width: auto; | ||
| padding-inline-end: 0; | ||
|
|
||
| div { |
There was a problem hiding this comment.
prefer using specific classes
| > div { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .autohide-cell:focus-within { | ||
| > div { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .autohide-cell { | ||
| > div { |
There was a problem hiding this comment.
prefer using specific classes instead of div
…implement-mobile-tables
…implement-mobile-tables
2 participants
Description
This PR adds mobile-specific row expansion support to the Table component while preserving the existing desktop table behavior.
On mobile, each logical row is now rendered as a compact summary row with an optional expanded details section. The implementation keeps expansion state internally in the table, exposes that state through the imperative ref API, and adds an onRowExpand callback so consuming applications can react when a row expands or collapses. Cell renderers also now receive expansion context through ctx.isExpanded, which allows client code to adapt mobile rendering based on row state.
The mobile implementation includes dedicated layout/styling for the summary row and expanded details row, keeps row selection independent from expansion, and stabilizes zebra striping by grouping each logical row in its own tbody.
Changes
Mobile row rendering
Added mobile-specific row rendering via a new component:
MobileTableRow.tsxMobile rows now render as:
Expansion is handled internally through
expandedRowsstate in the table reducer.Row expansion logic
toggleRowExpandedreducer action and wired it through the table bodyonRowExpand(rowId, isExpanded)callback to notify consumers when a row expands/collapsesTable API updates
Extended
types.tswith:CellContext(isExpanded)hideOnMobile?: booleanon columnsonRowExpand?: (rowId, isExpanded) => voidrenderMobileRightActions?: (row) => ReactNodeExpanded imperative table handlers with:
getExpandedRows()isRowExpanded(rowId)Cell rendering
ctxargument withisExpandedctx.isExpandedbased on row stateisExpanded: falserenderRowValue(...)helper to centralize row value renderingTable structure
tbody.table-row-grouptbodyThis ensures zebra striping remains stable when expanded rows are inserted.
Header & mobile column behavior
primary-header