vastgrid

100,000 made-up orders, generated in your browser. Open a column’s menu (▾) to sort, filter or see its statistics, drag across cells to see their count, sum and average below, and press ⌘/Ctrl+F to find. The demo also has a table of a billion rows.

npm install vastgrid

import { ArraySource, DataGrid } from "vastgrid";
import "vastgrid/styles.css";

const source = new ArraySource({
  columns: ["name", "born", "field"],
  rows: [
    ["Ada Lovelace", 1815, "Mathematics"],
    ["Grace Hopper", 1906, "Computer science"],
  ],
});

export function App() {
  return (
    <div style={{ height: 600 }}>
      <DataGrid source={source} />
    </div>
  );
}

For files on disk, vastgrid-duckdb serves them from Node.js with DuckDB: see Files on a server.

Any size

Rows are read as you scroll, a block at a time. A 1.4 GB Parquet file with 100 million rows opens in 20 ms; the first rows of a 735 MB CSV appear in 0.15 s while the rest loads.

Fast

Cells are drawn on a canvas: about 2 ms per frame for 1,000+ visible cells. Scrolling goes past the browser’s element-size limit, to billions of rows.

A spreadsheet's way of working

Range selection with the mouse and Excel’s keyboard shortcuts, copy as TSV, HTML or Markdown, multi-column sort, filters, search, find, column statistics and a summary of the selection.

Bring your engine

The grid talks to a TableSource: the DuckDB server engine for files, ArraySource for data in memory, or your own.

Safe by construction

The DuckDB engine only reads files whose real location is inside the folders you allow, and that cannot change while it runs. All SQL is generated; values are always parameters.

Japanese and English

Built-in texts in both languages, light and dark themes through CSS variables, ARIA grid semantics and full keyboard operation.

vastgrid is at 0.x: its API may change in a minor release until 1.0. The changelog lists every release.