DEV Community

VS
VS

Posted on

React Data Grid Lite v1.2.4: Now with RTL Support + Full Virtualization!

#programming #javascript #react #webdev

A lightweight React data grid just got a powerful upgrade.

We're excited to announce the release of React Data Grid Lite v1.2.4, a major step forward in performance and accessibility. This version introduces Right-to-Left (RTL) support and both row and column virtualization — making it faster, more flexible, and even better suited for international audiences.

🌐 Right-to-Left (RTL) Support

Building applications for global users? v1.2.4 now natively supports RTL layouts out of the box.

What it means:

  • Text, columns, and UI elements align right-to-left automatically when RTL mode is enabled.
  • No more custom overrides or hacks for Arabic, Hebrew, or Persian UIs.
  • Just use the grid’s new enableRtl prop. 
<DataGrid
  columns={columns}
  data={rows}
  options = {{
  enableRtl: true,
}}
/>
Enter fullscreen mode Exit fullscreen mode

⚡ Row + Column Virtualization

With v1.2.4, we’ve introduced full two-dimensional virtualization—both rows and columns!

Benefits:

  • 🚀 Faster performance with large datasets
  • 📉 Lower memory usage
  • 📱 Better mobile rendering
  • 🧠 Smarter rendering logic: only the visible portion of your grid is in the DOM

React Data Grid Lite v1.2.4 includes smart virtualization — and it’s auto-enabled when your data exceeds a certain size:

✅ Auto-enabled when:

  • rows.length > 25
  • columns.length > 25

This means you get blazing-fast performance out of the box, without needing to configure anything.

🔄 Why it matters:

  • Only visible rows and columns are rendered
  • Reduces memory usage
  • Improves scroll performance, especially on mobile or lower-end devices

⚙️ Manual Virtualization Control

Want more control over when virtualization is applied? Use the virtualization option:

<DataGrid
  columns={columns}
  data={rows}
  options={{
    virtualization: true, // or false
  }}
/>
Enter fullscreen mode Exit fullscreen mode

Available options:

  • true: Forces virtualization, even for small datasets — great for testing or consistent behavior
  • false: Disables virtualization entirely — not recommended for medium or large datasets

Behind the scenes, virtualization is powered by a highly optimized scroll-aware rendering engine—meaning you can scale your grid without compromising user experience.

🧪 Example with Next.js

Here’s a minimal setup using Next.js:

npx create-next-app@latest react-data-grid-demo
cd react-data-grid-demo
npm install react-data-grid-lite
Enter fullscreen mode Exit fullscreen mode

Then in your pages/index.js:

import DataGrid from 'react-data-grid-lite';

export default function Home() {
  const columns = [
    { name: 'id', alias: 'ID' },
    { name: 'name', alias: 'Name' },
    { name: 'country', alias: 'Country' },
  ];

  const data = Array.from({ length: 1000 }, (_, i) => ({
    id: i + 1,
    name: `User ${i + 1}`,
    country: i % 2 === 0 ? '🇺🇸 USA' : '🇫🇷 France'
  }));

  return (
    <div>
      <DataGrid
        columns={columns}
        height= '80vh'
        width = '100%'
        data={rows}
        options={{
           virtualization: true
        }}
      />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

🛠️ How to Upgrade

If you're already using react-data-grid-lite, upgrading is simple:

npm install react-data-grid-lite@latest
Enter fullscreen mode Exit fullscreen mode

Or with Yarn:

yarn add react-data-grid-lite@latest
Enter fullscreen mode Exit fullscreen mode

✨ Final Thoughts

React Data Grid Lite continues to evolve with performance and developer experience in mind. Whether you're building complex admin dashboards or lightweight mobile views, v1.2.4 gives you the tools to build fast, accessible, and internationalized data grids.

Give it a spin and let us know what you think!

Top comments (0)