ProComponents

https://pro-components.antdigital.dev/
Admin
ProComponents is a template component library built on Ant Design that provides advanced abstraction...
Tokens:3,704
Snippets:62
Trust Score:5.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Update Dependencies

Source: https://pro-components.antdigital.dev/docs/api-changes

Install the latest versions of antd and ProComponents to align with v3.0 requirements.

```bash
# 更新依赖
npm install antd@^6.0.0
npm install @ant-design/pro-components@^3.0.0-beta.1
```

--------------------------------

### Import DragSortTable

Source: https://pro-components.antdigital.dev/components/drag-sort-table

Import the DragSortTable component from the '@ant-design/pro-components' library. Ensure you have the library installed.

```js
import { DragSortTable } from '@ant-design/pro-components';
```

--------------------------------

### ProTable Request Function Example

Source: https://pro-components.antdigital.dev/components/table

The `request` API is crucial for server-side data fetching. It must return an object with `data` and `success` properties. Include `total` for manual pagination. The `request` function automatically handles loading states and re-executes when query form values or `params` change.

```typescript
const request = async (params) => {
  console.log(params);
  return {
    data: [
      // mock data
      {
        key: '1',
        name: 'John Brown', 
        age: 32,
        address: 'New York No. 1 Lake Park',
        index: 1,
      },
    ],
    // success: true,
    total: 10,
  };
};
```

--------------------------------

### ProList Import

Source: https://pro-components.antdigital.dev/components/list

How to import the ProList component into your project.

```APIDOC
## ProList Import

### Description
Import the ProList component from the `@ant-design/pro-components` package.

### Code
```javascript
import { ProList } from '@ant-design/pro-components';
```
```

--------------------------------

### Import ProSkeleton Component

Source: https://pro-components.antdigital.dev/components/skeleton

This snippet shows how to import the ProSkeleton component. It is an internal component and should not be used directly.

```javascript
import { ProSkeleton } from '@ant-design/pro-components';
```

--------------------------------

### Rollback Dependencies

Source: https://pro-components.antdigital.dev/docs/api-changes

Revert to previous versions of ProComponents and antd if necessary.

```bash
npm install @ant-design/pro-components@^2.8.10
npm install antd@^4.24.0
```

--------------------------------

### Import LoginForm and PageForm

Source: https://pro-components.antdigital.dev/components/login-form

Import the necessary components for creating login forms. These components are part of the Pro Components library.

```javascript
import { LoginForm,PageForm } from '@ant-design/pro-components';
```

--------------------------------

### ProTable Import

Source: https://pro-components.antdigital.dev/components/table

How to import the ProTable component into your project.

```APIDOC
## ProTable Import

### Description
Import the ProTable component using the following statement.

### Code
```javascript
import { ProTable } from '@ant-design/pro-components';
```
```

--------------------------------

### Import ProLayout Component

Source: https://pro-components.antdigital.dev/components/layout

Import the ProLayout component from '@ant-design/pro-components' to use it in your project.

```javascript
import { ProLayout } from '@ant-design/pro-components';
```

--------------------------------

### Import StatisticCard

Source: https://pro-components.antdigital.dev/components/statistic-card

Import the StatisticCard component from '@ant-design/pro-components'.

```javascript
import { StatisticCard } from '@ant-design/pro-components';
```

--------------------------------

### Import ProList Component

Source: https://pro-components.antdigital.dev/components/list

Import the ProList component from the '@ant-design/pro-components' library to use it in your project.

```javascript
import { ProList } from '@ant-design/pro-components';
```

--------------------------------

### Import StepsForm Component

Source: https://pro-components.antdigital.dev/components/steps-form

Import the StepsForm component from '@ant-design/pro-components' to use it in your project.

```javascript
import { StepsForm } from '@ant-design/pro-components';
```

--------------------------------

### Search Deprecated APIs

Source: https://pro-components.antdigital.dev/docs/api-changes

Use grep to search for deprecated API usage within your project's source code.

```bash
# 搜索废弃 API
grep -r "columnsStateMap" src/
grep -r "hideInSearch" src/
grep -r "fixHeader" src/
grep -r "tip" src/
grep -r "TabPane" src/
grep -r "rightContentRender" src/
grep -r "plain" src/
```

--------------------------------

### Configure Global Request Converter with Umi Request

Source: https://pro-components.antdigital.dev/components

Configure a global request converter in app.tsx when using Umi's request to simplify data fetching for tables. This avoids repetitive configuration for each table.

```tsx
import { request } from 'umi';

request.interceptors.request.use((url, options) => {
  return {
    url: `${url}?X-Custom-Header: 123`,
    options: { ...options, headers: { 'X-Custom-Header': 'antd-pro' } },
  };
});
```

--------------------------------

### Import ProTable Component

Source: https://pro-components.antdigital.dev/components/table

Import the ProTable component from the '@ant-design/pro-components' library to use it in your project.

```javascript
import { ProTable } from '@ant-design/pro-components';
```

--------------------------------

### Customize Fetch for Network Requests

Source: https://pro-components.antdigital.dev/components

Customize the native fetch API to integrate with ProComponents for network requests. This allows for custom request logic when not using a dedicated library like Umi's request.

```tsx
const extendFetch = (fetch: Fetch) => (
  url: RequestInfo,
  options: RequestInit = {}, // eslint-disable-line
) => {
  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      'X-Custom-Header': 'antd-pro',
    },
  });
};

window.fetch = extendFetch(window.fetch);

```

--------------------------------

### ProTable API - request

Source: https://pro-components.antdigital.dev/components/table

Details on the `request` API for ProTable, crucial for server interactions and data fetching.

```APIDOC
## ProTable API - request

### Description
The `request` API is the most important API for ProTable. It accepts an object that must contain `data` and `success`. If manual pagination is needed, `total` is also required. The `request` function manages the `loading` state and automatically re-executes when the search form is queried or the `params` prop changes. Values from the search form and the `params` prop are passed to the `request` function.

### API
`request` (Function)

- **Parameters**
  - `params` (Object) - An object containing query parameters, search form values, and pagination information.

- **Return Value**
  - An object with the following properties:
    - `data` (Array) - The data to be displayed in the table.
    - `success` (Boolean) - Indicates if the request was successful.
    - `total` (Number, Optional) - The total number of items available for pagination.

### Example
```typescript
const request = async (params) => {
  console.log(params); // Contains query params, search form values, and pagination info
  // Simulate an API call
  const response = await fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify(params),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const data = await response.json();
  return {
    data: data.list,
    success: data.success,
    total: data.total,
  };
};

<ProTable
  request={request}
  columns={[
    // column definitions
  ]}
  rowKey="id"
/>
```

### Note
The `request` function can also be used within column definitions for specific value types that support it.
```

--------------------------------

### Import PageContainer Component

Source: https://pro-components.antdigital.dev/components/page-container

Import the PageContainer component from the '@ant-design/pro-components' library to use it in your project.

```javascript
import { PageContainer } from '@ant-design/pro-components';
```

--------------------------------

### Import undefined from Pro Components

Source: https://pro-components.antdigital.dev/components/schema

Demonstrates how to import the 'undefined' variable from the '@ant-design/pro-components' library. This import might be used for type checking or specific conditional logic.

```javascript
import { undefined } from '@ant-design/pro-components';
```
Tokens:
Raw