一個開源資料表格元件在 1,000 列時看起來很驚人，但當你的應用程式需要處理 100,000 列或更多時，表現就可能開始吃力。功能面也是如此：你也許能在免費函式庫中找到排序與篩選，卻發現列群組、樞紐分析表，或其他進階能力都必須要有企業版授權才能使用。

gp-grid 採取了不同的做法。它是一個適用於 React、Vue 和 Angular 的開源 TypeScript 資料表格元件，採用 Apache 2.0 授權釋出。它沒有任何外部相依套件，透過虛擬捲動支援大型資料集，並且所有功能都沒有付費牆。

在這篇文章中，我們會探討資料表格元件為什麼有用、gp-grid 如何運作、如何在你的框架中開始使用，以及它在功能、套件大小與公開效能基準測試上，和 AG Grid 相比如何。

TL;DR

gp-grid 是一個免費、開源 的 TypeScript 資料表格元件，適用於 React、Vue 和 Angular，採用 Apache 2.0 授權。它結合了虛擬捲動、進階資料處理與試算表風格互動，而且不會把功能鎖在付費企業版中。

它的核心功能包括：

✅ 列與欄虛擬化： 只渲染可見的列與欄，再加上一小段預留緩衝區，以保持大型且寬廣的表格流暢。
✅ 排序與篩選： 支援多欄排序與進階篩選條件。
✅ 儲存格選取與編輯： 可使用選取範圍、鍵盤導覽、內嵌編輯與填滿控制點。
✅ 自訂渲染與樣式： 可自訂儲存格、表頭、篩選器、主題與深色模式。
✅ 即時與伺服器端資料： 可管理串流更新，或按需從伺服器載入資料列，以處理更大型的資料集。
✅ 彈性版面配置與分析： 可重新排序、調整大小、釘選與凍結欄位，並支援列群組、彙總與樞紐分析表。
✅ AI 程式碼代理支援： 使用官方 gp-grid skill，協助程式碼代理整合正確的 API、框架綁定與資料來源模式。

gp-grid 1.0.0 同時支援列與欄虛擬化，並使用 overscan 來有效率地渲染可視視窗。其公開的一百萬列基準測試在量測捲動測試中，平均 FPS 為 56.2，不過結果仍會依工作負載與測試環境而異。

什麼是 Web 資料表格元件？

Web 資料表格元件是一種互動式元件，用來在瀏覽器中顯示、排序、篩選、選取與編輯表格式資料。和單純的 HTML 表格不同，資料表格元件可以提供試算表風格互動、自訂儲存格與虛擬捲動，後者只會渲染目前視窗所需的列。

當你在打造管理後台、CRM、分析平台、金融應用程式，或任何需要處理大量資料集的介面時，這個差異就很重要。

一般的 HTML <table> 只能提供顯示列與欄的基本結構。你可以自行加上需要的行為，但像排序、篩選與鍵盤導覽等功能，都得自己實作。

像 TanStack Table 這類的無頭表格函式庫會處理大部分表格邏輯，但把標記與呈現交給你。這提供了相當大的彈性，不過你的團隊仍需負責建構整個介面。

完整的資料表格元件則提供更完整的 UI，包含內建互動與可配置的行為。對於希望獲得類似試算表體驗、又不想從零實作每個互動的團隊來說，這可以省下大量開發時間。

真正的挑戰在於找到一個能處理你的資料集、符合你的框架、具備應用程式所需功能，而且不會帶來不必要套件重量或授權成本的表格元件。

Web 資料表格元件真正重要的是什麼功能？

在選擇開源資料表格元件時，應從實用清單開始：效能、資料操作、編輯、自訂、框架相容性、無障礙設計與授權。最佳平衡取決於你的應用程式工作負載，以及使用者期待的體驗。

以下是選擇函式庫前值得評估的能力：

• 虛擬捲動： 只渲染可見列與少量緩衝區，而不是把每一列都掛載到 DOM，讓大型資料集保持流暢。
• 排序與篩選： 支援日常資料探索，包括多欄排序、進階篩選條件與伺服器端操作。
• 選取與編輯： 提供儲存格與範圍選取、鍵盤導覽、內嵌編輯，以及類似試算表的便利功能，例如填滿控制點。
• 自訂與主題： 可建立自訂儲存格渲染器、格式化數值、套用應用程式專屬樣式，並支援深色模式。
• TypeScript 與框架支援： 提供可靠的型別與綁定，符合你現有的 React、Vue 或 Angular 應用程式。
• 套件大小與相依性： 會影響初次載入成本，以及專案需要維護的第三方套件數量。
• 無障礙與鍵盤支援： 讓常見表格互動可以透過鍵盤完成，並提供適當的無障礙語意。
• 授權： 釐清群組、樞紐分析表與其他進階功能是否包含在免費授權內。

最後一點尤其值得注意。一個函式庫可能可以免費安裝，但你最終需要的能力卻要另外付費。做決定前，請先確認各個功能的授權條款。

gp-grid 以 TypeScript 優先的架構、虛擬捲動、試算表風格互動，以及涵蓋完整功能集的 Apache 2.0 授權，來滿足這份清單。

什麼是 gp-grid？

gp-grid 是一個 開源 的 TypeScript 資料表格元件，適用於 React、Vue 和 Angular，建立在虛擬捲動、與框架無關的核心，以及資料來源抽象層之上。此函式庫採用 Apache 2.0 授權，並在 1.0.0 版本中宣告所有功能皆可免費使用。

它的架構遵循三個主要原則：

• 基於 slot 的虛擬捲動： gp-grid 在使用者捲動時會重用一組 DOM 容器，即使底層資料集包含數百萬列，仍能維持可渲染元素數量受控。
• 基於指令的核心： 核心會發出描述 UI 變更的宣告式指令，將表格邏輯與框架專屬渲染分離，讓各個包裝層共享相同的底層行為。
• 彈性的資料來源： 你可以視應用程式需求，使用保存在瀏覽器記憶體中的資料，或按需從伺服器抓取資料列。

這個專案將功能分成四個套件：@gp-grid/core、@gp-grid/react、@gp-grid/vue 與 @gp-grid/angular。它們可透過 npm 與 JSR 取得。

安裝與快速開始：React、Vue 與 Angular

開始使用 gp-grid 時，需要安裝對應框架的套件、定義欄位，並提供資料。此函式庫建議使用 TypeScript 5.0 以上版本，內建型別定義，並透過專屬包裝器支援 React 18+ 與 Vue 3。

安裝套件

選擇你需要的框架套件，並使用你偏好的套件管理器安裝：

npm install @gp-grid/<framework>
# 將 <framework> 替換為 react、vue 或 angular

套件名稱與元件綁定如下表所示。

建立你的第一個 React 資料表格

定義欄位後，將它們與資料列一起傳給 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: 150, editable: true },
  { field: "email", cellDataType: "text", width: 250, headerName: "Email" },
];

const data = [
  { id: 1, name: "Alice", email: "[email protected]" },
  { id: 2, name: "Bob", email: "[email protected]" },
];

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

有一個細節可以幫你避免令人挫折的除錯過程：表格會填滿其父層容器，所以父層必須明確設定高度。

記得在應用程式的根層只匯入一次樣式表。Vue 與 Angular 使用各自的元件綁定，但欄位定義模型是相同的。

gp-grid 核心功能

gp-grid 的核心功能涵蓋效能、資料探索、試算表風格編輯、自訂化，以及多種資料載入方式。以下是在判斷這個函式庫是否適合你的應用程式時，值得 بررسی 的能力。

基於 Slot 的虛擬捲動與百萬列效能

gp-grid 使用基於 slot 的虛擬化來控制資料集變大時的渲染 DOM 數量。從 1.0.0 版本開始，它會虛擬化整個表格視窗，包含列與欄。它會維護可重用的 DOM 容器，並在使用者垂直或水平捲動時更新其分配，只渲染可見區域與周圍的 overscan 緩衝區。

相同的 overscan 邏輯也會套用在兩個維度上，有助於維持雙向平滑捲動。這表示 gp-grid 能在不把每一列與每一欄都掛載到 DOM 的情況下，處理大型資料集與寬表格。透過在視窗移動時重用渲染 slot，它降低了反覆建立與銷毀 DOM 元素所帶來的開銷。

對於大型的前端資料集，排序也可以在 Web Worker 中執行，並且在 client data source 中預設啟用。開發者可以調整 overscan、wheelDampening 與 maxFlingVelocity，來配合自己的介面與輸入裝置調整捲動行為。

根據 gp-grid 的基準測試，其一百萬列測試記錄如下：

• 捲動時平均 56.2 FPS，且沒有掉幀。
• 升冪排序耗時 652 ms，文字篩選耗時 188 ms。
• 載入資料集後，記憶體約為 254.7 MB。

這些結果相當不錯，但並不是通用的效能保證。該基準測試使用的是 @gp-grid/react 0.19.0，因此在比較這些資料與專案較新的 1.0 版本時，請留意版本差異。

https://www.youtube.com/watch?v=tIcdciyyLe0

多欄排序與進階篩選

排序與篩選能幫助使用者無需手動掃描數千筆紀錄，就能找到有用資訊。gp-grid 預設支援排序：點擊欄位表頭會改變排序順序，而按住 Shift 再點擊另一個表頭，則會新增第二個排序條件。

篩選控制項支援文字、數值與日期運算子，並提供以核取方塊為基礎的模式來選取不同值。對於更複雜的搜尋，使用者可以使用 AND/OR 邏輯組合條件，例如 (A AND B) OR C。

你可以透過 sortingEnabled 全域停用排序，或在單一欄位上設定 sortable: false。自訂比較函式與自訂篩選元件也可提供更符合應用需求的行為。

例如，金融儀表板可以先依日期再依金額排序交易；CRM 使用者則可以依狀態與區域篩選聯絡人。這些操作都可使用，不需要額外的企業版功能授權。

https://www.youtube.com/watch?v=CylzevoSJzg

儲存格選取、鍵盤導覽與類 Excel 編輯

gp-grid 支援儲存格選取、拖曳選取範圍、Shift 點擊擴展選取，以及 Ctrl 點擊切換單一儲存格。鍵盤導覽包含方向鍵、Tab、Enter、Home、End，以及常見的 Ctrl 快捷鍵，讓使用者不必一直依賴滑鼠就能操作資料。

若要啟用內嵌編輯，可在欄位上設定 editable: true。使用者可透過雙擊、Enter、F2，或直接輸入來開始編輯。Enter 與 Tab 會提交變更，而 Escape 會取消編輯。

填滿控制點則提供另一個實用的試算表風格互動：使用者可以拖曳選取範圍角落的小控制點，將值複製到目標儲存格。自訂編輯渲染器與驗證器可以支援更專門的輸入與驗證規則。

https://www.youtube.com/watch?v=igLTAVciVlA

自訂渲染器、樣式、醒目提示與深色模式

資料表格元件需要能配合你的應用程式介面，尤其當儲存格要表達狀態、金額、日期或其他適合自訂呈現的值時。gp-grid 支援自訂儲存格、編輯與表頭渲染器，可直接在欄位定義中設定，或透過渲染器註冊表使用。

valueFormatter 選項在顯示值與原始資料不同時特別有用。例如，薪資欄可以顯示貨幣格式，而排序與以數值為基礎的操作仍會使用底層數字值。

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

樣式也很有彈性。darkMode 屬性可啟用深色樣式，而內建 CSS 使用零特異性的 :where() 選擇器，讓你更容易用自己的 class 覆蓋預設值。也支援 Tailwind 的 @apply 指令，而醒目提示回呼則可為 hover 狀態、隔行列與十字準星效果新增列、欄或儲存格 class。

https://www.youtube.com/watch?v=HlflZ_0tEvQ

即時資料串流與伺服器端資料

gp-grid 同時支援持續變動的資料集，以及按需從伺服器載入的資料。這使它適合股票行情、營運儀表板與管理工具等介面，因為使用者操作時紀錄可能還會變動。

在 React 中處理即時更新時，useGridData Hook 提供可變動的資料來源，以及 addRows 和 removeRows 等輔助工具。你也可以透過資料來源更新單一儲存格或列。其 debounceMs 選項可將快速變更批次化為較少的交易，有助於表格有效率地處理頻繁更新。

當你的資料集太大，無法完整保留在瀏覽器記憶體中時，createServerDataSource 可讓表格向 API 請求特定列範圍，以及排序與篩選資訊。

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

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

  return res.json(); // { rows, totalRows }
});

<Grid columns={columns} dataSource={dataSource} rowHeight={36} />

你的端點必須回傳請求的資料列與總列數。若資料集超過大約 1,000 萬列，gp-grid 的效能指南建議使用伺服器端資料載入。

https://www.youtube.com/watch?v=p5HRxA4GFEs

彈性版面：拖曳、調整大小、釘選、凍結與群組欄位

有用的資料表格元件應該讓使用者能依照工作流程安排資訊。gp-grid 支援將欄位拖曳到新順序、使用最小與最大限制調整欄寬、將欄位釘選到任一側，以及凍結表頭下方的列。

欄虛擬化也會在處理寬資料集時限制掛載中的欄數。此表格支援由右至左（RTL）版面、可配置的欄寬、巢狀欄群組，以及可依列身份不同而變化的列高。

例如，CRM 可以在使用者水平捲動公司細節、活動日期與帳戶數值時，仍保持聯絡人姓名可見。金融儀表板則可以凍結重要的摘要列，讓使用者先檢視下方紀錄。

這個函式庫也提供 ARIA grid 角色與鍵盤支援。不過，其文件並未宣稱完全符合無障礙標準，因此有嚴格無障礙需求的應用程式應自行進行稽核與測試。

https://www.youtube.com/watch?v=EPf9ulynBdo

列群組、彙總與樞紐分析表

gp-grid 在免費的 Apache 2.0 授權下，包含列群組、彙總與樞紐分析表。這些功能可將平面的紀錄轉成結構化摘要，讓使用者在不需要額外企業版授權的情況下，探索大型資料集。

列群組會將紀錄組織成可展開的群組，並提供彙總與總計來整理數值。依資料來源而定，群組計算可以在本地端進行，或按需從伺服器載入。

樞紐分析表可將維度轉成欄位並彙總結果資料，既可在本地端處理，也可使用預先計算好的樞紐表。這對分析型介面特別有用，因為使用者需要比較類別、檢視總計，或依不同維度重新組織資訊。

這個專案也提供更多指南，涵蓋寫入命令、歷史紀錄與欄向資料來源。由於 gp-grid 還是相對年輕的專案，請先閱讀相關指南，並用自己的資料測試這些功能，再將其作為核心相依套件。

https://www.youtube.com/watch?v=9QyD9leR--4

如果你想自己探索範例，我已經把完整的 gp-grid playground 發佈在 GitHub 上。

克隆該儲存庫、在本機執行，並試玩全部七個互動式示範。

https://github.com/Hadil-Ben-Abdallah/gp-grid-playground ⭐ gp-grid Playground Demo

使用官方 gp-grid Skill 為你的 AI 程式碼代理上手

AI 程式碼代理在建立資料密集型介面時可以節省時間，但它們需要正確、具體的函式庫指引，才能產生可運作的程式碼。gp-grid 提供一個 官方 skill，可協助程式碼代理在其支援的框架中使用正確的匯入、欄位定義、渲染器與資料來源 API。

這個 skill 包含一個主要的 SKILL.md 檔案，以及針對 React、Vue、Angular 與與框架無關核心的專屬參考資料。它也涵蓋常見的整合錯誤，例如忘記設定表格容器高度、漏掉樣式表匯入，或使用錯誤的日期資料型別。

你可以在專案中用以下方式安裝：

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

# 日後更新
npx skills add GioPat/gp-grid

這個 skill 可以幫助代理在前端資料、即時更新與伺服器端載入之間做出選擇，包含伺服器端資料正確的 { startRow, endRow } 請求格式。

gp-grid 對比 AG Grid：功能、成本與效能

選擇 React 資料表格元件，不只是比較效能而已。功能可用性與授權條款，對專案的總成本有很大影響。AG Grid 採用 Community 與 Enterprise 模式：Community 版本免費，但數項進階能力，包括列群組與樞紐分析，都需要 Enterprise 授權。gp-grid 則採取不同做法，讓所有功能都能在 Apache 2.0 授權下使用，沒有企業版層級或依功能分級的授權限制。

下列比較使用 gp-grid 於 2026 年 7 月的基準測試結果，該測試使用相同的種子資料與欄位定義測試一百萬列。這些結果來自特定測試環境與工作負載，並非通用的效能保證。

當你想要進階資料表格能力、又不想為 Enterprise 授權付費時，gp-grid 特別值得注意。對於需要在同一個開源授權下同時具備群組、樞紐分析、虛擬捲動、編輯與其他進階功能的應用程式，它很值得考慮，而且在該基準測試中也有較小的 React 套件體積。

如果你的專案已經依賴 AG Grid 的生態系、文件、整合能力，或既有的 Community 與 Enterprise 產品線，那麼 AG Grid 也可能是很強的選擇。它的 Community 版本對只需要免費功能的應用程式可能已經足夠，而需要 Enterprise 功能的團隊則可以評估商業授權是否符合需求。

誰適合使用 gp-grid？

如果你需要功能完整、開源、又不需要企業版授權的資料表格元件，gp-grid 值得考慮。它可能適合以下情況：

• 正在打造資料密集型儀表板的團隊： 虛擬捲動與伺服器端載入有助於應用程式處理大型資料集。
• 需要免費進階功能的開發者： 列群組、樞紐分析表、儲存格選取、內嵌編輯與欄位釘選都包含在內，沒有付費功能層級。
• 以 TypeScript 為主的專案： 內建型別定義支援具型別的欄位設定與編輯器自動完成。
• 跨前端框架開發的團隊： 專屬套件支援 React、Vue 3 與 Angular，並提供與框架無關的核心以供自訂整合。
• 對套件大小或相依性有嚴格要求的專案： 這個函式庫沒有外部執行期相依套件，而其公開的 React 套件量測結果也值得對重視效能的應用程式評估。
• 使用 AI 程式碼代理的開發者： 官方 gp-grid skill 提供框架專屬指引與範例，幫助代理產生相容的整合程式碼。

📌 如果你覺得這篇文章有幫助，歡迎到 GitHub 專案按星星支持一下；這有助於這個開源專案及其持續發展。

https://github.com/GioPat/gp-grid ⭐ 在 GitHub 上為 gp-grid 按星星

常見問題

{% details What is the best free data grid for React?
最佳選擇取決於你的應用程式需要哪些功能。如果你想要一個具備虛擬捲動、編輯、列群組與樞紐分析，並採用 Apache 2.0 授權的開源 React 資料表格元件，gp-grid 值得考慮。如果你偏好自己建立標記與互動層，那麼像 TanStack Table 這類的無頭函式庫可能更適合。
{% enddetails

{% details Is gp-grid really free, or are there paid features?
gp-grid 的功能都可在 Apache 2.0 授權下使用，且專案並未描述任何企業版層級或需付費解鎖的功能模組。維護者接受自願捐款，但函式庫的進階能力並沒有被商業授權鎖住。
{% enddetails

{% details Does gp-grid support Angular, Vue, and TypeScript?
可以。gp-grid 提供 React、Vue 與 Angular 的專屬套件，並附帶與框架無關的核心。它是用 TypeScript 撰寫，且包含型別定義，因此開發者可以使用具型別的欄位定義與編輯器自動完成，而不需要另外安裝 @types 套件。
{% enddetails

{% details Can a React data grid handle one million rows?
可以，但要採取合適的渲染與資料載入策略。虛擬捲動能限制 DOM 中渲染的列數，而伺服器端資料載入則讓應用程式只請求所需的紀錄。gp-grid 公開的一百萬列基準測試在量測捲動過程中記錄到平均 56.2 FPS，不過實際結果仍取決於應用程式與環境。
{% enddetails

{% details What is the best free alternative to AG Grid Enterprise?
如果你需要列群組與樞紐分析等功能、但不想使用企業版授權，gp-grid 是可評估的選項之一。其公開基準測試也顯示較小的套件體積，以及在幾項測試操作上更快的結果。AG Grid 的生態系較成熟，因此在選擇前，請先比較你真正需要的功能、支援需求與實際工作負載。
{% enddetails

最後想法

選擇開源資料表格元件，不只是看授權。效能、編輯、自訂、資料載入、框架支援，以及專案長期健全度，都会影響它是否能好好服務你的應用程式。

gp-grid 把這些考量整合在一個 TypeScript 優先的函式庫中，提供虛擬捲動、React/Vue/Angular 綁定，以及不需付費層級就能使用的進階功能。它的基準測試結果相當有希望，不過這個專案仍然年輕，公開測試也有其限制。

在這篇文章中，我介紹了 gp-grid 及其主要功能。在下一篇文章中，我會實際用它來建立一個真實的 React 專案，分享開發過程、哪些地方表現良好，以及一路上遇到的挑戰。敬請期待一篇親手實作 gp-grid 的實戰分享！

感謝閱讀！🙏🏻 <br/> 希望這對你有幫助 ✅ <br/> 歡迎按讚與追蹤，獲得更多內容 😍 <br/> 由 Hadil Ben Abdallah 用 💙 製作

https://dev.to/hadil

原文出處：https://dev.to/hadil/gp-grid-a-free-open-source-typescript-data-grid-for-react-vue-and-angular-no-paywalled-5heb