資料格 - 欄位群組

將您的欄位分組。

欄位分組可讓您在標題中建立多層級的欄位階層。

定義欄位群組

您可以使用 columnGroupingModel 屬性來定義欄位群組。此屬性會接收欄位群組的陣列。

一個欄位群組至少由兩個屬性定義

• groupId：用於識別群組的字串
• children：包含群組子項的陣列

children 屬性可以包含兩種物件類型

• 類型為 { field: string } 的葉節點，它將具有對應 field 的欄位新增至此群組。
• 其他欄位群組，可讓您擁有巢狀群組。

<DataGrid
  columnGroupingModel={[
    {
      groupId: 'internal data',
      children: [{ field: 'id' }],
    },
    {
      groupId: 'character',
      children: [
        {
          groupId: 'naming',
          children: [{ field: 'lastName' }, { field: 'firstName' }],
        },
        { field: 'age' },
      ],
    },
  ]}
/>

自訂欄位群組

除了必要的 groupId 和 children 之外，您可以使用以下選用屬性來自訂欄位群組

• headerName：顯示為欄位名稱的字串 (取代 groupId)。
• description：工具提示的文字。
• headerClassName：用於樣式自訂的 CSS 類別。
• renderHeaderGroup：傳回自訂 React 元件的函式。

群組標題高度

預設情況下，欄位群組標題的高度與 欄位標題相同。這將是預設的 56 像素或使用 columnHeaderHeight 屬性設定的自訂值。

columnGroupHeaderHeight 屬性可用於獨立於欄位標題調整欄位群組標題的大小。

欄位重新排序

預設情況下，屬於群組一部分的欄位無法拖曳到其群組外部。您可以透過在欄位群組物件中設定 freeReordering: true，來自訂特定群組的此行為。

在以下範例中，「全名」欄位群組可以被分割，但其他欄位群組則不行。

可摺疊欄位群組

以下示範使用 renderHeaderGroup 來新增一個按鈕，以摺疊/展開欄位群組。

管理群組可見性 🚧

欄位群組應允許在展開/摺疊視圖之間切換，以隱藏/顯示某些欄位。

欄位群組排序 🚧

使用者可以拖放群組標題，一次移動所有群組子項，就像他們已經可以對一般欄位做的那樣。

API

• DataGrid
• DataGridPro
• DataGridPremium