PGrid docs

Getting Started

Install PGrid, render your first grid, and learn what each part of the configuration is doing.

Install

PGrid ships as an ES module on npm.

npm install @panitw/pgrid

Or load it directly from a CDN — see Use without a bundler.

Your first grid

Create a container element and instantiate PGrid.

<!-- index.html -->
<link rel="stylesheet" href="node_modules/@panitw/pgrid/dist/pgrid.css">
<div id="grid" style="width: 100%; height: 400px;"></div>
<script type="module" src="./app.js"></script>
// app.js
import { PGrid } from '@panitw/pgrid';

const grid = new PGrid({
    rowHeight: 32,
    columnWidth: 130,
    columns: [
        { id: 0, field: 'name',  title: 'Name',  width: 180 },
        { id: 1, field: 'email', title: 'Email', width: 240 },
        { id: 2, field: 'role',  title: 'Role',  width: 140 }
    ],
    headerRows: [{ i: 0 }],
    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'));
Important: the container must have a defined height. PGrid fills its container, so a parent with height: 0 produces an invisible grid.

Live demo: Basic grid sample.

Walkthrough

Let's break down what each part of the configuration does.

Columns

The columns array describes each column's field (key into your data), title (header label), and optional width. The first column has id: 0, the second id: 1, etc.

Header rows

headerRows declares the rows above the data. Each entry has an index i and optional styling. Most grids only need a single header row at index 0.

Data model

The dataModel describes how to interpret your data. Two formats are supported:

Render

grid.render(element) mounts the grid into the given container. After mount, you can interact with the grid through grid.data, grid.model, and grid.view (see the API reference).

Styling

PGrid's stylesheet ships at @panitw/pgrid/dist/pgrid.css. It defines the structural layout (cells, panes, scrollbars) and can be themed via your own CSS.

Cell-level styling is applied through cssClass on columns, rows, and individual cells:

columns: [
    { id: 0, field: 'name',   title: 'Name',   cssClass: 'col-name' },
    { id: 1, field: 'salary', title: 'Salary', cssClass: 'col-money' }
]
.col-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

For a worked example, see Cell formatters.

Use without a bundler

PGrid is also published as a UMD bundle. Drop two files into a page and the global PGrid namespace becomes available.

<link rel="stylesheet" href="https://unpkg.com/@panitw/pgrid/dist/pgrid.css">
<script src="https://unpkg.com/@panitw/pgrid/dist/pgrid.js"></script>
<div id="grid" style="height: 400px;"></div>
<script>
    const grid = new PGrid.PGrid({ /* same config as above */ });
    grid.render(document.getElementById('grid'));
</script>

Next steps

← Previous
Home