Fixing AG Grid Horizontal Scroll Performance in Angular

The Problem: Horizontal Scroll Lag

When working with AG Grid in Angular with many columns, you might experience janky horizontal scrolling. In our case, each horizontal scroll movement was taking ~40ms, causing visible lag and poor user experience.

Understanding Column Virtualization

Let me explain how AG Grid’s column virtualization works using a simple analogy:

How AG Grid Normally Works (Default Behavior)

Imagine you have a grid with 100 columns but your screen can only show 10 columns at a time.

• Virtualization = only render what’s visible
• AG Grid creates cell components only for those 10 visible columns
• When you scroll horizontally:
  • It destroys the 10 columns that go off-screen
  • It creates new 10 columns that appear on-screen

This is usually good because you don’t waste memory rendering all 100 columns at once.

---

Why This Is Slow in Angular

In Angular, each cell renderer is a real Angular component with its own lifecycle.

The problem:

1. Destroying and recreating Angular components is expensive
2. Every horizontal scroll triggers:
   • Destroy components for columns leaving the screen
   • Create new Angular components for columns coming in
3. With many columns or complex cell renderers, this blocks the UI

Result: Scrolling lag and jank

---

The Solution: suppressColumnVirtualisation

gridOptions: GridOptions = {
  suppressColumnVirtualisation: true
  // ... other options
};

What This Does:

• Renders all columns at once, even if they’re off-screen
• Never destroys or recreates columns during horizontal scrolling
• Smooth scrolling because Angular doesn’t constantly destroy/recreate components

Trade-offs:

Aspect	With Virtualization (default)	Suppressed Virtualization
Columns in DOM	Only visible ones (~10)	All columns (100+)
On Scroll	Destroy + Recreate	No destruction
Memory Usage	Lower	Higher
Initial Render	Faster	Slower
Scroll Performance	Can lag with Angular	Smooth
Best For	Simple renderers, many columns	Angular components, complex renderers

---

Performance Results

Our real-world results after enabling suppressColumnVirtualisation: true:

Before: ~40ms per horizontal scroll
After:  ~13ms per horizontal scroll
Improvement: 3x faster!

---

Visual Comparison

With Virtualization (Default)

[Visible Columns: 1-10] [Hidden: 11-100]
     ↓ Scroll right ↓
Destroy 1-10, Create 11-20 (Expensive in Angular!)

With suppressColumnVirtualisation: true

[All Columns: 1-100 rendered once]
     ↓ Scroll right ↓
Just scroll, no recreation (Smooth!)

---

When to Use This Setting

Use suppressColumnVirtualisation: true when:

• You have horizontal scroll lag
• Using Angular cell renderers
• Complex cell components
• Moderate number of columns (<100)
• Scroll performance is priority

Don’t use it when:

• You have 500+ columns
• Memory is constrained
• Simple cell renderers (strings/numbers)
• Initial render time is critical

---

Additional Performance Tips

1. Row Virtualization — Keep this enabled (don’t suppress)
2. Use onlyEditWhenEditable — Reduces component overhead
3. Implement AgRendererComponent properly — Avoid unnecessary change detection
4. Use OnPush change detection — In your cell components
5. Avoid complex templates — In frequently rendered cells

---

Conclusion

If you’re experiencing horizontal scroll lag in AG Grid with Angular, suppressColumnVirtualisation: true might be your silver bullet. It trades initial memory for smooth scrolling performance by preventing Angular from constantly destroying and recreating components.

Remember: Profile first, optimize second. Use Chrome DevTools Performance tab to confirm where your bottleneck is before applying this fix.

---

Related Resources

• AG Grid Documentation
• Angular Performance Guide
• AG Grid Performance Tips