PGrid docs

PGrid Demos

A virtualized, extensible JavaScript data grid. Each demo focuses on one feature so you can see the moving parts in isolation.

Getting Started
01

Basic Grid

Minimum viable setup — columns, header row, and data. No extensions.

02

Selection & Keyboard

Click to select. Arrow keys, Tab, programmatic scroll-to-cell.

03

Freeze Panes

Lock leading columns and top/bottom rows. 6-pane layout.

Editing
04

Inline Editing

Built-in text editor — double-click, Enter, Tab, ESC, Delete.

05

Custom Editors

Dropdowns, date pickers, star ratings. Any HTML you want.

06

Conditional Editable

Lock cells dynamically with the cellEditableCheck hook.

07

Copy / Paste

Range copy/paste. Tab-separated for spreadsheet interop.

Display
08

Cell Formatters

Pills, currency, progress bars, stars — column-level renderers.

09

Checkbox Column

Boolean fields rendered as live, two-way checkboxes.

10

Text Overflow

Ellipsis, wrap, or clip — cascaded per cell, column, or row.

11

Column Resize

Drag-to-resize headers with min/max bounds.

Styling
12

Themes

Default, compact, spreadsheet, dark — switched by toggling a single CSS class.

13

Multi-row Headers

Grouped column titles with two header rows and visual seams between groups.

Data
14

Search & Filter

Filter visible rows by regex; restrict to specific fields.

15

Dynamic Data

Add, insert, remove. Auto-update view with bulk freeze/unfreeze.

Extending
16

Custom Extensions

Zebra striping, row hover, indicator stripes — three small examples.

17

Kitchen Sink

Every feature wired together in one grid.