MUI X Data Grid

一個快速且可擴展的 React 資料表格和 React data grid。它是一個功能豐富的元件，提供 MIT 或商業授權。

Data Grid 元件使用 React 和 TypeScript 构建，旨在為操作無限數據集提供流暢的用戶體驗。它具有用於即時更新的直觀 API，以及主題和自訂範本，所有這些都具有極快的效能。

概觀

Data Grid 以結構化的行列格式呈現資訊。數據在使用者友善的介面中顯示，以實現高效的編輯、審閱和分析。

此元件有三個不同的版本，一個在 MIT 授權下提供，另外兩個在商業授權下提供。

MIT 授權版本（也稱為「社群版本」）是純資料表格的更強大替代方案。它是一個乾淨的抽象，具有基本功能，例如編輯、分頁、欄分組以及單欄排序和篩選。

import { DataGrid } from '@mui/x-data-grid';

商業授權版本提供兩種方案：Pro 和 Premium。

Pro 方案擴展了社群版本中可用的功能，以支援更複雜的用例。它增加了諸如進階篩選、欄釘選、欄和列重新排序、對樹狀資料的支援以及虛擬化以處理更大的數據集等功能。

下面的示範顯示了 31 欄和 100,000 列—總共超過 300 萬個儲存格。

import { DataGridPro } from '@mui/x-data-grid-pro';

Premium 方案包含 Pro 的所有功能，以及用於數據分析和大型數據集管理的高級功能，例如具有彙總函數（例如總和和平均值）的列分組以及匯出到 Excel 檔案的能力。

請訪問展示頁面，以全面了解此方案獨有的所有功能。

下面的示範按商品名稱對列進行分組，並使用彙總函數來計算每個組和總計的數量總和（顯示在摘要列中）。您可以在欄標題菜單中嘗試對其他欄進行分組。

既然您在這裡，請嘗試匯出到 Excel 以及從 Excel 表格複製和貼上數據。

import { DataGridPremium } from '@mui/x-data-grid-premium';

詳細資訊請參閱授權頁面。

計劃中的功能包括

您可以在功能比較、我們每季更新的路線圖以及公開的 GitHub issues 上找到更多詳細資訊。

以下是一些資源，可讓您更了解 Data Grid