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
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
optionalOptions added to the grid
collapseTo
:
string
optionalValid CSS size for the max-height of a
cell's content; excludes the cell's padding and borders, so 3lh is three lines