VanillaGrid

A tiny dependency‑free data grid with:

• Sort, filter (text/RegExp), pagination, group‑by (sum/min/max)
• Tree (hierarchical) rows with lazy loading
• Remote/server‑side paging, sorting, filtering
• Export to CSV/Markdown and Markdown table ingestion
• Column visibility menu and checkbox row selection

Quick start

Serve locally, then open in a browser:

npm install
npm start
# then visit http://127.0.0.1:8000/

Tip: Opening demo.html directly works for most features, but the Markdown loader uses fetch(), which requires serving via HTTP.

Build

Requires Node.js and npm.

npm install
npm run build

Outputs minified assets to dist/:

• dist/vanillagrid.min.js
• dist/vanillagrid.min.css

Use

Include the minified assets in your page:

<link rel="stylesheet" href="dist/vanillagrid.min.css" />
<script src="dist/vanillagrid.min.js"></script>

Then instantiate:

const grid = new VanillaGrid('#el', { data, columns });

Examples:

• Selection + Columns menu

const grid = new VanillaGrid('#el', {
  data,
  selectable: true,
  columnsMenu: true,
  columns: [
    { key: 'name', label: 'Name', sortable: true },
    { key: 'price', label: 'Price', type: 'number', sortable: true },
  ],
  onSelectionChange: rows => console.log('Selected', rows.length)
});

Options (high‑level)

• columns: Array of column defs { key, label, type, sortable, filterable, format, render, aggregations, link, image, button }.
• selectable: Adds a checkbox column and exposes getSelectedRows() / clearSelection().
• columnsMenu: Shows a simple Columns menu in the toolbar to toggle visibility.
• tree: { enabled, childrenKey, indent, lazy, initiallyExpanded, hasChildrenKey }.
• serverPagination|serverSorting|serverFiltering: Enable with loadPage(params).
• exporting: { enabled, formats:['csv','md'], scope:'page'|'all', filename }.

See demo.html for basic, tree, remote, Markdown, and selection examples.

Run Locally

Serve the repo root (auto-routes to demo.html):

npm start
# custom: npm start -- --port 8080 --host 0.0.0.0