Cập nhật React Data Grid Lite v1.2.4: Hỗ trợ RTL và Tối ưu hóa ảo hóa

Giới thiệu

Chúng tôi rất vui mừng thông báo về việc phát hành React Data Grid Lite v1.2.4, một bước tiến lớn trong hiệu suất và khả năng tiếp cận. Phiên bản này giới thiệu hỗ trợ bố cục từ phải sang trái (RTL) và cả ảo hóa hàng và cột, khiến nó nhanh hơn, linh hoạt hơn và phù hợp hơn với người dùng quốc tế.

🌐 Hỗ trợ RTL (Right-to-Left)

Bạn đang xây dựng ứng dụng cho người dùng toàn cầu? Phiên bản v1.2.4 hiện hỗ trợ bố cục RTL một cách tự nhiên.

Ý nghĩa của việc này:

• Văn bản, cột và các yếu tố giao diện người dùng tự động căn chỉnh từ phải sang trái khi chế độ RTL được kích hoạt.
• Không cần phải ghi đè hoặc sử dụng các thủ thuật tùy chỉnh cho giao diện Arabic, Hebrew hoặc Persian.
• Chỉ cần sử dụng thuộc tính enableRtl mới của lưới.

<DataGrid
  columns={columns}
  data={rows}
  options={{
    enableRtl: true,
  }}
/>

⚡ Ảo hóa Hàng và Cột

Với v1.2.4, chúng tôi đã giới thiệu ảo hóa hai chiều đầy đủ — cả hàng và cột!

Lợi ích:

• 🚀 Hiệu suất nhanh hơn với dữ liệu lớn
• 📉 Giảm mức sử dụng bộ nhớ
• 📱 Cải thiện khả năng hiển thị trên di động
• 🧠 Logic hiển thị thông minh: chỉ phần nhìn thấy của lưới được hiển thị trong DOM

React Data Grid Lite v1.2.4 bao gồm ảo hóa thông minh — và nó được tự động kích hoạt khi dữ liệu của bạn vượt qua một kích thước nhất định:

✅ Tự động kích hoạt khi:

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

Điều này có nghĩa là bạn nhận được hiệu suất cực nhanh ngay khi sử dụng, mà không cần cấu hình gì thêm.

🔄 Tại sao điều này quan trọng:

• Chỉ những hàng và cột nhìn thấy mới được hiển thị
• Giảm mức sử dụng bộ nhớ
• Cải thiện hiệu suất cuộn, đặc biệt trên thiết bị di động hoặc thiết bị tầm trung

⚙️ Kiểm soát Ảo hóa Thủ công

Bạn muốn kiểm soát nhiều hơn về thời điểm ảo hóa được áp dụng? Sử dụng tùy chọn virtualization:

<DataGrid
  columns={columns}
  data={rows}
  options={{
    virtualization: true, // hoặc false
  }}
/>

Các tùy chọn có sẵn:

• true: Buộc ảo hóa, ngay cả với dữ liệu nhỏ — tuyệt vời cho việc thử nghiệm hoặc hành vi nhất quán
• false: Vô hiệu hóa hoàn toàn ảo hóa — không được khuyến nghị cho dữ liệu trung bình hoặc lớn

Đằng sau, ảo hóa được cung cấp bởi một engine hiển thị tối ưu hóa cao — có nghĩa là bạn có thể mở rộng lưới mà không làm giảm trải nghiệm người dùng.

🧪 Ví dụ với Next.js

Dưới đây là một cấu hình tối thiểu sử dụng Next.js:

npx create-next-app@latest react-data-grid-demo
cd react-data-grid-demo
npm install react-data-grid-lite

Sau đó trong pages/index.js của bạn:

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

export default function Home() {
  const columns = [
    { name: 'id', alias: 'ID' },
    { name: 'name', alias: 'Tên' },
    { name: 'country', alias: 'Quốc gia' },
  ];

  const data = Array.from({ length: 1000 }, (_, i) => ({
    id: i + 1,
    name: `Người dùng ${i + 1}`,
    country: i % 2 === 0 ? '🇺🇸 Mỹ' : '🇫🇷 Pháp'
  }));

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

🛠️ Cách Cập Nhật

Nếu bạn đã sử dụng react-data-grid-lite, việc cập nhật rất đơn giản:

npm install react-data-grid-lite@latest

Hoặc với Yarn:

yarn add react-data-grid-lite@latest

✨ Suy Nghĩ Cuối

React Data Grid Lite tiếp tục phát triển với mục tiêu cải thiện hiệu suất và trải nghiệm của nhà phát triển. Dù bạn đang xây dựng các bảng điều khiển quản trị phức tạp hay các chế độ xem di động nhẹ, v1.2.4 cung cấp cho bạn các công cụ để xây dựng lưới dữ liệu nhanh chóng, dễ dàng truy cập và dễ dàng quốc tế hóa.

Hãy thử nghiệm và cho chúng tôi biết suy nghĩ của bạn!

• 🔗 Kho lưu trữ GitHub
• 📦 Gói NPM
• 📘 Tài liệu
• 💬 Diễn đàn thảo luận