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.
Use a copyable migration register
Track grid pattern, route, business owner, AG Grid version, source APIs, custom renderers, editors, row model, persisted state, exports, Ace Grid target tier, adapter diagnostics, manual work, acceptance-test status, rollout state, and rollback owner. Group identical patterns so one verified migration can be reused. This register is the working migration plan and should remain current through cleanup.
Set phase exit criteria
Inventory exits when every production pattern has an owner and complexity rating. Translation exits when each diagnostic is classified as supported, manual, unsupported, Pro, or Enterprise. Verification exits when task-based tests pass against representative data. Rollout exits when monitoring, user acceptance, and rollback are complete. Cleanup begins only after the old runtime is no longer required for recovery.
Choose a representative first screen
Select a non-critical screen that still includes real editing, filtering, sorting, selection, a custom cell, saved state, and one server interaction if those patterns exist elsewhere. A toy grid proves too little, while a mission-critical screen creates unnecessary rollout risk. Keep both implementations available behind a feature flag until the acceptance tasks pass in representative production conditions.
Verify persistence, export, and cleanup
Test existing saved views or decide how they reset, including column order, width, visibility, filters, sorting, and route state. Verify export scope and protected fields. After rollback is no longer required, remove obsolete packages, adapters, styles, flags, and duplicate tests, and confirm the old runtime is absent from the production bundle.
Record production evidence
During rollout, monitor JavaScript errors, failed requests, edit rejection, task completion, support reports, and performance on the representative screen. Compare results with the previous implementation where possible. Keep the feature flag and rollback owner until the agreed observation period ends. Production acceptance should be based on user tasks and system behavior, not only an absence of crashes.
Estimate by reusable pattern
Group screens into read-only, editable, server-backed, analytical, and heavily customized patterns. Estimate and verify one representative instance of each pattern before multiplying effort across routes. Ten screens that share a column and state contract may be cheaper than one screen with custom editors, saved views, server queries, and exports.
Keep unsupported behavior explicit
Do not hide adapter warnings behind wrapper code simply to make the migrated screen compile. Record whether each unsupported behavior is redesigned, deferred, replaced, or a reason to retain AG Grid. Product owners should approve workflow changes, while engineers own the implementation and test evidence.
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} />
);
}