Выделение строк

Библиотека Ant Design (Antd) предоставляет мощные возможности для управления таблицами через компонент Table. Одной из ключевых функций является выделение строк, которое позволяет пользователю визуально отмечать выбранные элементы, а также получать их данные для дальнейшей обработки.

Основные свойства для выделения строк

Для реализации выделения строк используется объект rowSelection, который передается в компонент Table. Основные свойства:

  • type – определяет тип выделения:

    • "checkbox" – множественный выбор.
    • "radio" – выбор одной строки.

  • selectedRowKeys – массив ключей выделенных строк. Используется для контроля выбранных элементов.

  • onChange – функция обратного вызова при изменении выделения, принимает два аргумента: массив ключей и массив объектов выделенных строк.

  • getCheckboxProps – позволяет задать индивидуальные свойства для чекбоксов каждой строки, например, блокировать выделение.

Пример базовой конфигурации rowSelection:

const rowSelection = {
  type: 'checkbox',
  selectedRowKeys,
  onChange: (selectedKeys, selectedRows) => {
    setSelectedRowKeys(selectedKeys);
    setSelectedRows(selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User', // запрет выбора для конкретной строки
  }),
};

Интеграция с компонентом Table

Компонент Table принимает rowSelection как пропс, что позволяет включить функциональность выделения строк:

<Table
  rowSelection={rowSelection}
  columns={columns}
  dataSource={data}
/>
  • columns – массив объектов, описывающих колонки таблицы (title, dataIndex, key, render и другие).
  • dataSource – массив объектов данных таблицы, каждый объект должен иметь уникальный key.

Выделение строки по клику

Помимо стандартных чекбоксов, можно реализовать выделение строки при клике по ней. Для этого используется свойство onRow:

<Table
  rowSelection={rowSelection}
  columns={columns}
  dataSource={data}
  on Row={(record) => ({
    onClick: () => {
      const newSelectedKeys = selectedRowKeys.includes(record.key)
        ? selectedRowKeys.filter(k => k !== record.key)
        : [...selectedRowKeys, record.key];
      setSelectedRowKeys(newSelectedKeys);
    },
  })}
/>
  • При клике проверяется, находится ли строка уже в массиве выделенных ключей.
  • Если да, она снимается, иначе добавляется.
  • Позволяет реализовать интерактивное выделение без чекбоксов.

Выделение всех строк

Ant Design автоматически поддерживает выделение всех строк через чекбокс в заголовке таблицы. Однако можно управлять этим программно:

const selectAll = () => {
  const allKeys = data.map(item => item.key);
  setSelectedRowKeys(allKeys);
};

const deselectAll = () => {
  setSelectedRowKeys([]);
};
  • selectAll формирует массив всех ключей строк.
  • deselectAll очищает массив выбранных строк.

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

Индивидуальные стили для выделенных строк

Ant Design позволяет кастомизировать внешний вид выделенных строк с помощью свойства rowClassName:

<Table
  rowSelection={rowSelection}
  columns={columns}
  dataSource={data}
  rowClassName={(record) => selectedRowKeys.includes(record.key) ? 'selected-row' : ''}
/>

CSS пример:

.selected-row {
  background-color: #e6f7ff;
}
  • Подсветка выбранной строки делает интерфейс более наглядным.
  • Можно комбинировать с условным форматированием данных.

Динамическое управление выделением

selectedRowKeys и selectedRows обычно хранятся в состоянии компонента через useState. Это дает возможность:

  • Программно выбирать строки на основе логики.
  • Сбрасывать выделение при изменении фильтров или пагинации.
  • Отправлять выбранные строки на сервер.

Пример динамического обновления:

useEffect(() => {
  if (filterActive) {
    const filteredKeys = data.filter(item => item.active).map(item => item.key);
    setSelectedRowKeys(filteredKeys);
  } else {
    setSelectedRowKeys([]);
  }
}, [filterActive, data]);
  • Функция useEffect отслеживает изменение фильтра.
  • Выделение обновляется автоматически без дополнительного вмешательства пользователя.

Ограничение выбора строк

Иногда требуется запретить выделение отдельных строк. Для этого используется getCheckboxProps:

getCheckboxProps: (record) => ({
  disabled: record.status === 'inactive',
})
  • Заблокированные строки визуально показываются как недоступные.
  • Можно сочетать с кастомной подсветкой для улучшения UX.

Обработка событий выделения

Ключевые события:

  • onChange(selectedRowKeys, selectedRows) – срабатывает при любом изменении выделения.
  • onSelect(record, selected, selectedRows) – срабатывает при выделении или снятии отдельной строки.
  • onSelectAll(selected, selectedRows, changeRows) – срабатывает при выделении/снятии всех строк.

Пример:

const rowSelection = {
  onChange: (keys, rows) => console.log('Выделенные строки:', rows),
  onSelect: (record, selected) => console.log(record, selected),
  onSelectAll: (selected, rows) => console.log('Все строки выделены:', selected),
};
  • Позволяет легко интегрировать выделение с бизнес-логикой.
  • Можно синхронизировать состояние таблицы с другими компонентами интерфейса.

Комбинирование с пагинацией и фильтрацией

Выделение строк корректно работает с пагинацией и фильтрацией, если selectedRowKeys хранится глобально:

  • При смене страницы выбранные строки сохраняются.
  • Фильтры не сбрасывают выделение автоматически.
  • Можно реализовать интегрированное выделение по нескольким страницам.

Вывод

Механизм rowSelection в Ant Design обеспечивает гибкое и мощное управление выделением строк. Он поддерживает как стандартные чекбоксы, так и кастомное поведение по клику, динамическое обновление, стилизацию, ограничения выбора и обработку событий. Этот функционал позволяет строить сложные таблицы с интуитивным интерфейсом и полной интеграцией с бизнес-логикой приложения.

Оглавление