ProComponents

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

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

  • Автоматическое управление состоянием: встроенные механизмы фильтрации, сортировки и пагинации.
  • Интеграция с формами: компоненты автоматически работают с Form и предоставляют удобные API для валидации и передачи данных.
  • Расширяемость: легко настраиваются и поддерживают пользовательские рендеры ячеек, строк и форм.

ProTable

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

Основные свойства

  • columns: массив объектов с описанием колонок, включая dataIndex, title, render и valueType.
  • request: функция, отвечающая за загрузку данных с сервера. Принимает параметры фильтров, пагинации и сортировки.
  • rowKey: уникальный идентификатор строки, часто id или key.
  • search: объект для настройки панели поиска с опциями filterType, defaultCollapsed, labelWidth.

Особенности работы

  1. Серверная обработка: при использовании свойства request таблица автоматически отправляет параметры запроса на сервер.
  2. Фильтры и сортировка: встроенные элементы интерфейса позволяют пользователю сортировать и фильтровать данные без дополнительного кода.
  3. Динамическая рендеринга форм: для каждой строки можно задать editable, позволяя редактировать данные на месте.

Пример использования

import { ProTable } from '@ant-design/pro-components';
import React from 'react';

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    valueType: 'text',
  },
  {
    title: 'Возраст',
    dataIndex: 'age',
    valueType: 'digit',
  },
  {
    title: 'Дата регистрации',
    dataIndex: 'createdAt',
    valueType: 'dateTime',
  },
];

const requestData = async (params) => {
  const response = await fetch(`/api/users?${new URLSearchParams(params)}`);
  const data = await response.json();
  return {
    data: data.items,
    success: true,
    total: data.total,
  };
};

const UsersTable = () => (
  <ProTable
    columns={columns}
    request={requestData}
    rowKey="id"
    search={{ defaultCollapsed: false }}
    pagination={{ pageSize: 10 }}
  />
);

export default UsersTable;

ProForm

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

Ключевые свойства

  • onFinish: обработчик отправки формы.
  • initialValues: начальные значения полей формы.
  • submitter: конфигурация кнопок отправки и отмены.

Поддерживаемые поля

  • ProFormText — текстовое поле.
  • ProFormSelect — выпадающий список.
  • ProFormDatePicker — выбор даты.
  • ProFormDigit — числовое поле.
  • ProFormSwitch — переключатель boolean.

Пример динамической формы

import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-components';

const UserForm = () => (
  <ProForm
    onFin ish={async (values) => {
      console.log('Submitted values:', values);
    }}
    initialValues={{ role: 'user' }}
  >
    <ProFormText name="name" label="Имя" placeholder="Введите имя" />
    <ProFormSelect
      name="role"
      label="Роль"
      options={[
        { label: 'Администратор', value: 'admin' },
        { label: 'Пользователь', value: 'user' },
      ]}
    />
  </ProForm>
);

export default UserForm;

ProDescriptions

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

Основные свойства

  • columns: аналогично ProTable, описывает поля и рендер.
  • column: количество колонок в рендере.
  • layout: способ отображения horizontal или vertical.

Пример использования

import { ProDescriptions } from '@ant-design/pro-components';

const userData = {
  name: 'Иван Иванов',
  age: 28,
  role: 'Пользователь',
};

const UserDetails = () => (
  <ProDescriptions column={2} title="Информация о пользователе">
    <ProDescriptions.Item label="Имя">{userData.name}</ProDescriptions.Item>
    <ProDescriptions.Item label="Возраст">{userData.age}</ProDescriptions.Item>
    <ProDescriptions.Item label="Роль">{userData.role}</ProDescriptions.Item>
  </ProDescriptions>
);

export default UserDetails;

Интеграция с Ant Design

ProComponents полностью совместимы с остальными компонентами Ant Design. Можно использовать любые элементы UI внутри таблиц, форм и карточек, включая кнопки, модальные окна, Tabs, Dropdown и графики.

  • Редактирование таблиц: поддержка встроенных форм для редактирования строк.
  • Фильтрация и поиск: компоненты поддерживают умную фильтрацию через поля формы.
  • Настраиваемые рендеры: для каждой колонки таблицы или элемента формы можно задать render или renderFormItem для полного контроля над отображением.

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

  • Использовать свойство rowKey для уникальных идентификаторов.
  • Включать серверную пагинацию при работе с большим объемом данных.
  • Минимизировать количество ререндеров компонентов через memo и useCallback.

Пользовательские расширения

ProComponents предоставляют API для создания собственных полей и таблиц с уникальной логикой:

  • valueType позволяет создавать кастомные типы данных, включая рендер и редактирование.
  • editable для ProTable позволяет комбинировать несколько режимов редактирования.
  • Поддержка асинхронных источников данных через request и динамических зависимостей полей форм.

Эти возможности делают ProComponents идеальным инструментом для построения административных панелей, CRM-систем, аналитических дашбордов и любых интерфейсов с интенсивной работой с данными.

Оглавление