如何仅对具有某些条件的列进行分组

Question

这是我的高级数据网格代码。我有一个基于该布尔字段的字段布尔值，我想显示展开组，否则想在不分组的情况下内联显示它。

const apiRef = useGridApiRef();

const initialState = useKeepGroupedColumnsHidden({
  apiRef,
  initialState: {
    sorting: {
      sortModel: [{ field: "__row_group_by_columns_group__", sort: "asc" }],
    },
    rowGrouping: {
      model: ["myGroupingField"],
    },
  },
});
<DataGridPremium
    rows={data}
    columns={[
        { field: 'myGroupingField', align: 'left', headerName: 'Group Id', width: 180, headerAlign: 'left' }
    ]}
    apiRef={apiRef}
    loading={loading}
    disableRowSelectionOnClick
    initialState={initialState}
    slots={{ toolbar: CustomToolbarWithButton }}
/>

请在这里帮助我

Answer 1

如果我理解你的问题，那么这可能会满足你的需要

import React from 'react';
import { useGridApiRef } from '@mui/x-data-grid-pro';
import { useKeepGroupedColumnsHidden } from '@mui/x-data-grid-pro';

const YourComponent = ({ data }) => {
  const apiRef = useGridApiRef();

  // Determine if grouping is enabled based on your boolean field
  const isGroupingEnabled = data.some(row => row.booleanField);

  // Set initialState based on whether grouping is enabled or not
  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      sorting: {
        sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
      },
      rowGrouping: {
        model: isGroupingEnabled ? ['myGroupingField'] : [], // Conditionally include grouping
      },
    },
  });

  return (
    <DataGridPremium
      rows={data}
      columns={[
        { field: 'myGroupingField', align: 'left', headerName: 'Group Id', width: 180, headerAlign: 'left' }
      ]}
      apiRef={apiRef}
      loading={loading}
      disableRowSelectionOnClick
      initialState={initialState}
      slots={{ toolbar: CustomToolbarWithButton }}
    />
  );
};

export default YourComponent;