DOP-5110: Render sub rows for ListTable #1342
Conversation
✅ Deploy Preview for docs-frontend-stg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for docs-frontend-dotcomstg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| <Cell key={cell.id} className={cx(baseCellStyle, bodyCellStyle, isStub && stubCellStyle)} role={role}> | ||
| {cell.renderValue()} | ||
| <Cell key={cell.id} className={cx(baseCellStyle, isStub && stubCellStyle)} role={role}> | ||
| <div className={cx(bodyCellStyle)}>{cell.renderValue()}</div> |
There was a problem hiding this comment.
I had to wrap cell content within a new div to ensure cell content was contained and styled separately. Whenever a row has sub rows, the "expand row" button is added as the first child of the Cell and the previous styling would cause layout issues
src/components/ListTable.js
Outdated
| const generateRowsData = (bodyRowNodes, columns, isNested = false) => { | ||
| // The shape of list-table's "rows" are slightly different from a traditional row directive, so we need to | ||
| // account for that | ||
| const rowNodes = isNested ? bodyRowNodes : bodyRowNodes.map((node) => node?.children[0]?.children ?? []); |
There was a problem hiding this comment.
can we handle this in where we call generateRowsData instead of handling two different types of input? i think we can call generateRowsData(bodyRows.map(...), columns) in line 287
There was a problem hiding this comment.
the children lookup will still have to exist (224-231) and it would be an improvement if we had the uniform structure vs (current mix of list+listitem and row), but the above comment can at least reduce the difference
| @@ -32,17 +32,24 @@ const styleTable = ({ customAlign, customWidth }) => css` | |||
| ${customAlign && `text-align: ${align(customAlign)}`}; | |||
| ${customWidth && `width: ${customWidth}`}; | |||
| margin: ${theme.size.medium} 0; | |||
|
|
|||
| tbody[data-expanded='true'] { | |||
| // Avoid flash of light mode | |||
|
Closing this PR due to discussions leaning towards a no-op on our end. Please refer to the ticket comments for details. |
Stories/Links:
DOP-5110
Related parser PR
Sample rST page
Current Behavior:
Older tables test page
Staging Links:
Tables test page - The 2 sections pertaining to nested tables should have examples of the sub rows. All other sections can be used as controls to help identify visual regressions.
Notes:
subRowsin the row data and renders them in an expanded state by default.README updates