Register the selected runtime once
Install @ace-grid/wc with @ace-grid/core, @ace-grid/pro, or @ace-grid/enterprise plus react and react-dom. Pass the selected Grid implementation to defineAceGridElement, then register a stable custom-element name before the first element is created.
Pass objects through properties
Rows, columns, callbacks, and feature configuration are structured values, so assign them through the element's props property rather than HTML attributes. Keep server requests, permissions, and persistence in the host application and replace props deliberately when state changes.
Use the boundary where it earns its cost
The custom element is useful for micro-frontends, server-rendered shells, gradual framework migration, or unsupported frontend hosts. It still uses the shared React runtime internally. For a small static table, native HTML remains simpler; for a framework with a dedicated Ace Grid binding, that binding usually provides a more natural developer experience.
Test host integration
Verify element registration, teardown, events, focus movement, sizing, theming, and property updates in the actual host. Confirm that server rendering does not instantiate browser-only code too early and measure the complete production bundle.
Product evidence
Framework-neutral custom element
@ace-grid/wc registers a custom element around the selected Core, Pro, or Enterprise Grid runtime.
Web Component Ace Grid example
import { defineAceGridElement } from "@ace-grid/wc";
import { Grid } from "@ace-grid/core";
defineAceGridElement("ace-grid", { Grid });
const grid = document.querySelector("ace-grid");
grid.props = {
data: { rows, columns },
layout: { width: 960, height: 520 },
virtual: { enableVirtualization: true },
};How to evaluate it
Limitations and tradeoffs
- Use the dedicated Angular, Vue, or Svelte binding when it provides a clearer integration for that application.
- Do not choose the Web Component wrapper when eliminating React runtime dependencies is required.
Common questions
Does Ace Grid have a dedicated Web Component package?
Yes. @ace-grid/wc exposes the Ace Grid runtime through the Web Component host while preserving the shared grid configuration model.