Группировка столбцов

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

Основы группировки столбцов

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

Пример базовой структуры:

const columns = [
  {
    title: 'Имя пользователя',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Контактная информация',
    children: [
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: 'Телефон',
        dataIndex: 'phone',
        key: 'phone',
      },
    ],
  },
];

В этом примере “Контактная информация” является группой, объединяющей два столбца: Email и Телефон.

Визуальная структура таблицы с группировкой

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

  • Родительский заголовок: отображается сверху, объединяя дочерние.
  • Дочерние столбцы: отображаются в следующей строке заголовков.

При необходимости можно создавать несколько уровней вложенности:

const columns = [
  {
    title: 'Пользователь',
    children: [
      { title: 'Имя', dataIndex: 'firstName', key: 'firstName' },
      { title: 'Фамилия', dataIndex: 'lastName', key: 'lastName' },
    ],
  },
  {
    title: 'Контакты',
    children: [
      {
        title: 'Адрес',
        children: [
          { title: 'Город', dataIndex: 'city', key: 'city' },
          { title: 'Страна', dataIndex: 'country', key: 'country' },
        ],
      },
      { title: 'Телефон', dataIndex: 'phone', key: 'phone' },
    ],
  },
];

Здесь таблица имеет трёхуровневую структуру заголовков, что позволяет логически группировать данные по категориям.

Особенности работы с группировкой

  1. Свойство colSpan и rowSpan Ant Design автоматически рассчитывает объединение ячеек для родительских столбцов, но при необходимости их можно явно задать через colSpan и rowSpan.

    const columns = [
  {
    title: 'Статистика',
    children: [
      { title: 'Количество', dataIndex: 'count', key: 'count', colSpan: 2 },
      { title: 'Процент', dataIndex: 'percent', key: 'percent' },
    ],
  },
];

    В этом примере первый дочерний столбец объединяет две ячейки, а второй остаётся отдельным.

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

    • sorter для сортировки
    • filters и onFilter для фильтрации

    Родительский столбец не наследует функционал дочерних автоматически; его задача — только визуальная группировка.

  3. Фиксированные столбцы и ширина Для корректного отображения группированных столбцов рекомендуется задавать ширину (width) для всех уровней. Фиксированные столбцы (fixed: 'left' или fixed: 'right') работают аналогично обычным, но важно помнить, что ширина всех дочерних столбцов суммируется для родительского заголовка.

Динамическое создание группированных столбцов

Группировка может быть создана динамически на основе данных:

const groupKeys = ['email', 'phone', 'city', 'country'];

const columns = [
  { title: 'Имя', dataIndex: 'name', key: 'name' },
  {
    title: 'Контакты',
    children: groupKeys.map(key => ({
      title: key.charAt(0).toUpperCase() + key.slice(1),
      dataIndex: key,
      key,
    })),
  },
];

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

Стилизация и кастомизация заголовков

  1. Кастомные рендеры заголовка Можно использовать title как функцию или JSX-компонент:

    {
  title: () => <span style={{ color: 'red' }}>Контакты</span>,
  children: [
    { title: 'Email', dataIndex: 'email', key: 'email' },
    { title: 'Телефон', dataIndex: 'phone', key: 'phone' },
  ],
}

  2. Использование иконок и элементов управления В заголовках удобно размещать иконки, кнопки сортировки или фильтры напрямую через JSX, что повышает интерактивность таблицы.

Практические советы

  • Всегда задавать key для каждого столбца — это важно для корректной работы виртуального DOM.
  • Для больших таблиц использовать фиксированные столбцы и ширину для улучшения UX.
  • Минимизировать глубину вложенности заголовков — 2–3 уровня обычно достаточно.
  • При динамическом формировании колонок проверять наличие всех необходимых полей в данных, иначе таблица может отобразиться некорректно.

Группировка столбцов в Ant Design — мощный инструмент для структурирования данных и повышения читаемости интерфейса. Она сочетается с сортировкой, фильтрацией, кастомными рендерами и фиксированными столбцами, создавая гибкие и визуально понятные таблицы.

Оглавление