[data grid] Column Type "Boolean" Does Not Support Aggregation

[artzlite]

The problem in depth

Currently, when using MUI DataGrid Premium with columns of type "boolean", it seems that the aggregation functionality is not supported or does not work as expected. Attempts to use custom aggregation functions, such as calculating if any false exists in a grouped column of type "boolean", result in no aggregation being applied or displayed.

Expected Behavior

• Aggregation should work seamlessly with boolean columns.

• The custom aggregation function should calculate and display the aggregated value (e.g., true if all rows are true, or false if any row is false).

https://codesandbox.io/p/sandbox/react-data-grid-row-grouping-forked-xtx36k

Your environment

import React, { useState } from "react";
import {
  DataGridPremium,
  GridToolbar,
  GRID_AGGREGATION_FUNCTIONS,
} from "@mui/x-data-grid-premium";
import { Box } from "@mui/material";

const App = () => {
  const [rows, setRows] = useState([
    {
      id: 1,
      symbol: "ADVANC", // Root level field
      orderDetail: {
        symbol: "ADVANC", // Nested field
        orderQuantity: 10000,
        price: 200,
        isActive: true, // Nested boolean field
      },
      price: 200, // Root level field
      isAvailable: true, // Root level boolean field
    },
    {
      id: 2,
      symbol: "PTT",
      orderDetail: {
        symbol: "PTT",
        orderQuantity: 5000,
        price: 31.5,
        isActive: false, // Nested boolean field
      },
      price: 31.5,
      isAvailable: false, // Root level boolean field
    },
    {
      id: 3,
      symbol: "PTT",
      orderDetail: {
        symbol: "PTT",
        orderQuantity: 3000,
        price: 21.5,
        isActive: true, // Nested boolean field
      },
      price: 21.5,
      isAvailable: true, // Root level boolean field
    },
  ]);

  const worstRowAggregation = {
    apply: (params) => {
      if (params.values.length === 0) {
        return null; // No values to aggregate
      }

      // Check if any value in the array is `false`
      const hasFalse = params.values.includes(false);

      // Return the aggregated result: `false` if any value is false, otherwise `true`
      return hasFalse ? false : true;
    },
    label: "Worst",
    columnTypes: ["boolean"], // Ensure this matches the column's type
  };

  const columns = [
    {
      field: "id",
      headerName: "ID",
      width: 100,
    },
    {
      field: "symbol",
      headerName: "Symbol (Flat)",
      width: 200,
    },
    {
      field: "nestedSymbol",
      headerName: "Symbol (Nested)",
      width: 200,
      valueGetter: (_, row) => row?.orderDetail?.symbol, // Accessing nested field
    },
    {
      field: "price",
      headerName: "Price",
      width: 150,
    },
    {
      field: "isAvailable",
      headerName: "Is Available (Flat)",
      type: "boolean",
      width: 200,
      aggregation: "worst", // Use worstRowAggregation
    },
    {
      field: "isActive",
      headerName: "Is Active (Nested)",
      type: "boolean",
      width: 200,
      valueGetter: (_, row) => row?.orderDetail?.isActive, // Accessing nested boolean field
      aggregation: "worst", // Use worstRowAggregation
    },
  ];

  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        components={{ Toolbar: GridToolbar }}
        aggregationFunctions={{
          ...GRID_AGGREGATION_FUNCTIONS,
          worst: worstRowAggregation, // Adding worstRowAggregation
        }}
        initialState={{
          aggregation: {
            model: {
              isAvailable: "worst",
              isActive: "worst",
            },
          },
        }}
      />
    </Box>
  );
};

export default App;

Search keywords: Row Grouping Aggregation Boolean

Order ID: 93539

[michelengelen]

@artzlite the feature in itself works, but the boolean cell does not get rendered in pinneed rows. I tried to find an explanation on this, but couldn't find any, so I will have to resort to @flaviendelangle who built this initially in #3277. My guess is that the auto generated row will have a boolean value (check or cross icon) rendered if this check is not present.

However this could be replaced by a check if the rowNode is a group node:

--- a/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridBooleanCell.tsx
@@ -156,8 +156,10 @@ export { GridBooleanCell };
 export const renderBooleanCell: GridColDef['renderCell'] = (params: GridBooleanCellProps) => {
   if (
     params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD &&
-    isAutogeneratedRowNode(params.rowNode)
+    params.rowNode.type === 'group' &&
+    params.rowNode.isAutoGenerated
   ) {
     return '';
   }

That way this would work.
Thoughts @mui/xgrid ?

[michelengelen]

Closing this, as a solution provided by #16163 will inherently allow for higher customization fixing this on the go. Thanks for raising it @artzlite 🙇🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@artzlite How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.