Редактирование ячеек

В библиотеке MUI (Material-UI) редактирование ячеек чаще всего реализуется через компонент DataGrid или DataGridPro, который предоставляет мощные возможности для отображения и взаимодействия с табличными данными. Редактирование ячеек в DataGrid разделяется на два подхода: встроенное редактирование и кастомные редакторы.

Встроенное редактирование

Для активации встроенного редактирования используется свойство editable в описании столбца. Пример:

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

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Имя', width: 200, editable: true },
  { field: 'age', headerName: 'Возраст', type: 'number', editable: true },
];

const rows = [
  { id: 1, name: 'Алексей', age: 30 },
  { id: 2, name: 'Мария', age: 25 },
];

<DataGrid rows={rows} columns={columns} pageSize={5} />

В этом примере колонки name и age становятся редактируемыми. Пользователь может кликнуть на ячейку и изменить значение напрямую.

Обработка изменений

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

const handleCellEditCommit = (params) => {
  console.log('Изменена ячейка:', params.id, params.field, params.value);
  // Здесь можно обновлять состояние или отправлять данные на сервер
};

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  onCellEditCom mit={handleCellEditCommit}
/>

Параметр params содержит:

  • id – уникальный идентификатор строки
  • field – имя поля (столбца)
  • value – новое значение ячейки

Кастомные редакторы

MUI позволяет создавать собственные редакторы для ячеек через свойство renderEditCell. Это особенно полезно, если стандартного текстового поля недостаточно (например, для выбора даты, флажка или селектора).

import { TextField } from '@mui/material';

const columns = [
  {
    field: 'name',
    headerName: 'Имя',
    width: 200,
    editable: true,
    renderEditCell: (params) => (
      <TextField
        value={params.value}
        onCha nge={(event) => params.api.setEditCellValue({ id: params.id, field: params.field, value: event.target.value })}
        variant="standard"
      />
    ),
  },
];
  • params.api.setEditCellValue – метод, который обновляет значение ячейки прямо в DataGrid.
  • renderEditCell принимает объект params, который содержит текущее значение, id строки, поле, и API для управления DataGrid.

Редактирование с валидацией

Встроенная валидация возможна через событие preProcessEditCellProps. Это позволяет проверять значение до его окончательного сохранения:

const columns = [
  {
    field: 'age',
    headerName: 'Возраст',
    type: 'number',
    editable: true,
    preProcessEditCellProps: (params) => {
      const isValid = params.props.value >= 0 && params.props.value <= 120;
      return { ...params.props, error: !isValid };
    },
  },
];
  • Если error: true, ячейка визуально подсвечивается, и изменение не принимается до корректного ввода.

Режимы редактирования

DataGrid поддерживает несколько режимов редактирования:

  • Cell – редактирование ячейки по одиночному клику или клавише Enter.
  • Row – редактирование всей строки одновременно, удобно для форм с несколькими связанными полями.
<DataGrid
  rows={rows}
  columns={columns}
  editMode="row"
/>

При editMode="row" появляется возможность подтвердить или отменить изменения всей строки через API методов commitRowChange и setRowMode.

Программное управление редактированием

Редактирование можно запускать программно с помощью методов API:

// Запуск редактирования ячейки
params.api.setCellMode(params.id, params.field, 'edit');

// Завершение редактирования
params.api.setCellMode(params.id, params.field, 'view');

Также можно отменять изменения или проверять текущее состояние ячейки через getCellMode и getCellParams.

Стилизация редактируемых ячеек

Для визуальной кастомизации используется sx или CSS классы. Например, можно выделять редактируемые ячейки другим фоном:

<DataGrid
  rows={rows}
  columns={columns}
  getCellClassName={(params) => (params.colDef.editable ? 'editable-cell' : '')}
/>

<style>
  .editable-cell {
    background-color: #f0f7ff;
  }
</style>

Итоговые возможности

Используя MUI DataGrid, редактирование ячеек можно гибко настраивать:

  • Простой inline-текст через editable: true
  • Кастомные компоненты редакторов через renderEditCell
  • Валидация данных с preProcessEditCellProps
  • Полное управление режимами редактирования (cell / row)
  • Программное управление редактированием через API методов
  • Визуальное оформление и подсветка редактируемых ячеек

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

Оглавление