or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cards.mddescriptions.mdfield-rendering.mdform-components.mdindex.mdlayout.mdproviders.mdskeleton.mdtable-list.mdutilities.md
tile.json

index.mddocs/

@ant-design/pro-components

@ant-design/pro-components is a comprehensive React UI component library designed for enterprise-level applications that extends Ant Design with advanced, high-level components. It provides sophisticated data handling capabilities through components like ProTable, ProForm, ProList, and ProLayout that simplify complex business scenarios such as data tables with search/filter/pagination, advanced forms with validation and field dependencies, and responsive enterprise application layouts.

Package Information

  • Package Name: @ant-design/pro-components
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ant-design/pro-components
  • Peer Dependencies: antd ^4.24.15 || ^5.11.2, react >=17.0.0, react-dom >=17.0.0

Core Imports

import { 
  ProTable, 
  ProForm, 
  ProLayout, 
  ProCard, 
  ProField 
} from "@ant-design/pro-components";

For specific components:

import { 
  ProTable,
  ProForm,
  ProFormText,
  ProFormSelect,
  ProLayout,
  PageContainer,
  ProCard,
  ProField,
  ProList,
  ProDescriptions
} from "@ant-design/pro-components";

CommonJS:

const { 
  ProTable, 
  ProForm, 
  ProLayout, 
  ProCard, 
  ProField 
} = require("@ant-design/pro-components");

Basic Usage

import React from 'react';
import { 
  ProTable, 
  ProForm, 
  ProFormText, 
  ProLayout,
  PageContainer 
} from "@ant-design/pro-components";

// Basic ProTable usage
const MyTable = () => {
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age', valueType: 'digit' },
    { title: 'Email', dataIndex: 'email', key: 'email' }
  ];

  return (
    <ProTable
      columns={columns}
      request={async (params) => {
        // Fetch data from API
        const response = await fetch('/api/users');
        const data = await response.json();
        return { data, success: true, total: data.length };
      }}
      search={{ labelWidth: 'auto' }}
      pagination={{ pageSize: 10 }}
    />
  );
};

// Basic ProForm usage
const MyForm = () => {
  return (
    <ProForm
      onFinish={async (values) => {
        console.log(values);
        return true;
      }}
    >
      <ProFormText
        name="username"
        label="Username"
        placeholder="Enter username"
        rules={[{ required: true }]}
      />
      <ProFormText.Password
        name="password"
        label="Password"
        placeholder="Enter password"
        rules={[{ required: true }]}
      />
    </ProForm>
  );
};

// Basic ProLayout usage
const App = () => {
  return (
    <ProLayout
      title="My App"
      layout="mix"
      menuDataRender={() => [
        { path: '/', name: 'Home', icon: 'home' },
        { path: '/users', name: 'Users', icon: 'user' }
      ]}
    >
      <PageContainer title="Dashboard">
        <div>Content goes here</div>
      </PageContainer>
    </ProLayout>
  );
};

Architecture

@ant-design/pro-components is built around several key architectural patterns:

  • Aggregator Package: Re-exports components from 10 specialized sub-packages for seamless integration
  • ProField System: Universal field rendering supporting 25+ value types with consistent behavior across all components
  • Provider Architecture: Centralized configuration, theming, and internationalization through context providers
  • Form Integration: Deep integration with Ant Design's form system while providing enhanced validation and field management
  • Table Enhancement: Advanced table capabilities built on Ant Design's Table with search, filtering, editing, and data management
  • Layout Framework: Complete admin interface framework with responsive design and customizable navigation
  • TypeScript First: Full TypeScript support with comprehensive type definitions for all components and utilities

Capabilities

Form Components

Complete form solution with 25+ specialized form field components, validation, dependencies, and advanced layouts including modal and drawer forms.

// Main form components
function ProForm(props: ProFormProps): JSX.Element;
function ModalForm(props: ModalFormProps): JSX.Element;
function DrawerForm(props: DrawerFormProps): JSX.Element;
function StepsForm(props: StepsFormProps): JSX.Element;
function QueryFilter(props: QueryFilterProps): JSX.Element;

// Form field components (25+ available)
function ProFormText(props: ProFormTextProps): JSX.Element;
function ProFormSelect(props: ProFormSelectProps): JSX.Element;
function ProFormDatePicker(props: ProFormDatePickerProps): JSX.Element;
function ProFormDigit(props: ProFormDigitProps): JSX.Element;

interface ProFormProps extends FormProps {
  onFinish?: (values: any) => Promise<boolean | void>;
  submitter?: SubmitterProps | false;
  form?: FormInstance;
  initialValues?: Record<string, any>;
  layout?: 'horizontal' | 'vertical' | 'inline';
}

Form Components

Data Descriptions

Enhanced descriptions component with data fetching, inline editing capabilities, and ProField integration for displaying structured information.

// Main descriptions components
function ProDescriptions<T = any>(props: ProDescriptionsProps<T>): JSX.Element;
function ProDescriptionsItem<T = any>(props: ProDescriptionsItemProps<T>): JSX.Element;

interface ProDescriptionsProps<T> {
  dataSource?: T;
  request?: (params: any) => Promise<RequestData<T>>;
  columns?: ProDescriptionsItemProps<T>[];
  editable?: RowEditableConfig<T>;
  actionRef?: React.MutableRefObject<ProDescriptionsActionType>;
  loading?: boolean;
  emptyText?: React.ReactNode;
}

interface ProDescriptionsItemProps<T> {
  label?: React.ReactNode;
  dataIndex?: keyof T;
  valueType?: ProFieldValueType;
  valueEnum?: ProSchemaValueEnumType;
  render?: (text: any, record: T) => React.ReactNode;
  editable?: boolean;
  copyable?: boolean;
}

Data Descriptions

Table and List Components

Advanced data table with search, filtering, editing, drag-and-drop sorting, and comprehensive data management capabilities.

// Main table components
function ProTable<T = any>(props: ProTableProps<T>): JSX.Element;
function EditableProTable<T = any>(props: EditableProTableProps<T>): JSX.Element;
function DragSortTable<T = any>(props: DragTableProps<T>): JSX.Element;
function ProList<T = any>(props: ProListProps<T>): JSX.Element;

interface ProTableProps<T> {
  columns: ProColumns<T>;
  request?: (params: any) => Promise<RequestData<T>>;
  dataSource?: T[];
  search?: SearchConfig | false;
  toolBarRender?: (action: ActionType) => React.ReactNode[];
  pagination?: PaginationProps | false;
  editable?: TableRowEditable<T>;
}

interface RequestData<T> {
  data: T[];
  success: boolean;
  total?: number;
}

Table and List Components

Layout Components

Complete admin layout solution with navigation, page containers, breadcrumbs, headers, and responsive design.

// Main layout components
function ProLayout(props: ProLayoutProps): JSX.Element;
function PageContainer(props: PageContainerProps): JSX.Element;
function ProBreadcrumb(props: ProBreadcrumbProps): JSX.Element;
function FooterToolbar(props: FooterToolbarProps): JSX.Element;

interface ProLayoutProps {
  title?: string;
  logo?: React.ReactNode;
  layout?: 'side' | 'top' | 'mix';
  menuDataRender?: () => MenuDataItem[];
  onMenuHeaderClick?: () => void;
  headerRender?: (props: HeaderProps) => React.ReactNode;
  footerRender?: (props: FooterProps) => React.ReactNode;
}

interface PageContainerProps {
  title?: React.ReactNode;
  breadcrumb?: BreadcrumbProps;
  extra?: React.ReactNode;
  content?: React.ReactNode;
  tabList?: TabPaneProps[];
}

Layout Components

Field Rendering System

Universal field renderer supporting 25+ value types with consistent display and editing behavior across all components.

// Main field component
function ProField<T = any>(props: ProFieldProps<T>): JSX.Element;

// Specialized field components
function FieldText(props: FieldTextProps): JSX.Element;
function FieldMoney(props: FieldMoneyProps): JSX.Element;
function FieldDatePicker(props: FieldDatePickerProps): JSX.Element;
function FieldSelect(props: FieldSelectProps): JSX.Element;

interface ProFieldProps<T> {
  text: T;
  valueType?: ProFieldValueType;
  mode?: 'read' | 'edit';
  render?: (text: T, props: ProFieldProps<T>) => React.ReactNode;
  renderFormItem?: (text: T, props: ProFieldProps<T>) => React.ReactNode;
  valueEnum?: ProSchemaValueEnumType;
}

type ProFieldValueType = 
  | 'text' | 'textarea' | 'password' | 'money' | 'percent' | 'digit' 
  | 'date' | 'dateTime' | 'dateRange' | 'time' | 'select' | 'checkbox'
  | 'radio' | 'switch' | 'progress' | 'rate' | 'color' | 'image';

Field Rendering

Card Components

Enhanced card components with statistics display, selection capabilities, and advanced layouts.

// Main card components
function ProCard(props: ProCardProps): JSX.Element;
function CheckCard(props: CheckCardProps): JSX.Element;
function StatisticCard(props: StatisticCardProps): JSX.Element;

interface ProCardProps {
  title?: React.ReactNode;
  extra?: React.ReactNode;
  split?: 'vertical' | 'horizontal';
  bordered?: boolean;
  headerBordered?: boolean;
  collapsible?: boolean;
  size?: 'default' | 'small';
  type?: 'inner' | 'default';
  actions?: React.ReactNode[];
}

interface CheckCardProps {
  title?: React.ReactNode;
  description?: React.ReactNode;
  checked?: boolean;
  defaultChecked?: boolean;
  disabled?: boolean;
  value?: any;
  onChange?: (checked: boolean) => void;
}

Card Components

Provider System

Configuration, theming, and internationalization management for all Pro components.

// Main provider components
function ProConfigProvider(props: ConfigContextPropsType): JSX.Element;
function ConfigConsumer(props: ConfigConsumerProps): JSX.Element;

// Provider contexts
const ProProvider: React.Context<ConfigContextPropsType>;
const ProConfigContext: React.Context<ConfigContextPropsType>;

// Hooks and utilities
function useIntl(): IntlType;
function useStyle(componentName: string): any;

interface ConfigContextPropsType {
  intl?: IntlType;
  valueTypeMap?: Record<string, ProRenderFieldPropsType>;
  theme?: any;
  token?: ProTokenType;
  hashed?: boolean;
}

Provider System

Utility Functions and Hooks

Comprehensive collection of utility functions, custom hooks, and helper components for enhanced development experience.

// Utility components
function ErrorBoundary(props: ErrorBoundaryProps): JSX.Element;
function LabelIconTip(props: LabelIconTipProps): JSX.Element;

// Data processing utilities
function merge<T>(target: T, ...sources: Partial<T>[]): T;
function omitUndefined<T>(obj: T): T;
function stringify(obj: any): string;
function nanoid(): string;

// Custom hooks
function useFetchData<T>(request: () => Promise<T>): [T | undefined, boolean, () => void];
function useEditableArray<T>(defaultValue: T[]): [T[], EditableArrayUtils<T>];
function useDebounceFn<T extends (...args: any[]) => any>(fn: T, wait: number): T;
function useBreakpoint(): Record<string, boolean>;

// Form utilities
function transformKeySubmitValue<T>(values: T, dataIndex: string): T;
function pickProFormItemProps(props: any): FormItemProps;

Utilities

Skeleton Components

Loading state components for different UI patterns including tables, lists, descriptions, and page layouts.

// Main skeleton components
function ProSkeleton(props: ProSkeletonProps): JSX.Element;
function ListSkeleton(props: ListSkeletonProps): JSX.Element;
function TableSkeleton(props: TableSkeletonProps): JSX.Element;
function DescriptionsSkeleton(props: DescriptionsSkeletonProps): JSX.Element;

interface ProSkeletonProps {
  type?: 'list' | 'result' | 'descriptions';
  size?: 'small' | 'default' | 'large';
  active?: boolean;
  loading?: boolean;
}

Skeleton Components

Common Types

// Core types used across components
interface RequestData<T> {
  data: T[];
  success: boolean;
  total?: number;
}

interface ActionType {
  reload: () => void;
  reloadAndRest: () => void;
  reset: () => void;
  clearSelected: () => void;
}

interface MenuDataItem {
  path?: string;
  name?: string;
  icon?: React.ReactNode;
  children?: MenuDataItem[];
  hideInMenu?: boolean;
  hideChildrenInMenu?: boolean;
  authority?: string | string[];
}

interface ProFormInstance extends FormInstance {
  getFieldsFormatValue?: (nameList?: NamePath[]) => any;
  validateFieldsReturnFormatValue?: (nameList?: NamePath[]) => Promise<any>;
}

interface ProTableProps<T> {
  columns: ProColumns<T>;
  request?: (params: any) => Promise<RequestData<T>>;
  dataSource?: T[];
  loading?: boolean;
  search?: SearchConfig | false;
  pagination?: PaginationProps | false;
  toolBarRender?: (action: ActionType) => React.ReactNode[];
  headerTitle?: React.ReactNode;
  options?: OptionsType;
}

type ProColumns<T> = ProColumnType<T>[];

interface ProColumnType<T> extends ColumnType<T> {
  valueType?: ProFieldValueType;
  valueEnum?: ProSchemaValueEnumType;
  hideInSearch?: boolean;
  hideInTable?: boolean;
  hideInForm?: boolean;
  order?: number;
  fieldProps?: any;
  formItemProps?: FormItemProps;
}