Install the Svelte binding and runtime
For Core, install @ace-grid/svelte, @ace-grid/core, svelte, react, and react-dom. The Svelte component hosts the shared Ace Grid runtime rather than reimplementing the grid natively. Include that runtime boundary when evaluating bundle size and framework policy.
Import the tier you intend to ship
Use @ace-grid/svelte/core, @ace-grid/svelte/pro, or @ace-grid/svelte/enterprise. Start with Core for editing, filtering, selection, and virtualization. Move up only when the screen requires spreadsheet or server-backed features.
Use Svelte props and stable record identity
Pass data, layout, and feature groups directly to the component. Keep remote requests, permissions, and authoritative saves in the application. When rows change, preserve stable IDs so selection, edits, and virtualized cells continue to represent the same business records.
Verify lifecycle and package cost
Test mounting, route changes, teardown, a custom cell, editing, keyboard navigation, and loading in the actual Svelte application. Measure the production bundle with React dependencies. If the product requires a Svelte-native runtime, use a native alternative rather than treating the wrapper as one.
Product evidence
Dedicated Svelte binding
@ace-grid/svelte exposes tier-specific entry points and a Svelte component while delegating grid behavior to the selected Ace Grid runtime.
Svelte Ace Grid example
<script lang="ts">
import AceGrid from "@ace-grid/svelte/core";
const data = { rows, columns };
const layout = { width: 960, height: 520 };
</script>
<AceGrid {data} {layout} />How to evaluate it
Limitations and tradeoffs
- Choose a native Svelte grid when a React-backed runtime conflicts with bundle or architecture requirements.
- Use a semantic table for small, read-only datasets.
Common questions
Does Ace Grid have a dedicated Svelte package?
Yes. @ace-grid/svelte exposes the Ace Grid runtime through the Svelte host while preserving the shared grid configuration model.