Table

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

Импорт и базовая структура

Для начала необходимо импортировать компонент Table и связанный тип данных:

import { Table } from 'antd';

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

  1. columns — массив объектов, описывающих заголовки и настройки колонок.
  2. dataSource — массив объектов с данными для отображения.

Пример базовой таблицы:

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Возраст',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Адрес',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'Иван Иванов',
    age: 32,
    address: 'Москва, ул. Ленина, 10',
  },
  {
    key: '2',
    name: 'Мария Петрова',
    age: 28,
    address: 'Санкт-Петербург, ул. Невский, 5',
  },
];

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

Настройка колонок

Каждая колонка может быть настроена через следующие свойства:

  • title — заголовок колонки.
  • dataIndex — ключ из объекта данных.
  • key — уникальный идентификатор колонки.
  • render — функция для кастомного отображения данных.

Пример использования render для форматирования ячеек:

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <strong>{text}</strong>,
  },
  {
    title: 'Возраст',
    dataIndex: 'age',
    key: 'age',
    render: (age) => `${age} лет`,
  },
];

Сортировка и фильтры

Ant Design поддерживает встроенную сортировку и фильтрацию:

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  {
    title: 'Возраст',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
    filters: [
      { text: 'До 30', value: '30' },
      { text: '30 и старше', value: '30+' },
    ],
    onFilter: (value, record) => {
      if (value === '30') return record.age < 30;
      return record.age >= 30;
    },
  },
];

Сортировка работает через функцию sorter, а фильтры задаются через массив объектов filters и функцию onFilter.

Пагинация

Компонент Table автоматически поддерживает пагинацию. Параметры можно настроить через объект pagination:

<Table
  columns={columns}
  dataSource={data}
  pagination={{ pageSize: 5, showSizeChanger: true, pageSizeOptions: ['5', '10', '20'] }}
/>
  • pageSize — количество записей на странице.
  • showSizeChanger — позволяет пользователю выбирать количество записей.
  • pageSizeOptions — список возможных вариантов выбора.

Выбор строк

Для взаимодействия с таблицей часто требуется возможность выбора строк:

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log('Выбранные ключи:', selectedRowKeys);
    console.log('Выбранные строки:', selectedRows);
  },
};

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

Свойство rowSelection позволяет включать чекбоксы, отслеживать выбранные строки и настраивать поведение выбора.

Группировка и объединение ячеек

Объединение ячеек выполняется через свойства colSpan и rowSpan в функции render:

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
    render: (text, record, index) => ({
      children: text,
      props: { rowSpan: index % 2 === 0 ? 2 : 0 },
    }),
  },
];

Расширяемые строки

Для отображения дополнительной информации можно использовать expandedRowRender:

<Table
  columns={columns}
  dataSource={data}
  expandedRowRender={(record) => <p>Подробная информация: {record.address}</p>}
/>

Кастомизация стилей и тем

Стили таблицы настраиваются через CSS-классы и встроенные свойства:

  • className — добавление кастомного класса таблице.
  • rowClassName — кастомизация стилей строк через функцию.
  • scroll — горизонтальная и вертикальная прокрутка.

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

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 1200, y: 300 }}
/>

Интеграция с асинхронными данными

Для работы с динамическими данными часто используется useEffect и загрузка данных через API:

const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
  setLoading(true);
  fetch('https://api.example.com/users')
    .then((res) => res.json())
    .then((data) => setData(data))
    .finally(() => setLoading(false));
}, []);

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

Свойство loading показывает индикатор загрузки, пока данные не получены.

Встроенные действия

Для добавления действий, таких как кнопки «Редактировать» или «Удалить», используется render с компонентами Ant Design:

const columns = [
  {
    title: 'Действия',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button onCl ick={() => editUser(record.key)}>Редактировать</Button>
        <Button danger onCl ick={() => deleteUser(record.key)}>Удалить</Button>
      </Space>
    ),
  },
];

Использование компонента Space позволяет красиво выровнять элементы внутри ячейки.

Сложные таблицы с вложенными данными

Ant Design поддерживает отображение иерархических таблиц через свойство children в объектах данных:

const data = [
  {
    key: '1',
    name: 'Иван Иванов',
    age: 32,
    children: [
      { key: '1-1', name: 'Дочерний элемент', age: 5 },
    ],
  },
];

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

Вложенные строки автоматически отображаются с отступами и могут быть расширены пользователем.

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

Оглавление