Группировка строк

Группировка строк — одна из ключевых возможностей для построения сложных иерархических таблиц и сеток данных в MUI. В библиотеке @mui/x-data-grid реализован ряд инструментов для создания визуально структурированных таблиц с объединением строк по определённым критериям, что повышает читаемость и упрощает анализ данных.

Основные концепции

1. Row Grouping В MUI термин row grouping обозначает объединение строк по значению одного или нескольких полей. Это позволяет формировать группы данных, где каждая группа отображает сводную информацию по выбранному ключу.

  • groupingColDef — объект, позволяющий настраивать колонку для группировки.
  • rowGroupingModel — массив строк с именами колонок, по которым осуществляется группировка.

Пример конфигурации группировки:

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

const rows = [
  { id: 1, category: 'Фрукты', name: 'Яблоко', price: 120 },
  { id: 2, category: 'Фрукты', name: 'Банан', price: 80 },
  { id: 3, category: 'Овощи', name: 'Морковь', price: 50 },
];

const columns = [
  { field: 'category', headerName: 'Категория', width: 150 },
  { field: 'name', headerName: 'Название', width: 150 },
  { field: 'price', headerName: 'Цена', width: 100 },
];

<DataGridPro
  rows={rows}
  columns={columns}
  rowGroupingModel={['category']}
/>

В этом примере строки будут сгруппированы по полю category, создавая визуальные блоки “Фрукты” и “Овощи”.

Настройка отображения групп

2. groupDisplayType MUI позволяет изменять способ отображения групп:

  • singleColumn — все уровни группировки отображаются в одной колонке.
  • multipleColumns — каждая группа имеет отдельную колонку, соответствующую уровню вложенности.
<DataGridPro
  rows={rows}
  columns={columns}
  rowGroupingModel={['category']}
  groupingColDef={{ headerName: 'Группы', hideDescendantCount: false }}
  groupDisplayType="singleColumn"
/>

hideDescendantCount управляет отображением количества дочерних элементов в группе. Это особенно полезно для больших таблиц с глубокой иерархией.

Сводные строки и агрегаты

3. Aggregation Для групп строк можно отображать агрегированные значения, например сумму, среднее или минимальное значение. Это достигается с помощью valueGetter и aggregationFunctions.

import { GridAggregationFunction, GridAggregationModel } from '@mui/x-data-grid-pro';

const aggregationModel = {
  price: 'sum',
};

<DataGridPro
  rows={rows}
  columns={columns}
  rowGroupingModel={['category']}
  aggregationModel={aggregationModel}
/>

Здесь для каждой группы по category будет отображена сумма всех цен. MUI поддерживает предопределённые агрегатные функции: sum, avg, min, max, count, а также позволяет создавать кастомные функции.

Стилизация групп

4. CSS и слоты для кастомизации MUI предоставляет возможность изменять стиль групп с помощью slots и CSS-классов:

  • MuiDataGrid-groupingColumn — класс колонки с группами.
  • MuiDataGrid-groupCollapsed / MuiDataGrid-groupExpanded — состояние свёрнутой/развёрнутой группы.
<DataGridPro
  rows={rows}
  columns={columns}
  rowGroupingModel={['category']}
  sx={{
    '.MuiDataGrid-groupingColumn': {
      fontWeight: 'bold',
      backgroundColor: '#f5f5f5',
    },
    '.MuiDataGrid-groupExpanded': {
      color: '#1976d2',
    },
  }}
/>

Такой подход позволяет интегрировать группы в дизайн приложения без использования внешних библиотек для стилизации.

Динамическая группировка

5. Управление моделью группировки Row grouping можно изменять на лету, что важно для интерактивных таблиц с фильтрацией и сортировкой:

const [groupingModel, setGroupingModel] = useState(['category']);

<DataGridPro
  rows={rows}
  columns={columns}
  rowGroupingModel={groupingModel}
  onRowGroupingModelCha nge={(newModel) => setGroupingModel(newModel)}
/>

Это позволяет пользователю выбирать, по каким колонкам отображать группы, обеспечивая гибкую и динамичную работу с данными.

Поддержка вложенных групп

6. Множественные уровни группировки MUI позволяет создавать иерархию групп:

rowGroupingModel={['category', 'name']}

При такой конфигурации сначала строки будут сгруппированы по category, а внутри каждой категории — по name. При этом можно управлять отображением каждого уровня через groupDisplayType и настраивать агрегаты на любом уровне.

События и взаимодействие

7. Управление раскрытием групп Состояние раскрытия/свёртывания группы контролируется через событие onRowGroupExpandChange и проп expandedRowGroups:

<DataGridPro
  rows={rows}
  columns={columns}
  rowGroupingModel={['category']}
  expandedRowGroups={{ category: ['Фрукты'] }}
  onRowGroupExpandCha nge={(params) => console.log(params)}
/>

Это позволяет сохранять состояние групп после обновления данных или фильтрации, а также реализовывать сложную логику пользовательского интерфейса.

Итоговая структура

  • rowGroupingModel — задаёт колонки для группировки.
  • groupingColDef — настраивает отображение групп.
  • groupDisplayType — определяет визуальный стиль групп.
  • aggregationModel — добавляет сводные значения для групп.
  • expandedRowGroups и события — контролируют раскрытие и интерактивность.
  • Стилизация через sx и CSS-классы — обеспечивает единый дизайн.

Гибкость MUI в работе с группировкой строк позволяет создавать таблицы любой сложности: от простых сводных списков до многоуровневых отчетов с динамическим изменением структуры данных.

Оглавление