Responsive Rows

Responsive row nodes produce multi-cell layouts that adapt to the available width. Each cell can contain a different type of content - rich text, a data table, or a chart. The cells wrap to the next line when the viewport is too narrow to display them side by side, making the output suitable for both wide screens and mobile devices.

Adding a Responsive Row

Cell Types

Layout Controls

Min-Width

Each cell has a min-width setting that controls when wrapping occurs. If the viewport cannot fit a cell at its minimum width alongside the other cells, the cell wraps to the next line. Set wider min-widths for content that needs space (such as tables) and narrower values for compact content (such as a single metric).

Fixed Height

By default, cells grow to fit their content. Enable the fixed height option to constrain a cell to a set pixel height. When the content exceeds the fixed height, the cell becomes scrollable. This is useful for keeping a consistent row height when one cell has significantly more content than the others.

Full-Screen Expand

Every cell in a responsive row supports full-screen expand. The viewer renders a small expand button in the corner of each cell. When clicked, the cell content fills the screen, giving the reader an unobstructed view. This is particularly useful for charts (which show the full uncapped dataset in full-screen mode) and for large tables.

Practical Example

A typical responsive row for an entity summary might contain three cells:

On a wide screen, all three cells display side by side. On a tablet, the chart might wrap below the text and table. On a phone, all three cells stack vertically.

Next Steps