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

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

Сортировка данных

Для активации сортировки используется свойство sorter в колонках таблицы. Оно может принимать функцию сравнения или булевое значение для использования стандартной сортировки по типу данных.

Пример базовой сортировки по числовому полю:

import { Table } from 'antd';

const data = [
  { key: 1, name: 'Алексей', age: 32 },
  { key: 2, name: 'Мария', age: 28 },
  { key: 3, name: 'Иван', age: 45 },
];

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Возраст',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
  },
];

<Table dataSource={data} columns={columns} />;

Особенности сортировки:

  • sortOrder позволяет задать начальный порядок сортировки (ascend или descend).
  • Для множественной сортировки используется массив колонок с активными сортировками.
  • Функция sorter должна возвращать отрицательное число, ноль или положительное, аналогично стандартной функции compare в JavaScript.

Фильтрация данных

Фильтрация в Ant Design настраивается через свойства filters и onFilter в колонках таблицы. Это позволяет пользователю выбирать только интересующие записи.

Пример фильтрации по имени:

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
    filters: [
      { text: 'Алексей', value: 'Алексей' },
      { text: 'Мария', value: 'Мария' },
    ],
    onFilter: (value, record) => record.name.includes(value),
  },
  {
    title: 'Возраст',
    dataIndex: 'age',
    key: 'age',
  },
];

Ключевые моменты фильтрации:

  • filters — массив объектов с text (отображаемое название) и value (значение для фильтрации).
  • onFilter — функция, которая возвращает true, если запись должна отображаться, и false, если нет.
  • Можно комбинировать фильтры для нескольких колонок одновременно.

Продвинутая сортировка и фильтрация

Сортировка с использованием состояния

Для управления сортировкой и фильтрацией из кода применяется свойство sorter вместе с onChange. Это позволяет синхронизировать сортировку с серверными данными или локальным состоянием компонента.

const [sortedInfo, setSortedInfo] = useState({});
const [filteredInfo, setFilteredInfo] = useState({});

const handleChange = (pagination, filters, sorter) => {
  setSortedInfo(sorter);
  setFilteredInfo(filters);
};

<Table
  columns={columns}
  dataSource={data}
  onCha nge={handleChange}
/>;
  • sorter в handleChange содержит поля columnKey, order и field.
  • filters — объект с активными фильтрами по колонкам.
  • Использование состояния позволяет создавать контролируемые таблицы с сохранением порядка сортировки и выбранных фильтров.

Фильтрация с множественным выбором

Ant Design поддерживает фильтры с чекбоксами для выбора нескольких значений:

filters: [
  { text: 'Алексей', value: 'Алексей' },
  { text: 'Мария', value: 'Мария' },
  { text: 'Иван', value: 'Иван' },
],
onFilter: (value, record) => record.name.includes(value),
filterMultiple: true
  • filterMultiple по умолчанию true, позволяет выбрать несколько фильтров.
  • Для одиночного выбора достаточно установить filterMultiple: false.

Сочетание сортировки и фильтрации

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

const handleTableChange = (pagination, filters, sorter) => {
  fetchData({
    sortField: sorter.field,
    sortOrder: sorter.order,
    filters: filters,
    page: pagination.current
  });
};

Преимущества такого подхода:

  • Возможность обработки больших массивов данных без загрузки их полностью в клиент.
  • Поддержка сложных комбинаций фильтров и сортировок.
  • Полный контроль над отображением данных в таблице.

Настройка интерфейса фильтров и сортировки

Ant Design позволяет менять внешний вид фильтров и сортировок:

  • sortDirections — массив, задающий последовательность возможных направлений сортировки (['ascend', 'descend']).
  • filterIcon — кастомная иконка для фильтра.
  • filterDropdown — полностью кастомный элемент выпадающего фильтра с любым JSX.

Пример кастомного фильтра:

{
  title: 'Имя',
  dataIndex: 'name',
  key: 'name',
  filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
    <div style={{ padding: 8 }}>
      <input
        value={selectedKeys[0]}
        onCha nge={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
      />
      <button onCl ick={confirm}>Применить</button>
    </div>
  ),
  onFilter: (value, record) => record.name.includes(value),
}

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

Оптимизация производительности

При работе с большими таблицами рекомендуется:

  • Использовать серверную фильтрацию и сортировку.
  • Ограничивать рендеринг через пагинацию (pagination).
  • Применять rowKey для идентификации строк и оптимизации ререндеринга.
  • Использовать React.memo для колонок с кастомными компонентами, чтобы избежать лишних пересчетов.

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

Оглавление