PGrid docs

A virtualized JavaScript data grid that gets out of your way.

PGrid is a small, extensible data grid for the browser. It renders only what's visible, freezes panes on any side, and treats every built-in feature — selection, editing, copy/paste, formatting — as an extension you can replace or compose.

Get started → Browse samples View on GitHub

Quick example

A working grid in fewer than 25 lines.

import { PGrid } from '@panitw/pgrid';
import '@panitw/pgrid/styles';

const grid = new PGrid({
    rowHeight: 32,
    columnWidth: 130,
    selection: { cssClass: 'cell-selected' },
    editing: true,
    autoUpdate: true,
    columns: [
        { id: 0, field: 'name',  title: 'Name',  width: 180, editable: true },
        { id: 1, field: 'email', title: 'Email', width: 240 },
        { id: 2, field: 'role',  title: 'Role',  width: 140 }
    ],
    headerRows: [{ i: 0, cssClass: 'grid-header' }],
    dataModel: {
        format: 'rows',
        fields: ['name', 'email', 'role'],
        data: [
            { name: 'Ada Lovelace',  email: 'ada@example.com',   role: 'Engineer' },
            { name: 'Linus Torvalds', email: 'linus@example.com', role: 'Manager'  }
        ]
    }
});

grid.render(document.getElementById('grid'));

Features

Every feature has a focused, runnable demo. Click any card to see it live.

Virtualized rendering
Only visible cells exist in the DOM. Handles tens of thousands of rows.
Freeze panes
Pin leading columns and top/bottom rows. 6-pane layout.
Selection & keyboard
Click, arrow, Tab, scroll-to-cell.
Inline editing
Built-in text editor — Enter, Tab, ESC, Delete.
Custom editors
Dropdowns, date pickers, anything you build.
Copy / paste
Range copy/paste, spreadsheet-compatible TSV.
Cell formatters
Pills, currency, progress bars — any HTML.
Checkbox columns
Boolean fields render as live checkboxes.
Text overflow
Ellipsis, wrap, or clip. Cascaded resolution.
Column resize
Drag-to-resize headers with min/max bounds.
Themes
Default, compact, spreadsheet, dark — toggled by one CSS class.
Multi-row headers
Grouped column titles with two header rows.
Search & filter
Regex filter; restrict to specific fields.
Dynamic data
Add, insert, remove. Auto re-render.
Conditional editing
Lock cells dynamically with a hook.
Custom extensions
Hook into render, update, key events.
Kitchen sink
Every feature wired together.

Why PGrid?