gp-grid: Data Grid TypeScript mã nguồn mở miễn phí cho React, Vue và Angular

Khi ứng dụng chỉ hiển thị vài trăm dòng dữ liệu, một bảng HTML thông thường có thể đáp ứng tốt. Tuy nhiên, mọi chuyện trở nên phức tạp hơn khi hệ thống phải xử lý hàng chục nghìn, hàng trăm nghìn hoặc thậm chí hàng triệu bản ghi.

Không chỉ hiệu năng là vấn đề cần quan tâm. Nhiều thư viện data grid cung cấp các chức năng cơ bản trong phiên bản miễn phí, nhưng lại giới hạn những tính năng nâng cao như nhóm dữ liệu, pivot table, chỉnh sửa dạng bảng tính hoặc tổng hợp dữ liệu trong gói Enterprise.

gp-grid được xây dựng để giải quyết những hạn chế đó. Đây là thư viện data grid TypeScript mã nguồn mở dành cho React, Vue và Angular, phát hành theo giấy phép Apache 2.0. Thư viện hỗ trợ ảo hóa hàng và cột, chỉnh sửa dữ liệu trực tiếp, lọc nâng cao, nhóm dòng, pivot table, tải dữ liệu phía máy chủ và nhiều tính năng khác mà không khóa sau gói trả phí.

Trong bài viết này, chúng ta sẽ tìm hiểu gp-grid là gì, các tính năng nổi bật, cách cài đặt cho từng framework, khả năng xử lý dữ liệu lớn, so sánh với AG Grid và những trường hợp nên cân nhắc sử dụng thư viện này.

Tóm tắt nhanh về gp-grid

gp-grid là một data grid TypeScript mã nguồn mở, hỗ trợ React, Vue và Angular. Thư viện cung cấp các tính năng cần thiết để xây dựng bảng dữ liệu tương tác với quy mô lớn.

• Giấy phép: Apache 2.0.
• Framework hỗ trợ: React, Vue 3 và Angular.
• Ngôn ngữ: TypeScript.
• Phụ thuộc runtime bên ngoài: Không.
• Hiệu năng: Hỗ trợ ảo hóa hàng và cột bằng virtual scrolling.
• Chỉnh sửa dữ liệu: Hỗ trợ chỉnh sửa ô, chọn vùng dữ liệu, điều hướng bằng bàn phím và fill handle.
• Phân tích dữ liệu: Có grouping, aggregation và pivot table.
• Nguồn dữ liệu: Dữ liệu phía client, dữ liệu thời gian thực và dữ liệu tải từ server.
• Chi phí: Không có tính năng bị khóa sau gói Enterprise theo thông tin dự án công bố.

Phiên bản gp-grid 1.0.0 sử dụng cơ chế virtual scrolling hai chiều. Theo benchmark được công bố bởi dự án, bài kiểm thử với một triệu dòng đạt mức trung bình 56,2 FPS trong quá trình cuộn. Kết quả thực tế vẫn phụ thuộc vào trình duyệt, cấu hình máy, cấu trúc dữ liệu và logic của ứng dụng.

Data grid là gì và tại sao ứng dụng cần sử dụng?

Data grid là thành phần giao diện chuyên dùng để hiển thị và thao tác với dữ liệu dạng bảng. Ngoài việc trình bày hàng và cột, data grid thường tích hợp các chức năng như:

• Sắp xếp dữ liệu theo một hoặc nhiều cột.
• Lọc dữ liệu theo nhiều điều kiện.
• Chọn một ô hoặc nhiều vùng dữ liệu.
• Chỉnh sửa nội dung trực tiếp.
• Điều hướng bằng bàn phím.
• Thay đổi kích thước và vị trí cột.
• Cố định cột hoặc hàng quan trọng.
• Nhóm, tổng hợp và phân tích dữ liệu.
• Tải dữ liệu theo từng phần từ API.

Một thẻ HTML <table> chỉ cung cấp cấu trúc cơ bản. Nếu muốn bổ sung sắp xếp, lọc, chỉnh sửa hoặc điều hướng bằng bàn phím, đội ngũ phát triển phải tự triển khai phần lớn logic.

Trong khi đó, thư viện headless table như TanStack Table tập trung vào phần xử lý dữ liệu và trạng thái, còn giao diện hiển thị vẫn do lập trình viên xây dựng. Cách tiếp cận này linh hoạt nhưng đòi hỏi nhiều thời gian phát triển.

Data grid hoàn chỉnh như gp-grid cung cấp sẵn cả phần logic lẫn trải nghiệm tương tác. Đây là lựa chọn phù hợp cho dashboard quản trị, CRM, hệ thống phân tích, phần mềm tài chính, quản lý kho hoặc bất kỳ ứng dụng nào cần thao tác thường xuyên với dữ liệu dạng bảng.

Những tiêu chí quan trọng khi chọn thư viện data grid

Không nên lựa chọn data grid chỉ dựa trên số lượng tính năng được liệt kê trên trang chủ. Trước khi tích hợp, cần đánh giá thư viện theo các tiêu chí thực tế sau.

Hiệu năng với dữ liệu lớn

Việc render toàn bộ hàng triệu bản ghi vào DOM sẽ khiến trình duyệt tiêu tốn nhiều bộ nhớ và làm giao diện phản hồi chậm. Cơ chế virtual scrolling giúp giải quyết vấn đề bằng cách chỉ render những hàng và cột đang xuất hiện trong vùng nhìn thấy.

Khả năng sắp xếp và lọc

Ứng dụng thực tế thường cần sắp xếp nhiều cột, lọc theo văn bản, số, ngày tháng hoặc kết hợp nhiều điều kiện bằng toán tử AND và OR.

Chỉnh sửa và chọn dữ liệu

Đối với các hệ thống quản trị, người dùng thường muốn cập nhật dữ liệu trực tiếp trong bảng. Vì vậy, việc hỗ trợ inline editing, kiểm tra dữ liệu, chọn vùng và phím tắt là yếu tố quan trọng.

Khả năng tùy biến giao diện

Data grid cần phù hợp với thiết kế tổng thể của ứng dụng. Hãy kiểm tra khả năng tùy chỉnh cell renderer, header renderer, bộ lọc, định dạng dữ liệu, màu sắc, theme sáng và dark mode.

Tương thích framework và TypeScript

Thư viện nên có binding chính thức cho framework mà dự án đang sử dụng. TypeScript cũng cần cung cấp kiểu dữ liệu rõ ràng để giảm lỗi khi khai báo cột, trình chỉnh sửa và nguồn dữ liệu.

Bundle size và dependency

Kích thước bundle ảnh hưởng đến thời gian tải ban đầu. Số lượng dependency cũng ảnh hưởng đến quá trình bảo trì, cập nhật bảo mật và độ ổn định của dự án.

Giấy phép sử dụng

Một thư viện có thể miễn phí khi cài đặt nhưng vẫn giới hạn những tính năng quan trọng trong gói thương mại. Vì vậy, cần kiểm tra kỹ giấy phép của từng tính năng thay vì chỉ nhìn vào giá của package.

gp-grid hoạt động như thế nào?

gp-grid được thiết kế theo hướng TypeScript-first, với phần lõi độc lập framework và các package tích hợp riêng cho từng nền tảng.

Cấu trúc chính của thư viện gồm:

• @gp-grid/core: phần lõi không phụ thuộc framework.
• @gp-grid/react: binding dành cho React.
• @gp-grid/vue: binding dành cho Vue.
• @gp-grid/angular: binding dành cho Angular.

Các package được cung cấp thông qua npm và JSR.

Slot-based virtual scrolling

Thay vì tạo một DOM node cho từng dòng, gp-grid duy trì một số lượng container có giới hạn. Khi người dùng cuộn, các container này được tái sử dụng để hiển thị dữ liệu mới.

Cách làm này giúp giảm:

• Số lượng phần tử DOM.
• Thời gian layout và paint.
• Chi phí tạo và hủy component.
• Mức sử dụng bộ nhớ của trình duyệt.

gp-grid hỗ trợ virtual scrolling theo cả chiều dọc và chiều ngang. Đây là yếu tố hữu ích đối với các bảng có nhiều dòng hoặc chứa hàng chục, hàng trăm cột.

Instruction-based core

Phần lõi của gp-grid phát hành các instruction mô tả thay đổi cần thực hiện trên giao diện. Các framework wrapper chịu trách nhiệm chuyển những instruction này thành thao tác hiển thị phù hợp.

Kiến trúc này giúp React, Vue và Angular dùng chung logic xử lý dữ liệu, đồng thời giảm sự phụ thuộc của core vào từng framework cụ thể.

Data source linh hoạt

Ứng dụng có thể sử dụng dữ liệu lưu trong bộ nhớ trình duyệt, dữ liệu cập nhật liên tục hoặc nguồn dữ liệu được lấy từng phần từ API.

Với dữ liệu vừa phải, client-side data source thường đơn giản và có tốc độ phản hồi tốt. Với dữ liệu rất lớn, server-side data source giúp giảm lượng dữ liệu phải tải về trình duyệt.

Cài đặt gp-grid cho React, Vue và Angular

Chọn package tương ứng với framework của dự án:

npm install @gp-grid/react
npm install @gp-grid/vue
npm install @gp-grid/angular

Nếu cần làm việc trực tiếp với core, có thể cài đặt:

npm install @gp-grid/core

Ví dụ tạo data grid với React

Để sử dụng gp-grid trong React, hãy khai báo danh sách cột, chuẩn bị dữ liệu và truyền chúng vào component Grid.

import { Grid, type ColumnDefinition } from "@gp-grid/react";
import "@gp-grid/react/dist/styles.css";

const columns: ColumnDefinition[] = [
  {
    field: "id",
    cellDataType: "number",
    width: 80,
    headerName: "ID",
  },
  {
    field: "name",
    cellDataType: "text",
    width: 160,
    editable: true,
  },
  {
    field: "email",
    cellDataType: "text",
    width: 260,
    headerName: "Email",
  },
];

const rows = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob", email: "bob@example.com" },
];

export default function App() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Grid
        columns={columns}
        rowData={rows}
        rowHeight={36}
      />
    </div>
  );
}

Lưu ý quan trọng: grid sẽ lấp đầy kích thước của phần tử cha. Vì vậy, container cần có chiều cao cụ thể. Nếu không đặt height, bảng có thể không hiển thị như mong đợi.

Đừng quên import file CSS của thư viện một lần ở cấp ứng dụng:

import "@gp-grid/react/dist/styles.css";

Cách khai báo cột trong Vue và Angular tương tự React, nhưng component và cách binding sẽ sử dụng cú pháp riêng của từng framework.

Các tính năng nổi bật của gp-grid

Virtual scrolling cho hàng triệu dòng

Virtual scrolling là một trong những tính năng quan trọng nhất của gp-grid. Thư viện chỉ render phần dữ liệu đang nằm trong viewport và một vùng đệm nhỏ gọi là overscan.

Overscan giúp giao diện tiếp tục phản hồi khi người dùng cuộn nhanh. Các tham số như overscan, wheelDampening và maxFlingVelocity có thể được điều chỉnh để phù hợp với thiết bị đầu vào và trải nghiệm mong muốn.

Trong các bài benchmark được dự án công bố với một triệu dòng dữ liệu, gp-grid ghi nhận:

• Trung bình khoảng 56,2 FPS trong bài kiểm thử cuộn.
• Không ghi nhận dropped frame trong bài đo được công bố.
• Sắp xếp tăng dần mất khoảng 652 ms.
• Lọc văn bản mất khoảng 188 ms.
• Bộ nhớ sau khi tải dữ liệu khoảng 254,7 MB.

Các con số trên chỉ mang tính tham khảo vì kết quả còn phụ thuộc phiên bản thư viện, thiết bị, trình duyệt, số lượng cột, kiểu dữ liệu và các renderer tùy chỉnh.

Sắp xếp nhiều cột và lọc nâng cao

gp-grid cho phép người dùng sắp xếp dữ liệu trực tiếp bằng cách nhấp vào tiêu đề cột. Khi giữ phím Shift và chọn thêm cột khác, người dùng có thể tạo thứ tự sắp xếp nhiều cấp.

Hệ thống lọc hỗ trợ nhiều loại dữ liệu, bao gồm:

• Văn bản.
• Số.
• Ngày tháng.
• Giá trị riêng biệt thông qua danh sách checkbox.
• Nhiều điều kiện kết hợp bằng AND hoặc OR.

Ví dụ, người dùng có thể tạo bộ lọc tương đương với biểu thức (A AND B) OR C. Lập trình viên cũng có thể tắt sorting toàn bộ grid thông qua sortingEnabled hoặc vô hiệu hóa trên từng cột bằng thuộc tính sortable: false.

Custom comparator và custom filter component giúp ứng dụng xử lý những quy tắc nghiệp vụ đặc thù.

Chọn ô, chọn vùng và điều hướng bằng bàn phím

gp-grid cung cấp trải nghiệm gần giống bảng tính điện tử. Người dùng có thể chọn một ô, kéo để chọn nhiều ô, giữ Shift để mở rộng vùng chọn hoặc dùng Ctrl để chọn các ô riêng lẻ.

Các phím thường được hỗ trợ gồm:

• Phím mũi tên để di chuyển giữa các ô.
• Tab để chuyển sang ô tiếp theo.
• Enter để xác nhận chỉnh sửa.
• Home và End để di chuyển nhanh.
• Các phím tắt kết hợp với Ctrl.

Những chức năng này đặc biệt hữu ích khi người dùng phải nhập hoặc kiểm tra số lượng lớn dữ liệu mà không muốn sử dụng chuột liên tục.

Chỉnh sửa dữ liệu trực tiếp

Để cho phép chỉnh sửa một cột, đặt thuộc tính editable: true:

const columns = [
  {
    field: "name",
    cellDataType: "text",
    editable: true,
  },
  {
    field: "quantity",
    cellDataType: "number",
    editable: true,
  },
];

Người dùng có thể bắt đầu chỉnh sửa bằng cách nhấp đúp, nhấn Enter, F2 hoặc bắt đầu nhập nội dung. Phím Enter và Tab thường dùng để xác nhận thay đổi, trong khi Escape dùng để hủy.

gp-grid cũng hỗ trợ fill handle. Người dùng có thể kéo điểm điều khiển ở góc vùng được chọn để sao chép giá trị sang những ô khác, tương tự các phần mềm bảng tính phổ biến.

Custom renderer, định dạng và dark mode

Không phải dữ liệu nào cũng nên hiển thị dưới dạng văn bản thuần túy. Một cột trạng thái có thể cần badge màu, cột lương cần định dạng tiền tệ, còn cột ngày tháng có thể cần hiển thị theo múi giờ của người dùng.

gp-grid hỗ trợ custom cell renderer, edit renderer và header renderer. Thuộc tính valueFormatter cho phép thay đổi cách hiển thị mà không làm mất giá trị gốc dùng cho sorting hoặc filtering.

{
  field: "salary",
  cellDataType: "number",
  width: 150,
  cellRenderer: SalaryRenderer,
  valueFormatter: (value) =>
    "$" + (value as number).toLocaleString(),
}

Thư viện cũng hỗ trợ:

• Dark mode thông qua thuộc tính darkMode.
• Tùy chỉnh CSS bằng class riêng.
• Highlight hàng, cột hoặc ô.
• Hiệu ứng hover và crosshair.
• Hỗ trợ Tailwind với chỉ thị @apply.

CSS mặc định sử dụng các selector có specificity thấp thông qua :where(). Điều này giúp việc ghi đè giao diện bằng CSS của ứng dụng dễ dàng hơn.

Dữ liệu thời gian thực và cập nhật liên tục

Đối với dashboard vận hành, bảng giá, hệ thống giám sát hoặc ứng dụng tài chính, dữ liệu có thể thay đổi liên tục trong khi người dùng đang thao tác.

Trong React, useGridData cung cấp data source có thể thay đổi và các phương thức như:

• addRows để thêm dòng.
• removeRows để xóa dòng.
• Cập nhật từng ô.
• Cập nhật toàn bộ dòng.

Thuộc tính debounceMs giúp gom nhiều thay đổi nhanh thành ít transaction hơn, từ đó giảm áp lực lên quá trình render.

Tải dữ liệu từ server theo từng phần

Khi dữ liệu quá lớn để giữ toàn bộ trong bộ nhớ trình duyệt, nên sử dụng server-side data source. Grid sẽ yêu cầu một khoảng dòng cụ thể từ API thay vì tải toàn bộ dataset ngay từ đầu.

import { Grid, createServerDataSource } from "@gp-grid/react";

const dataSource = createServerDataSource(async (request) => {
  const response = await fetch("/api/grid-data", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(request),
  });

  return response.json();
});

export default function App() {
  return (
    <Grid
      columns={columns}
      dataSource={dataSource}
      rowHeight={36}
    />
  );
}

API cần trả về danh sách dòng được yêu cầu và tổng số dòng:

{
  "rows": [],
  "totalRows": 1000000
}

Với dữ liệu vượt quá khoảng 10 triệu dòng, hướng dẫn hiệu năng của gp-grid khuyến nghị sử dụng phương án tải dữ liệu phía server thay vì đưa toàn bộ dữ liệu vào client.

Kéo thả, thay đổi kích thước và cố định cột

Người dùng có thể sắp xếp lại vị trí cột bằng thao tác kéo thả. Chiều rộng cột có thể được thay đổi với giới hạn tối thiểu và tối đa.

Các tính năng bố cục đáng chú ý gồm:

• Di chuyển cột.
• Resize cột.
• Pin cột sang trái hoặc phải.
• Freeze hàng bên dưới header.
• Nhóm các cột liên quan.
• Hỗ trợ layout từ phải sang trái.
• Thiết lập chiều cao riêng cho từng dòng.
• Ảo hóa cột cho bảng có chiều ngang lớn.

Ví dụ, trong CRM, doanh nghiệp có thể cố định cột tên khách hàng trong khi người dùng cuộn ngang để xem lịch sử giao dịch, trạng thái và giá trị hợp đồng.

Row grouping, aggregation và pivot table

Đây là nhóm tính năng thường xuất hiện trong các gói Enterprise của nhiều thư viện data grid. Với gp-grid, grouping, aggregation và pivot table được cung cấp trong hệ sinh thái phát hành theo Apache 2.0.

Row grouping giúp gom các bản ghi theo danh mục, khu vực, trạng thái hoặc bất kỳ trường dữ liệu phù hợp nào. Người dùng có thể mở rộng hoặc thu gọn từng nhóm.

Aggregation cho phép tính tổng, số lượng hoặc các chỉ số tổng hợp khác ở cấp nhóm và toàn bộ bảng.

Pivot table giúp chuyển đổi các chiều dữ liệu thành cột, từ đó tạo báo cáo phân tích linh hoạt hơn. Đây là tính năng hữu ích trong báo cáo doanh thu, phân tích tồn kho, thống kê nhân sự hoặc theo dõi hiệu quả kinh doanh.

Tùy thuộc vào data source, quá trình grouping và tính toán có thể diễn ra ở client hoặc được thực hiện phía server.

Khả năng hỗ trợ AI coding agent

gp-grid cung cấp một skill chính thức dành cho các công cụ lập trình có AI. Skill này giúp agent hiểu cách sử dụng API, component binding, column definition, renderer và data source của thư viện.

Skill bao gồm tài liệu chung cùng hướng dẫn riêng cho:

• React.
• Vue.
• Angular.
• gp-grid core.

Nó cũng đề cập đến các lỗi tích hợp thường gặp, chẳng hạn:

• Quên đặt chiều cao cho container của grid.
• Không import file CSS.
• Sử dụng sai kiểu dữ liệu ngày tháng.
• Chọn nhầm client-side data source thay vì server-side data source.
• Gửi sai cấu trúc request khi tải dữ liệu theo khoảng dòng.

Có thể thêm skill vào dự án bằng lệnh:

npx skills add https://github.com/GioPat/gp-grid

# Cập nhật skill về sau
npx skills add GioPat/gp-grid

Tài liệu chính thức được cung cấp tại trang onboarding cho LLM.

So sánh gp-grid và AG Grid

AG Grid là một trong những thư viện data grid phổ biến nhất trong hệ sinh thái JavaScript. Thư viện này có Community Edition miễn phí và Enterprise Edition dành cho những tính năng nâng cao.

Điểm khác biệt đáng chú ý là gp-grid công bố toàn bộ tính năng dưới giấy phép Apache 2.0, trong khi một số chức năng như grouping và pivoting của AG Grid thường gắn với gói Enterprise.

Các số liệu trên được lấy từ benchmark được công bố bởi dự án và chỉ phản ánh một môi trường, phiên bản cùng workload cụ thể. Không nên xem đây là cam kết hiệu năng cho mọi ứng dụng.

Nên chọn gp-grid khi:

• Cần data grid mã nguồn mở với nhiều tính năng nâng cao.
• Muốn tránh chi phí Enterprise.
• Quan tâm đến kích thước bundle và số lượng dependency.
• Cần hỗ trợ React, Vue hoặc Angular.
• Ứng dụng phải xử lý dữ liệu lớn bằng virtual scrolling.

Nên cân nhắc AG Grid khi:

• Dự án đã phụ thuộc vào hệ sinh thái AG Grid.
• Đội ngũ cần hệ thống tài liệu, hỗ trợ và tích hợp lâu năm.
• Phiên bản Community đã đáp ứng đủ nhu cầu.
• Doanh nghiệp có ngân sách cho gói Enterprise và cần hỗ trợ thương mại.

Ai nên sử dụng gp-grid?

gp-grid phù hợp với nhiều loại dự án cần hiển thị và thao tác trên dữ liệu lớn.

Dashboard quản trị và phân tích

Virtual scrolling, lọc nâng cao, grouping và aggregation giúp gp-grid phù hợp với dashboard nội bộ, hệ thống báo cáo và ứng dụng phân tích dữ liệu.

CRM và hệ thống quản lý khách hàng

Khả năng cố định cột, chỉnh sửa trực tiếp, tìm kiếm và sắp xếp nhiều cấp giúp nhân viên dễ dàng làm việc với danh sách khách hàng lớn.

Ứng dụng tài chính

Các hệ thống giao dịch, theo dõi giá, quản lý danh mục hoặc báo cáo tài chính có thể tận dụng dữ liệu thời gian thực, định dạng số và khả năng xử lý bảng rộng.

Phần mềm quản lý kho và đơn hàng

Inline editing, chọn vùng, lọc theo trạng thái và tải dữ liệu phía server là những chức năng hữu ích cho hệ thống kho, đơn hàng và chuỗi cung ứng.

Dự án TypeScript đa framework

Với core độc lập framework cùng các package cho React, Vue và Angular, gp-grid có thể phù hợp với đội ngũ đang duy trì nhiều ứng dụng frontend khác nhau.

Những điểm cần kiểm tra trước khi đưa vào production

Dù có nhiều tính năng, gp-grid vẫn là một dự án tương đối mới. Trước khi sử dụng trong hệ thống quan trọng, nên thực hiện các bước đánh giá sau:

1. Kiểm tra phiên bản package và lịch sử phát hành.
2. Thử nghiệm với dữ liệu thực tế của ứng dụng.
3. Đo hiệu năng trên thiết bị mục tiêu.
4. Kiểm tra khả năng tương thích với phiên bản React, Vue hoặc Angular đang dùng.
5. Đánh giá accessibility bằng bàn phím và trình đọc màn hình.
6. Kiểm tra logic chỉnh sửa, undo, validation và đồng bộ dữ liệu.
7. Đo kích thước bundle sau khi build production.
8. Kiểm tra cách xử lý lỗi khi API chậm hoặc mất kết nối.

Thư viện có cung cấp các vai trò ARIA cho grid và hỗ trợ điều hướng bằng bàn phím, nhưng ứng dụng có yêu cầu accessibility nghiêm ngặt vẫn cần tự thực hiện audit theo tiêu chuẩn phù hợp.

Câu hỏi thường gặp về gp-grid

gp-grid có thực sự miễn phí không?

Theo thông tin dự án công bố, gp-grid được phát hành theo giấy phép Apache 2.0 và không khóa các tính năng nâng cao sau gói Enterprise. Người dùng vẫn nên kiểm tra giấy phép của phiên bản đang sử dụng và điều khoản liên quan trước khi triển khai thương mại.

gp-grid có hỗ trợ React, Vue và Angular không?

Có. Thư viện cung cấp package riêng cho React, Vue và Angular, đồng thời có core độc lập framework. gp-grid được viết bằng TypeScript và cung cấp sẵn type definition.

gp-grid có thể xử lý một triệu dòng không?

gp-grid hỗ trợ virtual scrolling để chỉ render dữ liệu trong vùng nhìn thấy. Với dataset rất lớn, có thể kết hợp server-side data source để chỉ tải các dòng cần thiết. Benchmark được công bố của dự án ghi nhận trung bình 56,2 FPS với một triệu dòng trong một bài kiểm thử cụ thể.

gp-grid có phải lựa chọn thay thế miễn phí cho AG Grid Enterprise không?

gp-grid là một lựa chọn đáng đánh giá nếu ứng dụng cần grouping, pivot table, editing và virtual scrolling mà không muốn phụ thuộc vào giấy phép Enterprise. Tuy nhiên, nên so sánh thêm về độ trưởng thành của dự án, tài liệu, hệ sinh thái, hỗ trợ kỹ thuật và workload thực tế.

gp-grid có hỗ trợ dữ liệu từ API không?

Có. createServerDataSource cho phép grid yêu cầu một khoảng dòng từ API, đồng thời gửi thông tin liên quan đến sorting và filtering. Endpoint cần trả về danh sách dòng và tổng số bản ghi.

Vì sao grid không hiển thị dù đã truyền dữ liệu?

Nguyên nhân phổ biến là container cha chưa có chiều cao cụ thể. Hãy đặt height cho phần tử bao quanh grid và đảm bảo stylesheet của gp-grid đã được import.

Kết luận

gp-grid là một thư viện data grid TypeScript đáng chú ý dành cho các ứng dụng cần xử lý dữ liệu lớn trên React, Vue và Angular. Thư viện kết hợp virtual scrolling hai chiều, lọc và sắp xếp nâng cao, chỉnh sửa giống bảng tính, nguồn dữ liệu phía server, grouping, aggregation và pivot table trong một package mã nguồn mở.

Điểm nổi bật của gp-grid là chính sách phát hành không đặt các tính năng quan trọng sau paywall Enterprise. Cùng với đó, kiến trúc không phụ thuộc framework, số lượng runtime dependency bằng 0 và khả năng tùy biến giao diện giúp thư viện phù hợp với nhiều loại dự án.

Tuy nhiên, benchmark chỉ mang tính tham khảo và không thể thay thế cho quá trình kiểm thử trên dữ liệu thật. Trước khi đưa vào production, đội ngũ nên đánh giá hiệu năng, accessibility, độ ổn định, tài liệu và khả năng bảo trì theo nhu cầu cụ thể.

Tham khảo thêm tại:

• Trang chủ gp-grid
• Mã nguồn gp-grid trên GitHub
• Benchmark hiệu năng gp-grid
• Tài liệu tích hợp AI coding agent
• gp-grid Playground