Production Readiness

Review ZenGrid package status, support boundaries, and adoption checks before using it in production.

ZenGrid is suitable for prototypes, internal tools, and early production evaluation when your team can validate the current API against your own workload. Treat the current release as an active project with evolving framework integrations.

Supported Runtime

• Modern browsers with DOM APIs.
• Client-side rendering only. Initialize the grid after a real container element exists.
• Node.js 18 or later for local development and builds.
• TypeScript 5.0 or later is recommended.

ZenGrid is not a server-rendered component. In SSR frameworks, load it on the client side.

if (typeof window !== 'undefined') {
  const { Grid } = await import('@zengrid/core');
  const container = document.getElementById('grid');

  if (container) {
    const grid = new Grid(container, {
      rowCount: 1000,
      colCount: 3,
      rowHeight: 36,
      colWidth: 160,
    });

    grid.setData(Array.from({ length: 1000 }, (_, row) => [
      `Cell ${row},0`,
      `Cell ${row},1`,
      `Cell ${row},2`,
    ]));
    grid.render();
  }
}

Framework Status

• JavaScript and TypeScript apps can use @zengrid/core directly.
• React and Vue can integrate through refs and lifecycle hooks using @zengrid/core.
• Angular has a published wrapper package, but treat Angular-specific APIs as beta until your app verifies packaging, forms behavior, and change detection boundaries.
• Svelte and other framework-specific wrappers are not production APIs yet.

Package Dependencies

@zengrid/core has runtime dependencies. Install it through your package manager and let the package manager resolve transitive dependencies.

npm install @zengrid/core

Adoption Checklist

Before shipping ZenGrid in a critical workflow:

• Verify your copied examples compile against the installed npm version.
• Test the exact browsers and devices your users rely on.
• Exercise large datasets with realistic row height, column count, renderers, editors, and filters.
• Confirm keyboard navigation, focus handling, and screen reader behavior for your accessibility target.
• Confirm SSR pages only initialize ZenGrid on the client.
• Pin package versions in production apps and review release notes before upgrades.
• Keep a rollback path for major grid workflows.

Known Limits To Validate

• Very custom renderers and editors can dominate runtime cost even when the grid virtualizes rows.
• Backend mode depends on your onDataRequest latency, cancellation, and pagination behavior.
• Advanced plugin APIs expose lower-level internals and can change faster than the main Grid instance API.
• Documentation examples prefer the current public API. If you find older constructor forms or low-level plugin registry snippets elsewhere, use the Grid constructor form shown in these docs instead.

Recommended Production Shape

Use the Grid instance and namespaced APIs in application code.

import { Grid, type ColumnDef } from '@zengrid/core';
import '@zengrid/core/dist/styles.css';

const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 80, sortable: true },
  { field: 'name', header: 'Name', width: 220, sortable: true, filterable: true },
  { field: 'status', header: 'Status', width: 140, filterable: true },
];

const grid = new Grid(document.getElementById('grid')!, {
  rowCount: 0,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  columns,
  enableSelection: true,
  enableKeyboardNavigation: true,
});

grid.setData([]);
grid.render();

grid.sort.toggle(1);
grid.filter.set(2, 'equals', 'Active');
grid.on('selection:change', ({ ranges }) => {
  console.log(ranges);
});