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 rows via collapseTo (any valid CSS size). Rows whose cell content overflows that budget are truncated, flagged with a collapsed attribute, and each overflowing cell gets a toggle that 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.

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: '50px',
    data: [...],
    columns: [...]
})

Parameters

options : Object optional

Options added to the grid

collapseTo : string optional

Valid CSS size for the rows' max-height