像 Excel 一樣彙總資料，但更簡單！

如果您曾經使用過資料密集的網格，那麼您就會了解最終使用者能夠設定不同的資料視角以收集他們正在尋找的資訊有多重要。篩選和排序等基本功能幾乎無法滿足他們的需求。

Premium Data Grid 旨在實現和增強資料分析的進階使用案例。本著這種精神，我們非常高興地宣布，從 v5.15.0 開始，您現在可以使用彙總函數，只需點擊幾下，即可提取總和、平均值、計數等資訊。

等等，什麼是彙總函數？

彙總函數用於根據給定欄位的值傳回計算結果。例如，您可能有一個金融交易清單，並且您想要取得所有交易的總和並將其顯示在摘要列中，如下面的影片所示

直覺式的最終使用者體驗

總和函數在摘要列中顯示總計是最常見的使用案例之一。但是使用者可以同時在不同的欄位中使用多個彙總函數，甚至可以與列分組結合，以彙總每個群組中子項的資料。

為了使所有這些功能協同運作良好，我們知道重點必須放在創造最佳的最終使用者體驗上。目標是讓大多數使用案例都能夠開箱即用，而無需進行任何重大的自訂。

取得每位使用者的平均交易值有多容易？請查看下面的影片以了解實際操作情況

自訂所有項目

開箱即用的體驗對我們來說非常重要，但同樣重要的是能夠自訂和擴展該功能以滿足您自己的使用案例。

您可以變更所涉及的每個元素的樣式、設定自動彙總、選擇哪些欄位可以透過哪些函數進行彙總，甚至建立您自己的自訂函數。在下面的範例中，我們建立了一個函數來取得字母順序中的第一個值

const firstAlphabeticalAggregation: GridAggregationFunction<
  string,
  string | null
> = {
  apply: (params) => {
    if (params.values.length === 0) {
      return null;
    }
    const sortedValue = params.values.sort((a = '', b = '') =>
      a.localeCompare(b),
    );
    return sortedValue[0];
  },
  // The `label` defines what's displayed in the column header when this
  // aggregation is active.
  label: 'First Alphabetical',
  // The `types` property defines which type of columns can use this
  // aggregation function. Here, we only want to propose this aggregation
  // function for `string` columns. If not defined, aggregation will be
  // available for all column types.
  columnTypes: ['string'],
};

好的，我加入了！我該如何開始？

彙總函數在 @mui/x-data-grid-premium 版本 5.15.0 或更高版本中可用。

此功能目前被視為實驗性功能，因為我們將繼續驗證其 API 並完善我們的目標。但它很穩定，而且 API 最有可能不會發生重大變更。

您可以使用 experimentalFeatures 屬性啟用此功能

<DataGridPremium experimentalFeatures={{ aggregation: true }} {...otherProps} />

就是這樣！這會在欄位選單上啟用彙總選項，預設情況下，該選項在數字和字串類型的欄位上可用。

搭配樹狀資料及更多功能使用

我們已經提到您可以自訂函數並將彙總與列分組一起使用。但還有許多其他可能性可以探索！

請查看該功能的完整文件，以更全面地了解其提供的所有功能。

列釘選

彙總頁尾列由另一個稱為列釘選的新功能提供支援。它使您可以將列釘選到資料網格的頂部或底部。釘選的列在使用者垂直捲動網格時始終可見。

列釘選在 Pro 和 Premium Data Grid 中可用。

請在列釘選文件中查看更多詳細資訊。

如果您有慷慨的心，我們正在招募使用者進行訪談！

我們希望您和我們一樣對新功能感到興奮！

與往常一樣，我們很高興收到您的來信。請隨時開啟新問題以報告錯誤或建議改進。

此外，我們正在規劃 MUI X v6，我們很樂意聽取更多關於您的痛點和使用案例。如果您想協助引導我們組件的方向，請考慮聯絡我們以安排 30 分鐘的使用者訪談。