AG Grid React migration

AG Grid React migration checklist for moving to Ace Grid

Use this migration checklist to identify the AG Grid APIs in use, translate supported configuration, and test every behavior that still needs manual review.

Open migration docs Read the AG Grid comparison

1. Inventory

Catalog every grid instance, package version, column definition, renderer, editor, value getter, filter, selection mode, pinned region, row model, chart, pivot, export, and server endpoint. Rank screens by complexity and business impact.

2. Translate and classify

Run @ace-grid/compat-ag on a representative client-side grid. Resolve each diagnostic as supported, manual, unsupported, Pro, or Enterprise. Rewrite custom React components deliberately instead of hiding them behind compatibility wrappers.

3. Test parity

Create acceptance tests for keyboard navigation, edits, validation, selection, sorting, filtering, column state, row identity, loading, errors, exports, and accessibility. Run both implementations against the same fixtures.

4. Roll out safely

Release one low-risk screen behind a flag, monitor errors and task completion, then expand by pattern. Preserve the old route or component until production behavior is accepted and define how data or state changes are rolled back.

Review data and state persistence

Check saved column order, width, visibility, filters, sorting, selection, and route state. Decide whether existing user preferences can be migrated or should reset with clear communication. Validate row IDs and server query parameters so a restored view addresses the same records. Persistence defects often appear after the main screen seems functionally complete.

Complete production cleanup

After rollout, remove obsolete adapters, styles, packages, feature flags, and duplicate tests only when rollback is no longer required. Update documentation and ownership. Monitor bundle size and license initialization to confirm the old runtime is not still shipped. Record lessons and reusable mappings before migrating the next pattern.

Product evidence

Compatibility diagnostics

@ace-grid/compat-ag translates supported AG Grid configuration, preserves source metadata, and reports unsupported options, manual work, and minimum tier requirements.

RequirementOwnerUser taskGateEvidenceNext action

Keyboard editingFrontendEdit and commitMandatoryPassingRetest invalid value

Server conflictPlatformResolve stale rowMandatoryReviewRun concurrent edit

Virtual scrollPerformanceFind row 50,000MandatoryPassingProfile target device

Excel pasteProductPaste invalid rangeWeightedMissingPrototype workflow

AG Grid React migration implementation

import { translateAgGridToAce } from "@ace-grid/compat-ag";
import { Grid } from "@ace-grid/core";

const migration = translateAgGridToAce({
  columnDefs,
  rowData,
  defaultColDef,
});

export function MigratedGrid() {
  return (
    <Grid {...migration.props} />
  );
}

Limitations and tradeoffs

Do not migrate a stable AG Grid implementation without a product, ownership, or commercial reason that justifies the work.
Do not treat compatibility output as proof that custom renderers, server behavior, accessibility, and saved state are production-equivalent.

Common questions

Is the AG Grid adapter a drop-in replacement?

No. It translates supported configuration and reports diagnostics. Custom components, Enterprise APIs, themes, server behavior, and unsupported options still require review and testing.

Which screen should be migrated first?

Choose a non-critical but representative screen containing real editing, filtering, selection, saved state, a custom cell, and one server interaction when those patterns matter elsewhere.

Sources

Reviewed June 12, 2026