API Reference
Compact reference for the public surface. For longer-form examples see the guides and samples.
PGrid
The top-level grid class.
import { PGrid } from '@panitw/pgrid';
const grid = new PGrid(config);
grid.render(document.getElementById('grid'));
| Member | Description |
|---|
new PGrid(config) | Construct a grid. See Configuration. |
grid.render(element) | Mount the grid into a DOM element. |
grid.view | The View. See below. |
grid.model | The Model. See below. |
grid.data | The DataTable. See below. |
grid.extension | The Extension registry. |
grid.state | Runtime state (selection, editing flag). |
grid.listen(event, fn) | Subscribe to grid-level events. |
DataTable — grid.data
Reading
getRowCount() | Number of rows in the visible projection. |
getAllData() | Underlying array of row objects (insertion order). |
getData(rowId, field) | Value by row id + field. |
getDataAt(rowIndex, field) | Value by visible index + field. |
getRowData(rowId) | Row object by row id. |
getRowDataAt(rowIndex) | Row object by visible index. |
getRowIndex(rowId) | Visible index of a row id (or -1). |
getRowId(rowIndex) | Row id at a visible index. |
getOriginalRowId(index) | Row id by original (insertion-order) index. |
Writing
setData(rowId, field, value) | Update a field by row id. Fires dataChanged. |
setDataAt(rowIndex, field, value) | Same, by visible index. |
addRow(row) | Append a row. |
insertRow(index, row) | Insert at index (in insertion order). |
removeRow(rowId) | Remove by id. |
removeRowAt(rowIndex) | Remove by visible index. |
removeAllRows() | Clear the table. |
Search & batch
search(query, fields?) | Filter the visible projection. query is a string or array of regex sources; fields restricts which fields match. |
clearSearch() | Restore the full projection. |
freeze() | Suppress per-write events; pair with unfreeze() for batched mutations. |
unfreeze() | Resume events. |
Events
listen('dataChanged', fn) | Fires after writes settle. Receives { updates: [...] }. |
Model — grid.model
Layout + schema. Maps cells/rows/columns to their config and exposes coordinate conversions.
getRowCount() | Total rows including headers. |
getColumnCount() | Total columns. |
getRowHeight(rowIndex) | Pixel height of a row. |
getColumnWidth(colIndex) | Pixel width of a column. |
getTotalWidth() / getTotalHeight() | Sum of all column widths / row heights. |
isHeaderRow(rowIndex) | True if the row is part of the header. |
getRowModel(rowIndex) | Per-row config. |
getColumnModel(colIndex) | Per-column config. |
getCellModel(r, c) | Per-cell config (or undefined). |
getCascadedCellProp(r, c, prop) | Resolve a property from cell → row → column. |
getDataAt(rowIndex, colIndex) | Cell value (returns column title for headers). |
getRowDataAt(rowIndex) | The row object backing a visible index. |
setDataAt(rowIndex, colIndex, value) | Write through to the data table. |
getRowIndex(rowId) / getRowId(rowIndex) | Coordinate conversion (header-row aware). |
getColumnIndex(field) / getColumnField(colIndex) | Field ↔ index conversion. |
canEdit(rowIndex, colIndex) | Resolve edit permission, including cellEditableCheck hooks. |
View — grid.view
The DOM layer.
render(element) | Mount the grid (called by PGrid.render). |
reRender() | Full re-render. Use after bulk data changes. |
updateCell(rowIndex, colIndex) | In-place update of one cell. |
getElement() | The mounted DOM element. |
getCell(rowIndex, colIndex) | The .pgrid-cell node, if currently mounted. |
scrollToCell(rowIndex, colIndex, alignTop) | Scroll to a cell. |
setScrollX(x) / setScrollY(y) | Programmatic scroll. |
View events
'hscroll' / 'vscroll' | Horizontal / vertical scroll. |
Extension registry — grid.extension
Loads, looks up, and dispatches extensions.
loadExtension(ext, name?) | Register an extension at runtime. Optional name for later lookup. |
getExtension(name) | Resolve a previously named extension. |
hasExtension(hookName) | True if any registered extension implements the named hook. |
executeExtension(hookName, e) | Invoke a hook on every registered extension. Used internally. |
Built-in extensions register under known names so they can find each other:
'DEFAULT_EXT_SELECTION' | SelectionExtension (when selection is enabled). |
'DEFAULT_EXT_EDITOR' | EditorExtension. |
'DEFAULT_EXT_COPYPASTE' | CopyPasteExtension. |
'DEFAULT_EXT_VIEW_UPDATER' | ViewUpdaterExtension. |
'DEFAULT_EXT_FORMATTER' | FormatterExtension. |
'DEFAULT_EXT_COLUMN_RESIZE' | ColumnResizeExtension. |
'DEFAULT_EXT_TEXT_OVERFLOW' | TextOverflowExtension. |
Events
All event-emitting objects expose the same API.
obj.listen(name, fn) | Subscribe. |
obj.unlisten(name, fn) | Unsubscribe. |
obj.dispatch(name, arg) | Emit. |
Notable events
| Event | Source | Payload |
|---|
dataChanged | grid.data | { updates: [...] } |
cellPasted | grid | { srcRowId, srcField, srcSelection, destRowId, destField, destSelection, data } |
columnResizing | grid | { colIndex, field, width } |
columnResized | grid | { colIndex, field, width } |
hscroll / vscroll | grid.view | — |