How we chose our new Data Grid Library

Choosing the right DataGrid component can have a big impact on your app’s user experience especially when working with large datasets, complex interactions, and high performance needs. Our team recently evaluated several options for use in our PerformanceCentre and Electric Design System (EDS) projects. Here's a look at our approach and why we ultimately chose AG Grid.

---

The Challenge: Beyond Just Rows and Columns

DataGrids might seem simple at first—just display data in rows and columns, right? But modern applications require much more:

• Complex interactions: Column resizing, sorting, filtering, grouping

• Performance at scale: Handling thousands of rows without lag

• Customization: Matching your brand and design system

• Design System Integration – Visual consistency with our system theme and Chakra UI-based tokens

• Accessibility: WCAG 2.0 AA compliance for all users

• Strong Developer experience: Good documentation and community support

Our applications required all of these features and more, so we knew we had to be thorough in our evaluation.

Our Evaluation Framework

Rather than making a gut decision, we developed a weighted scoring system based on six key criteria:

1. Customizability

Why it matters: Every application has unique design requirements. We needed to ensure whatever solution we chose could adapt to our Figma designs without fighting against opinionated styling.

What we looked for:

• Theme support

• Custom cell rendering (preferably with React)

• Custom filters, tooltips, and headers

• Custom edit controls

• Built-in localization support

Scoring scale: From limited color/typography customization (1) to full control over typography, spacing, and breakpoints with built-in localization (5).

2. Completeness

Why it matters: Feature gaps mean custom development, which increases timeline and maintenance burden.

Essential features we evaluated:

• Column operations (resizing, visibility, pinning, grouping)

• Sorting and filtering (including advanced operators and AND/OR logic)

• Row operations (selection, dragging, grouping)

• Editing capabilities (full row, multi-cell, validation, async)

• Data handling (pagination, infinite scroll, server-side)

• Export functionality (Excel, CSV)

• Advanced features (master-detail, nested rows, charts)

3. Accessibility & Responsiveness

Why it matters: Accessibility isn't optional, and mobile usage continues to grow.

Requirements:

• WCAG 2.0 AA compliance

• Keyboard navigation and screen reader support

• Responsive column sizing

• Mobile-optimized layouts

4. Documentation & Support

Why it matters: Great libraries with poor documentation become development bottlenecks.

We evaluated whether engineers could use the library effectively without prior experience, quality of documentation, and availability of community support.

5. Code Quality

Why it matters: We need to extend and maintain our implementation long-term.

Deal breakers:

• No TypeScript support

• No React support

Key considerations:

• Performance with large datasets

• Code structure and maintainability

• Extensibility for custom requirements

6. Vendor Reliability & Adoption

Why it matters: We're building for the long term and need confidence in the solution's future.

Evaluation criteria:

• Usage by major brands/organizations

• How long the vendor has been established

• Financial backing and sustainability

• GitHub metrics (stars, downloads, commit frequency)

The Contenders

We evaluated eight major DataGrid solutions:

• AG Grid – High-performance grid with extensive enterprise features

• ka-table – Lightweight React table

• Infinite Table – Modern, flexible DataGrid

• Syncfusion Grid – Enterprise-focused suite

• Bryntum Grid – Commercial grid with rich features

• MUI X Data Grid – From the Material UI ecosystem

• RevoGrid – Excel-style table

• glide-data-grid – Virtualized and performant

The Winner : AG Grid

After evaluating each option against our criteria, AG Grid emerged as the clear winner.

Here's why:

AG Grid was chosen as the best DataGrid solution due to its exceptional customizability, feature completeness, and enterprise-grade performance. It offers extensive customization options, meets all feature requirements, and performs well with large datasets. The grid is supported by strong documentation, an active community, and commercial support. Additionally, it provides clean architecture, TypeScript support, and production-ready code quality.

Implementation Insights : Building Our DataGrid Wrapper

AG-Grid provided the performance and flexibility we required, but to align it with our design system, we created a custom wrapper with theming and key enhancements for a consistent look and feel across applications.

• Custom formatters ensure a consistent user experience (UX)

We created reusable formatters to make sure data looks the same in our grid. They manage common types like dates, numbers, currencies, percentages, and enums. Special formatters handle links, status tags, shortening text, and expandable rows. An auto-formatter smartly chooses the right format based on the type of value.

• Theming: Integrating with Electric Tokens

Our design system uses Chakra UI, but AG-Grid uses native CSS variables. To connect the two, we mapped Electric design tokens into AG-Grid's styling layer dynamically. This allows for:

• Aligning with our global brand

• Controlling spacing, colors, border radii, and typography.

• Enhanced UX States

We customized AG-Grid states to better match our design system—replacing default spinners with skeleton loaders, showing branded no-data and error states, manually setting header tooltips, and adding cell-level error indicators with contextual tooltips.

• Performance Optimizations

We concentrated on performance improvements by using server-side data loading for large datasets and optimizing column definitions for better rendering. We effectively utilized AG-Grid's built-in virtualization. Key optimizations included:

• Selective module loading: We reduced the bundle size, improved initial load performance, and gained better control over which features to show.

• Memoized formatters & props: Prevented unnecessary re-renders.

• Ref-based columnDefs: Used static references for column definitions.

• Lazy loading features: We delayed loading Excel export and advanced filters. Integration with Existing Systems

• Feature Highlights of Our Wrapped DataGrid Component

• Wrapped for Consistency: We wrap AG-Grid within our DataGrid component to ensure consistent design and behavior across the platform (PC).

• Auto (autoFormatter) : Automatically detects data types.

• Bulk Actions Bar (via useBulkActionsBar) : Appears when rows are selected and adapts based on the action state, fully integrated with design tokens and icons.

• Filtering : Supports both text-based and multi-select filtering.

• Seamless Integration : AG-Grid integrates smoothly with our React architecture and design system, requiring minimal changes to existing patterns.

• AG-Grid Context Usage : Through AG-Grid’s context prop, we can inject services such as formatters, user permissions, or API helpers into custom cell renderers, ensuring minimal prop drilling.

• Persistent Grid State with Local Storage : Listens to grid events to auto-save preferences like column size, sorting, and filters. Restores the saved state from localStorage on component mount for a consistent experience.

• Key Takeaways for Your DataGrid Selection

1. Define your criteria upfront: Don't just look at features—consider customizability, documentation, and long-term maintainability.

2. Weight your criteria: Not all factors are equally important for your use case. Our emphasis on customizability and code quality might differ from yours.

3. Test with real data: Performance characteristics change dramatically with actual dataset sizes and complexity.

4. Consider the total cost of ownership: Initial licensing costs pale in comparison to long-term development and maintenance overhead.

5. Don't underestimate documentation quality: Poor docs will slow down your entire team.

The Results

Since implementing AG-Grid, we've seen :

• Improved user satisfaction with data interaction capabilities

• Faster development cycles for new grid-based features

• Better performance across all our data-heavy applications

• Reduced maintenance overhead compared to our previous custom solutions

| The Data Grid was more than just a tool — it became the foundation of our data-intensive workflows.|