DOCSEARCHbyAlgolia
Submit Docs

ProComponents

repository·master·Indexed 26 days ago

https://github.com/ant-design/pro-components

A collection of high-level React components for building enterprise-grade applications, extending Ant Design with advanced data handling and complex UI patterns. It includes specialized components like ProTable and ProForm, and supports both imperative and schema-driven form definitions via BetaSchemaForm. The library provides sophisticated business logic capabilities, including a structured data lifecycle for forms and a flexible valueType system for consistent data handling.

Tokens
144.4K
Snippets
158
Records
878
Agent score
89%

What's inside @ant-design/pro-components

  1. Overview of ProLayout

    master
    ProLayout is a flexible layout component designed for middle and backend applications. It supports one-click layout switching and automatic menu generation. When used in conjunction with PageContainer, it can automatically generate breadcrumbs and page headers, providing an efficient way to implement page layouts and footer toolbars.

  2. Overview of ProComponents architecture

    master

    ProComponents is a suite of template components built on top of Ant Design that provides high-level abstractions to accelerate CRUD (Create, Read, Update, Delete) page development. Key components include:

    • ProLayout: Handles page layout, providing out-of-the-box menus and breadcrumbs.
    • ProTable: A table template component that abstracts network requests and table formatting.
    • ProForm: A form template component with preset common layouts and behaviors.
    • ProCard: Provides card splitting and grid layout capabilities.
    • ProDescriptions: A list template component designed to work alongside ProTable.
    • ProSkeleton: Provides page-level skeleton screens.

  3. Overview of ProComponents features

    master

    ProComponents is a suite of high-level components designed for enterprise-level applications. Key features include:

    • Comprehensive Component Suite: Includes UI elements like tables, forms, charts, and tree views.
    • Advanced Functionality: Built-in support for complex data processing and business logic.
    • Intuitive API: Designed for quick adoption and deployment with simple APIs.
    • Visual Configuration Tools: Some components support visual configuration assistants to simplify setup.
    • High Customizability: Offers extensive configuration and styling options to meet unique project needs.

  4. Overview of ProComponents

    master

    ProComponents is a React UI component library designed for enterprise-level applications, specifically targeting middle and back-end development needs. It provides out-of-the-box components with built-in complex data processing logic.

    Key Features

    • Rich Ecosystem: Over 50 components including tables, forms, charts, and maps.
    • Business Capabilities: Built-in support for enterprise features like column state management, data export, and batch operations (e.g., in ProTable).
    • TypeScript Support: Full TypeScript support for efficient development.
    • Customization: Based on the Ant Design design system, supporting theme customization and style overrides.

    Important Considerations

    • Bundle Size: The library relies on third-party dependencies. To optimize bundle size, consider using on-demand imports.
    • Browser Support: Supports modern browsers (Chrome, Firefox, Safari, Edge) and Electron. It does not support legacy browsers like IE8.

  5. Overview of ProComponents packages

    master

    ProComponents is a suite of components designed to reduce the complexity of implementing CRUD (Create, Read, Update, Delete) operations by minimizing manual state maintenance.

    Key packages include:

    • ProLayout: Provides layout solutions with built-in menu and breadcrumb functionality.
    • ProTable: Handles table logic, abstracts web requests, and manages table formatting.
    • ProForm: Provides pre-defined layouts and common form behaviors.
    • ProCard: Supports card slicing and raster layouts.
    • ProDescriptions: Allows using the same configuration as a table to display data.
    • ProSkeleton: Provides page-level skeleton screens for loading states.

  6. Introduction to ProTable

    master
    ProTable is an advanced table component designed to reduce boilerplate code in projects by encapsulating common behaviors and logic. It leverages ProForm capabilities, allowing the query area to switch between multiple forms (such as QueryFilter or LightFilter) and behave like a standard form when used in type="form" scenarios.

  7. Overview of ProForm

    master

    ProForm is a high-level wrapper around Ant Design's Form component designed to accelerate form development. It provides syntactic sugar, advanced layout settings, and preset behaviors for common scenarios like step-by-step forms, modal forms, drawer forms, and query filters.

    Key Best Practices:

    • Default Values: Use initialValues to set default values. Avoid using a component's direct value and onChange props as they may cause value binding failures.
    • Dependencies: For linking form fields or handling dependencies, use ProFormDependency or Ant Design's Form.Item with shouldUpdate (render props mode).
    • Submission: ProForm's onFinish is a Promise. If you return normally from the function, the submit button will automatically enter a loading state.
    • Value Listening: Use onValuesChange to listen to value changes to maintain a unidirectional data flow.
    • Custom Controls: Since ProForm is a thin wrapper around Ant Design's Form, you can freely mix in standard Form.Item and custom controls.

  9. Use ProCard for advanced layouts

    master

    ProCard is a versatile container component that combines Col, Row, Card, and Tabs to provide standard card styles, segmentation, and grid layouts. It is ideal for:

    • Standard content containers.
    • Grid layouts with gutters.
    • In-card split layouts (horizontal or vertical).
    • Foldable/collapsible card sections.

    Note for developers: If you encapsulate ProCard in your own component, you must expose the static property isProCard=true so it can be recognized as a ProCard element.

  11. Use ProList for advanced list presentations

    master
    ProList is a specialized variant of ProTable designed to present data in a list format. Because its API design is similar to ProTable, you can easily switch between Table and List views by sharing the same columns configuration. Use ProList when you need a standard list presentation or the ability to toggle between list and table forms.

  12. Use StepsForm to orchestrate multi-step forms

    master

    The StepsForm component manages a sequence of nested forms using a context Provider. Each inner form maintains its own snapshot of values, which StepsForm merges into a single payload upon final submission.

    Key Behaviors:

    • Data Merging: Values from all steps are merged and passed to onFinish at the end.
    • Form Provider Extension: StepsForm extends Ant Design's Form.Provider. Note that serialization (e.g., converting dayjs objects) follows the ProForm pipeline. Consequently, the values received in onFormFinish or onFormChange are the raw field values managed by the Provider.
    • Flow Control: If onFinish returns a truthy value, the flow resets back to the first step.