Use the shared Ace Grid runtime from Web Component
Ace Grid keeps rows, columns, feature configuration, and grid actions consistent across framework hosts. The @ace-grid/wc package provides the Web Component integration while Core, Pro, and Enterprise define the capability tier.
Start with the workflow, then choose the tier
Use Core for editable virtualized grid foundations. Add Pro for formulas, validation, Excel I/O, grouping, tree data, sparklines, spanning, and advanced filtering. Use Enterprise when the application needs server row model, charts, pivot, or master-detail workflows.
Keep Web Component application state in control
Pass rows, columns, layout, and feature props through the Web Component host, then handle edits and grid actions in normal application state. Test representative keyboard, editing, filtering, selection, and loading behavior before adopting advanced tiers.
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 a semantic table when the data is small, read-only, and does not need grid interaction.
- Verify framework wrapper APIs and required tier behavior with a representative proof of concept.
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.