Редактируемые ячейки

Ant Design предоставляет мощные инструменты для создания таблиц с редактируемыми ячейками, что особенно полезно для управления данными в интерфейсах с большим количеством информации. Основным компонентом для работы с таблицами является <Table>, который поддерживает кастомизацию ячеек через свойства columns и render.

Настройка таблицы с редактируемыми ячейками

Редактируемые ячейки создаются через комбинацию пользовательского рендера и состояния компонента. Для этого обычно используют useState для хранения изменяемых значений.

Пример структуры колонки с редактируемой ячейкой:

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
    render: (text, record, index) => (
      <Input
        value={record.name}
        onCha nge={e => handleInputChange(e.target.value, record.key, 'name')}
      />
    ),
  },
  {
    title: 'Возраст',
    dataIndex: 'age',
    key: 'age',
    render: (text, record) => (
      <InputNumber
        min={0}
        value={record.age}
        onCha nge={value => handleInputChange(value, record.key, 'age')}
      />
    ),
  },
];

Здесь важно:

  • render – функция, которая позволяет полностью контролировать содержимое ячейки.
  • Input и InputNumber – стандартные компоненты Ant Design для текстового и числового ввода.
  • handleInputChange – функция, которая обновляет состояние таблицы при изменении значения ячейки.

Управление состоянием данных

Чтобы таблица оставалась интерактивной, необходимо хранить данные в состоянии:

const [dataSource, setDataSource] = useState(initialData);

const handleInputChange = (value, key, dataIndex) => {
  const newData = dataSource.map(item => {
    if (item.key === key) {
      return { ...item, [dataIndex]: value };
    }
    return item;
  });
  setDataSource(newData);
};
  • map используется для создания новой версии массива данных без мутаций.
  • Динамическое обновление по key и dataIndex позволяет менять только нужное поле.

Использование контекста для сложных таблиц

Для таблиц с большим количеством редактируемых ячеек рекомендуется использовать Form и контекстные формы Ant Design:

import { Form, Input, Table } from 'antd';

const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => {
  const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
  
  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[{ required: true, message: `Введите ${title}` }]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};
  • editing – флаг режима редактирования.
  • Form.Item автоматически управляет валидацией и состоянием поля.
  • Такой подход особенно удобен для массового редактирования и сохранения всех изменений через одну форму.

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

Ant Design позволяет переключать целые строки в режим редактирования, что повышает удобство работы с таблицей:

const [editingKey, setEditingKey] = useState('');

const isEditing = record => record.key === editingKey;

const edit = key => {
  setEditingKey(key);
};

const save = async key => {
  try {
    const row = await form.validateFields();
    const newData = [...dataSource];
    const index = newData.findIndex(item => item.key === key);
    if (index > -1) {
      newData[index] = { ...newData[index], ...row };
      setDataSource(newData);
      setEditingKey('');
    }
  } catch (errInfo) {
    console.log('Ошибка сохранения:', errInfo);
  }
};
  • editingKey управляет текущей редактируемой строкой.
  • form.validateFields() проверяет все поля перед сохранением.
  • save объединяет новые значения с существующей строкой.

Поддержка динамического типа ввода

Ant Design позволяет выбирать разные типы ввода в зависимости от данных. Для этого используют свойство inputType в EditableCell. Возможные варианты:

  • text → <Input />
  • number → <InputNumber />
  • select → <Select options={...} />
  • date → <DatePicker />

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

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

Для синхронизации редактируемых ячеек с сервером обычно используют эффект:

const saveToServer = async (updatedRow) => {
  try {
    await axios.post('/api/update', updatedRow);
  } catch (error) {
    console.error('Ошибка при обновлении на сервере:', error);
  }
};
  • Обновления можно выполнять после выхода из режима редактирования или через кнопку “Сохранить все”.
  • Использование async/await позволяет корректно обрабатывать ошибки.

Важные рекомендации

  • Использовать уникальные ключи для каждой строки (key), чтобы корректно отслеживать изменения.
  • Для больших таблиц применять виртуализацию (virtual), чтобы снизить нагрузку на DOM.
  • Разделять компоненты таблицы и редактируемых ячеек для повышения читаемости кода.
  • Валидация через Form.Item предотвращает некорректный ввод данных.

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

Оглавление