跳到主要內容
+

資料格線 - 開始使用

開始使用您最後需要的 React 資料格線。安裝套件、設定欄、提供列，即可開始使用。

安裝

使用您最愛的套件管理器，安裝 @mui/x-data-grid-pro 或 @mui/x-data-grid-premium (商業版本)，或 @mui/x-data-grid (免費社群版本)。

npm install @mui/x-data-grid

Data Grid 套件對 @mui/material 有 peer dependency。如果您尚未在專案中使用它，可以使用以下指令安裝：

npm install @mui/material @emotion/react @emotion/styled

請注意，react 和 react-dom 也是 peer dependencies

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

樣式引擎

Material UI 預設使用 Emotion 作為樣式引擎。如果您想改用 styled-components，請執行：

npm install @mui/styled-engine-sc styled-components

快速開始

首先，您必須如下所示匯入元件。為避免名稱衝突，完整功能的企業格線元件命名為 Data Grid Pro，免費社群版則命名為 Data Grid。

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

定義列

列是鍵值對物件，將欄名稱作為鍵，其值作為值。您也應該在每個列上提供 id 屬性，以允許差異更新和更佳效能。

這是一個範例

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

定義欄

與列類似，欄是使用 GridColDef 介面的一組屬性定義的物件。它們透過其 field 屬性對應到列。

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

您可以匯入 GridColDef 以查看所有欄屬性。

示範

總而言之，這就是您開始使用所需的一切，如您在這個即時互動示範中所見

import * as React from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

TypeScript

為了從 CSS 覆寫 和 預設屬性自訂 中獲益，TypeScript 使用者需要匯入以下類型。在內部，它使用模組擴充來擴展預設主題結構。

import type {} from '@mui/x-data-grid/themeAugmentation';
import type {} from '@mui/x-data-grid-pro/themeAugmentation';
import type {} from '@mui/x-data-grid-premium/themeAugmentation';

const theme = createTheme({
  components: {
    // Use `MuiDataGrid` on DataGrid, DataGridPro and DataGridPremium
    MuiDataGrid: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

授權

雖然我們的核心函式庫完全以 MIT 授權授權，但 MUI X 的部分元件以商業授權提供。請注意授權條款。

方案

此元件提供 不同方案

您可以在 授權頁面 中找到更多關於方案的資訊。

功能比較

下表總結了社群版 Data Grid 和企業版 Data Grid Pro 元件中可用的功能。企業版包含社群版的所有功能。企業版元件提供兩種方案：專業版和豪華版。

功能 社群版 專業版 豪華版
欄
欄群組 ✅ ✅ ✅
欄跨越 ✅ ✅ ✅
欄調整大小 ✅ ✅ ✅
欄自動調整大小 ✅ ✅ ✅
欄重新排序 ❌ ✅ ✅
欄固定 ❌ ✅ ✅
列
列高度 ✅ ✅ ✅
列跨越 ✅ ✅ ✅
列重新排序 ❌ ✅ ✅
列固定 ❌ ✅ ✅
選取
單列選取 ✅ ✅ ✅
核取方塊選取 ✅ ✅ ✅
多列選取 ❌ ✅ ✅
儲存格範圍選取 ❌ ❌ ✅
篩選
快速篩選器 ✅ ✅ ✅
欄篩選器 ✅ ✅ ✅
多欄篩選 ❌ ✅ ✅
標頭篩選 ❌ ✅ ✅
排序
欄排序 ✅ ✅ ✅
多欄排序 ❌ ✅ ✅
分頁
分頁 ✅ ✅ ✅
分頁 > 每頁 100 列 ❌ ✅ ✅
編輯
列編輯 ✅ ✅ ✅
儲存格編輯 ✅ ✅ ✅
匯入與匯出
CSV 匯出 ✅ ✅ ✅
列印 ✅ ✅ ✅
剪貼簿複製 ✅ ✅ ✅
剪貼簿貼上 ❌ ❌ ✅
Excel 匯出 ❌ ❌ ✅
渲染
可自訂元件 ✅ ✅ ✅
欄虛擬化 ✅ ✅ ✅
列虛擬化 > 100 列 ❌ ✅ ✅
分組與樞紐分析
樹狀資料 ❌ ✅ ✅
主從明細 ❌ ✅ ✅
列分組 ❌ ❌ ✅
聚合 ❌ ❌ ✅
樞紐分析 ❌ ❌ 🚧
其他
無障礙功能 ✅ ✅ ✅
鍵盤導航 ✅ ✅ ✅
本地化 ✅ ✅ ✅

API