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
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
optionalOptions added to the grid
collapseTo
:
string
optionalValid CSS size for the rows' max-height