AntD Tables Lag? Try This One Simple Virtualization Fix

#react #performance #antdesign #webdev

🚫 Problem: AntD Tables Aren’t Fast By Default

Ant Design is a solid UI framework — until you throw large datasets into its default table.

We were rendering 300+ rows in a dashboard. Scroll lag, janky performance, and heavy DOM loads kicked in fast. It looked good… but felt broken.

✅ Solution: Virtualization with `react-window`

We swapped out the AntD <Table /> component and replaced it with a react-window virtualized list. The trick? Keep using AntD’s column logic to retain the look and feel.

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    {renderRow(data[index])}
  </div>
);

<List
  height={400}
  itemCount={data.length}
  itemSize={35}
  width="100%"
>
  {Row}
</List>

This gave us:

Consistent UI
Way fewer DOM nodes
Smooth scrolling even with big datasets

📊 Results

~90% fewer DOM nodes
Scroll FPS doubled
Page feel instant again

💡 Takeaway
UI libraries like Ant Design give you power - not always performance. When dealing with big data, virtualize early. It's a one-time switch that saves your UX.

🔧 Bonus Tips