@smart-grid/js

Monorepo / npm release 1.2.0 (stable 1.x); depends on @smart-grid/core ^1.2.0.

What's new in 1.2.0

• floatingFilters, autoSizeColumns, enableColumnResize on createSmartGrid options.
• Column resize handles, auto-width on load, aria-live sort/filter announcements.
• Tool panel collapsed by default; header filter types; pinning and HTML cellRenderer. See CHANGELOG.md.

Vanilla JavaScript / TypeScript Smart Grid: createSmartGrid mounts a full DOM grid (toolbar, table, tool panel, pagination) into any HTMLElement, driven by the same options model as React and Angular.

Live demo & docs: https://smart-grid-mu.vercel.app/

No framework required. Ideal for legacy pages, micro-frontends, or SSR shells that hydrate a container.

Install

npm install @smart-grid/js @smart-grid/themes

Usage

import { createSmartGrid } from "@smart-grid/js";
import "@smart-grid/themes/smart-grid.css";

const el = document.getElementById("grid-root");
if (!el) throw new Error("Missing #grid-root");

const grid = createSmartGrid(el, {
  theme: "smart-light",
  rowData: [
    { id: "1", city: "Berlin", temp: 12 },
    { id: "2", city: "Oslo", temp: 4 }
  ],
  columnDefs: [
    { field: "city", headerName: "City", sortable: true, filter: true },
    { field: "temp", headerName: "°C", sortable: true }
  ],
  pagination: true,
  pageSize: 10,
  rowSelection: "multiple",
  showToolPanel: true
});

// Push new data without remounting
grid.update({
  rowData: [
    { id: "1", city: "Berlin", temp: 12 },
    { id: "2", city: "Oslo", temp: 4 },
    { id: "3", city: "Lisbon", temp: 18 }
  ]
});

// Optional: listen for built-in DOM events
el.addEventListener("smart-grid:selection", (e: Event) => {
  const detail = (e as CustomEvent<unknown[]>).detail;
  console.log("selection", detail);
});

// When done
// grid.destroy();

Toolbar & pagination UI

Pass toolbar and paginationUi on createSmartGrid options (or grid.update({ ... })). Same GridToolbarOptions / GridPaginationOptions as React and Angular.

createSmartGrid(el, {
  rowData,
  columnDefs,
  pagination: true,
  toolbar: { buttonDisplay: "both" },
  paginationUi: { buttonDisplay: "icon", maxPageButtons: 5 }
});

Docs: Toolbar & pagination UI.

Instance API

| Method / property | Description | | --- | --- | | update(partial) | Merge new options and re-render (e.g. new rowData). | | destroy() | Remove listeners and clear the container. | | exportCsv() | Current dataset as CSV string (respects tree/master-detail modes). | | features | Namespace of pure helpers (charts, Excel, grouping, …) mirroring @smart-grid/core. |

Custom events include smart-grid:selection, smart-grid:csv, smart-grid:column-order, smart-grid:row-order, and smart-grid:range-selection (see implementation for payloads).

Related packages

• @smart-grid/core
• @smart-grid/react
• @smart-grid/angular
• @smart-grid/themes

Links

• Homepage / demo: smart-grid-mu.vercel.app
• Repository: github.com/rajkishorsahu89/smart-grid
• Issues: github.com/rajkishorsahu89/smart-grid/issues

License

MIT