mates-grid docs

mates-grid

Quick Start

Install mates-grid, own state with gridAtom, and render with RenderGrid. The parent drives columns, data, and config — the grid view only paints.

mates-grid is a peer of mates. It does not use mates-ui or mates-virtual — virtualization is built in.

Install

npm install mates-grid mates

Your first grid

Create the atom once (module scope or the outer component function). Pass it to RenderGrid. Updating grid.data or grid.config re-renders the view.

1 to 12 of 48 
import { renderApp } from "mates";
import { RenderGrid, gridAtom } from "mates-grid";
import "mates-grid/css";

const grid = gridAtom({
  columns: [
    { field: "name", pinned: "left", width: 180 },
    { field: "region", width: 120 },
    { field: "amount", width: 120, filter: "number" },
  ],
  data: people,
  getRowId: (row) => String(row.id),
  pagination: true,
});

renderApp(() => RenderGrid(grid), document.getElementById("app")!);