Configuration

Every option you can pass to new PGrid(config), with examples.

Top-level options

Key	Type	Default	Description
`rowHeight`	`number`	`32`	Default row height in pixels.
`columnWidth`	`number`	`100`	Default column width in pixels.
`headerRowCount`	`number`	`1`	Number of rows treated as headers.
`columns`	`Column[]`	`[]`	Column definitions. See below.
`headerRows`	`Row[]`	`[]`	Per-header-row config (CSS, height, etc).
`rows`	`Row[]`	`[]`	Per-data-row overrides. See below.
`cells`	`Cell[]`	`[]`	Per-cell overrides. See below.
`dataModel`	`object`	—	How to load your data. See Data.
`freezePane`	`object`	—	`{ left, top, bottom }` — see Freeze panes.
`extensions`	`Extension[]`	`[]`	Custom extensions. See Extensions.

Feature toggles (each loads a built-in extension when truthy):

Key	Type	Description
`selection`	`{ cssClass }`	Click + keyboard cell selection. Demo
`editing`	`true`	Inline text editor. Demo
`copypaste`	`true`	Range copy/paste. Demo
`autoUpdate`	`true`	Re-render when data changes.
`columnFormatter`	`true`	Honor `column.formatter`. Demo
`columnResize`	`{ minWidth, maxWidth }`	Drag-to-resize headers. Demo
`textOverflow`	`'ellipsis' \| 'wrap' \| 'clip'`	Default overflow mode. Demo

Columns

A column definition supports the following keys.

Key	Type	Description
`id`	`number`	Unique id; the array index is used if omitted.
`field`	`string`	Key in your data row.
`title`	`string`	Header label (HTML is allowed).
`width`	`number`	Column width in pixels.
`cssClass`	`string`	Class added to every cell in this column.
`editable`	`boolean`	Allow inline editing. Requires `editing: true`.
`resizable`	`boolean`	Allow column resize. Defaults to `true` when `columnResize` is on.
`textOverflow`	`'ellipsis' \| 'wrap' \| 'clip'`	Override the grid default for this column.
`editor`	`{ attach, clear }`	Custom editor. See Extensions.
`formatter`	`{ render, update? }`	Cell renderer. See demo.

columns: [
    { id: 0, field: 'id',     title: 'ID',     width: 100, cssClass: 'col-id' },
    { id: 1, field: 'name',   title: 'Name',   width: 180, editable: true },
    { id: 2, field: 'salary', title: 'Salary', width: 130, cssClass: 'col-money',
        formatter: {
            render: e => e.cellContent.textContent = '$' + (e.data || 0).toLocaleString()
        }
    }
]

Rows

Per-data-row overrides — typically used to apply CSS classes or set per-row height. Match by zero-based data row index i.

rows: [
    { i: 0, cssClass: 'highlight-row', height: 48 },
    { i: 5, cssClass: 'forecast-row' }
]

Cells

Per-cell overrides match by row + column coordinates.

cells: [
    { r: 0, c: 2, cssClass: 'subtotal-cell', editable: false }
]

Headers

By default the grid has one header row. Increase headerRowCount for multi-row headers, then style each via headerRows.

{
    headerRowCount: 2,
    headerRows: [
        { i: 0, cssClass: 'header-group', height: 32 },
        { i: 1, cssClass: 'header-leaf',  height: 28 }
    ]
}

Freeze panes

The grid lays out as six panes: top-left / top / left / center / bottom-left / bottom. Freezing leading columns or top/bottom rows pins them while the rest scrolls.

freezePane: {
    left: 2,        // first 2 columns stay fixed when scrolling horizontally
    top: 0,         // additional fixed rows beyond the header
    bottom: 1       // last row stays fixed (e.g. a totals row)
}

Live demo: Freeze panes.

Feature toggles

Each toggle loads a built-in extension. They're opt-in so you only pay for what you use.

{
    selection: { cssClass: 'cell-selected' },
    editing: true,
    copypaste: true,
    autoUpdate: true,
    columnFormatter: true,
    columnResize: { minWidth: 60, maxWidth: 400 },
    textOverflow: 'ellipsis'
}

For boolean checkbox columns, also load the named extension:

import { PGrid, CheckboxColumnExtension } from '@panitw/pgrid';

new PGrid({
    /* … */
    extensions: [new CheckboxColumnExtension()]
});

Live demo: Checkbox column.

← Previous

Getting Started

Working with Data