Plugin/DataGridCollapsible

A plugin to make a DataGrid's (and its subclasses', e.g. Spreadsheet) rows collapsible — the windowed counterpart of the Table collapsible plugin.

The app sets a height budget for cell content via collapseTo (any valid CSS size). Rows holding content that overflows that budget are flagged with a collapsed attribute, and each overflowing cell is truncated to the whole lines that fit, ending in an ellipsis (-webkit-line-clamp, with the line count derived from the budget and the line-height — see clampCell). Hovering a truncated cell reveals an expand button in its top-right corner, which expands the row to that cell's full content (and back). Expanding sizes the row via --expandTo; the grid's normal measure/reflow pipeline picks the new height up, so offsets, the mounted window, and the body scroll extent stay correct.

The budget applies to each cell's content block (DataGridCell#contentElement), never to the cell: cells are grid items that stretch to their row's track, and capping one detaches it from that track — its border-bottom stops meeting the row's edge and the Spreadsheet selection box, drawn from the row geometry, outlines a box taller than the cell. Bounding the block inside it leaves the cell alone, and gives the clamp an ordinary block to work on, where it limits the height to the lines it kept rather than only drawing an ellipsis. Because collapseTo sizes that block, it is a content height: it excludes the cell's own padding and borders.

Because DataGrid pools and recycles its row and cell elements, the expanded state is kept on the persistent DataGridRow controller (row.expandedColumns, a Set of DataGridColumns) and re-applied to whatever live elements the row currently has each time it (re)mounts or resizes — measured row heights already travel with the controller, so an expanded row scrolled out of the window keeps its height and restores its expansion when it scrolls back in.

Example

JS
import DataGrid from 'komps/komps/data-grid.js'
import { collapsible } from 'komps/komps/data-grid/plugins.js'
DataGrid.include(collapsible)
new DataGrid({
    style: 'height: 400px',
    collapseTo: '3lh',
    data: [...],
    columns: [...]
})

Parameters

options : Object optional

Options added to the grid

collapseTo : string optional

Valid CSS size for the max-height of a cell's content; excludes the cell's padding and borders, so 3lh is three lines