Базовая настройка DataGrid

Для работы с компонентом DataGrid необходимо установить пакет @mui/x-data-grid:

npm install @mui/x-data-grid

или

yarn add @mui/x-data-grid

После установки компонент импортируется из пакета:

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

DataGrid — это мощный инструмент для отображения больших таблиц с возможностью сортировки, фильтрации, постраничной навигации и редактирования данных.

Основная структура DataGrid

Компонент DataGrid требует два ключевых свойства: rows и columns.

  • columns — массив объектов, описывающих колонки таблицы.
  • rows — массив объектов, представляющих строки данных.

Пример базовой таблицы:

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'firstName', headerName: 'Имя', width: 130 },
  { field: 'lastName', headerName: 'Фамилия', width: 130 },
  { field: 'age', headerName: 'Возраст', type: 'number', width: 90 },
];

const rows = [
  { id: 1, lastName: 'Иванов', firstName: 'Иван', age: 35 },
  { id: 2, lastName: 'Петров', firstName: 'Пётр', age: 42 },
  { id: 3, lastName: 'Сидоров', firstName: 'Сидор', age: 29 },
];

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5]}
  checkboxSelection
/>
  • pageSize — количество строк на странице.
  • rowsPerPageOptions — массив вариантов выбора размера страницы.
  • checkboxSelection — добавляет колонку с чекбоксами для выбора строк.

Настройка колонок

Каждая колонка имеет ряд ключевых свойств:

  • field — уникальный идентификатор поля.
  • headerName — отображаемое название колонки.
  • width — ширина колонки в пикселях.
  • type — тип данных (string, number, date, boolean).
  • sortable — разрешает сортировку (по умолчанию true).
  • editable — разрешает редактирование ячеек.
  • renderCell — кастомный рендеринг содержимого ячейки.

Пример кастомного рендера:

{
  field: 'fullName',
  headerName: 'Полное имя',
  width: 200,
  valueGetter: (params) =>
    `${params.row.firstName || ''} ${params.row.lastName || ''}`,
}

valueGetter используется для вычисления значения на основе данных строки.

Работа с редактированием

DataGrid поддерживает редактирование прямо в таблице. Для включения нужно добавить свойство editable к колонке:

{ field: 'age', headerName: 'Возраст', type: 'number', width: 90, editable: true }

Для отслеживания изменений используется событие onCellEditCommit:

<DataGrid
  rows={rows}
  columns={columns}
  onCellEditCom mit={(params) => {
    console.log('Изменение ячейки:', params);
  }}
/>
  • params.id — идентификатор строки.
  • params.field — поле, которое редактировалось.
  • params.value — новое значение.

Сортировка и фильтрация

Сортировка осуществляется автоматически при установке sortable: true в колонке. Для контроля порядка сортировки можно использовать свойство sortModel:

const [sortModel, setSortModel] = React.useState([
  { field: 'age', sort: 'asc' },
]);

<DataGrid
  rows={rows}
  columns={columns}
  sortModel={sortModel}
  onSortModelCha nge={(model) => setSortModel(model)}
/>

Фильтрация включается через filterModel:

const [filterModel, setFilterModel] = React.useState({
  items: [{ columnField: 'age', operatorValue: '>=', value: '30' }],
});

<DataGrid
  rows={rows}
  columns={columns}
  filterModel={filterModel}
  onFilterModelCha nge={(model) => setFilterModel(model)}
/>
  • operatorValue поддерживает такие значения, как =, !=, >=, <=, contains.

Пагинация и управление страницами

Для больших таблиц DataGrid поддерживает встроенную пагинацию. Ключевые свойства:

  • pageSize — количество строк на странице.
  • onPageChange — событие при смене страницы.
  • paginationMode — режим пагинации (client или server).

Пример:

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5, 10, 20]}
  onPageCha nge={(newPage) => console.log('Текущая страница:', newPage)}
/>

Для серверной пагинации (paginationMode="server") необходимо самостоятельно подгружать данные с сервера при смене страницы.

Выбор строк

Для добавления возможности выбора строк используется checkboxSelection и события onSelectionModelChange:

<DataGrid
  rows={rows}
  columns={columns}
  checkboxSelection
  onSelectionModelCha nge={(ids) => console.log('Выбранные строки:', ids)}
/>
  • ids — массив идентификаторов выбранных строк.
  • Можно комбинировать с selectionModel для программного управления выбором.

Кастомизация стилей

DataGrid использует систему sx для стилизации:

<DataGrid
  rows={rows}
  columns={columns}
  sx={{
    border: 2,
    borderColor: 'primary.main',
    '& .MuiDataGrid-cell': { color: 'secondary.main' },
  }}
/>
  • Можно изменять границы, цвет текста, фон строк.
  • getRowClassName позволяет динамически назначать CSS-классы строкам.
<DataGrid
  rows={rows}
  columns={columns}
  getRowClassName={(params) =>
    params.row.age > 40 ? 'age-old' : 'age-young'
  }
/>

CSS:

.age-old {
  background-color: #fdecea;
}
.age-young {
  background-color: #eaf7fd;
}

Интеграция с серверными данными

Для работы с API DataGrid обеспечивает свойства paginationMode="server" и sortingMode="server":

<DataGrid
  rows={rows}
  columns={columns}
  paginationMode="server"
  sortingMode="server"
  onPageCha nge={fetchPage}
  onSortModelCha nge={fetchSortedData}
/>
  • fetchPage — функция, подгружающая данные текущей страницы.
  • fetchSortedData — функция, подгружающая данные с учетом сортировки.

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

Заключение

(Инструкция строго не требует раздела «Заключение», поэтому данный блок не нужен; все ключевые настройки DataGrid рассмотрены выше.)

Оглавление