• This repository has been archived on 02/Mar/2022
  • Stars
    star
    560
  • Rank 76,443 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🏆 Use Ant Design Table like a Pro!

此仓库已废弃

重要: 此仓库后续不再维护,也不再接受更多的特性更新。ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护,访问 https://procomponents.ant.design/table 了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。

English

@ant-design/pro-table

🏆 Use Ant Design Table like a Pro!

Demo

codesandbox

API

pro-table 在 antd 的 table 上进行了一层封装,支持了一些预设,并且封装了一些行为。这里只列出与 antd table 不同的 api。

Table

属性 描述 类型 默认值
request 一个获得 dataSource 的方法 (params?: {pageSize: number;current: number;[key: string]: any;}) => Promise<RequestData<T>> -
postData 对通过 url 获取的数据进行一些处理 (data: T[]) => T[] -
defaultData 默认的数据 T[] -
actionRef get table action React.MutableRefObject<ActionType> | ((actionRef: ActionType) => void) -
toolBarRender 渲染工具栏,支持返回一个 dom 数组,会自动增加 margin-right (action: UseFetchDataAction<RequestData<T>>) => React.ReactNode[] -
onLoad 数据加载完成后触发,会多次触发 (dataSource: T[]) => void -
onRequestError 数据加载失败时触发 (e: Error) => void -
tableClassName 封装的 table 的 className string -
tableStyle 封装的 table 的 style CSSProperties -
headerTitle 左上角的 title React.ReactNode -
options table 的工具栏,设置为 false 可以关闭它 {{ fullScreen: boolean | function, reload: boolean | function,setting: true }} { fullScreen: true, reload:true, setting: true}
search 是否显示搜索表单,传入对象时为搜索表单的配置 search config true
dateFormatter moment 的格式化方式 "string" | "number" | false string
beforeSearchSubmit 搜索之前进行一些修改 (params:T)=>T -
onSizeChange table 尺寸发生改变 `(size: 'default' 'middle'
columnsStateMap columns 的状态枚举 `{[key: string]: { show:boolean, fixed: "right" "left"} }`
onColumnsStateChange columns 状态发生改变 `(props: {[key: string]: { show:boolean, fixed: "right" "left"} }) => void`
type pro-table 类型 "form" -
form antd form 的配置 FormProps -

search

属性 描述 类型 默认值
searchText 查询按钮的文本 string 查询
resetText 重置按钮的文本 string 重置
submitText 提交按钮的文本 string 提交
collapseRender 收起按钮的 render (collapsed: boolean,showCollapseButton?: boolean,) => React.ReactNode -
collapsed 是否收起 boolean -
onCollapse 收起按钮的事件 (collapsed: boolean) => void; -
optionRender 操作栏的 render (( searchConfig: Omit<SearchConfig, 'optionRender'>, props: Omit<FormOptionProps, 'searchConfig'>, ) => React.ReactNode) | false; -

Columns

属性 描述 类型 默认值
renderText 类似 table 的 render,但是必须返回 string,如果只是希望转化枚举,可以使用 valueEnum (text: any,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => string -
render 类似 table 的 render,第一个参数变成了 dom,增加了第四个参数 action (text: React.ReactNode,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => React.ReactNode | React.ReactNode[] -
renderFormItem 渲染查询表单的输入组件 (item,props:{value,onChange}) => React.ReactNode -
ellipsis 是否自动缩略 boolean -
copyable 是否支持复制 boolean -
valueEnum 值的枚举,会自动转化把值当成 key 来取出要显示的内容 valueEnum -
valueType 值的类型 'money' | 'option' | 'date' | 'dateTime' | 'time' | 'text'| 'index' | 'indexBorder' 'text'
hideInSearch 在查询表单中不展示此项 boolean -
hideInTable 在 Table 中不展示此列 boolean -
hideInForm 在 Form 模式下 中不展示此列 boolean -
filters 表头的筛选菜单项,当值为 true 时,自动使用 valueEnum 生成 boolean | object[] false
order 决定在 查询表单中的顺序,越大越在前面 number -
formItemProps 查询表单的 props,会透传给表单项 { [prop: string]: any } -

ActionType

有些时候我们要触发 table 的 reload 等操作,action 可以帮助我们做到这一点。

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

const ref = useRef<ActionType>();

<ProTable actionRef={ref} />;

// 刷新
ref.current.reload();

// 重置所有项并刷新
ref.current.reloadAndRest();

// 加载更多
ref.current.fetchMore();

// 重置到默认值
ref.current.reset();

// 清空选中项
ref.current.clearSelected();

valueType

现在支持的值如下

类型 描述 示例
money 转化值为金额 ¥10,000.26
date 日期 2019-11-16
dateRange 日期区间 2019-11-16 2019-11-18
dateTime 日期和时间 2019-11-16 12:50:00
dateTimeRange 日期和时间区间 2019-11-16 12:50:00 2019-11-18 12:50:00
time 时间 12:50:00
option 操作项,会自动增加 marginRight,只支持一个数组,表单中会自动忽略 [<a>操作a</a>,<a>操作b</a>]
text 默认值,不做任何处理 -
textarea 与 text 相同, form 转化时会转为 textarea 组件 -
index 序号列 -
indexBorder 带 border 的序号列 -
progress 进度条 -
digit 单纯的数字,form 转化时会转为 inputNumber -

valueEnum

当前列值的枚举

interface IValueEnum {
  [key: string]:
    | React.ReactNode
    | {
        text: React.ReactNode;
        status: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
      };
}

Usage

npm install @ant-design/pro-table
# or
yarn add @ant-design/pro-table
import React, { useState } from 'react';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { Input, Button } from 'antd';

const columns: ProColumns[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    copyable: true,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'date',
    dataIndex: 'date',
    valueType: 'date',
  },
  {
    title: 'option',
    valueType: 'option',
    dataIndex: 'id',
    render: (text, row, index, action) => [
      <a
        onClick={() => {
          window.alert('确认删除?');
          action.reload();
        }}
      >
        delete
      </a>,
      <a
        onClick={() => {
          window.alert('确认刷新?');
          action.reload();
        }}
      >
        reload
      </a>,
    ],
  },
];

export default () => {
  const [keywords, setKeywords] = useState('');
  return (
    <ProTable<{}, { keywords: string }>
      size="small"
      columns={columns}
      request={() => ({
        data: [
          {
            name: 'Jack',
            age: 12,
            date: '2020-01-02',
          },
        ],
        success: true,
      })}
      rowKey="name"
      params={{ keywords }}
      toolBarRender={(action) => [
        <Input.Search
          style={{
            width: 200,
          }}
          onSearch={(value) => setKeywords(value)}
        />,
      ]}
      pagination={{
        defaultCurrent: 10,
      }}
    />
  );
};

LICENSE

MIT

More Repositories

1

ant-design

An enterprise-class UI design language and React UI library
TypeScript
89,408
star
2

ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
TypeScript
35,716
star
3

ant-design-mobile

Essential UI blocks for building mobile web apps.
TypeScript
11,415
star
4

ant-design-landing

🚵 Landing Pages of Ant Design System
JavaScript
5,928
star
5

ant-motion

🚴 Animate specification and components of Ant Design
JavaScript
4,563
star
6

pro-components

🏆 Use Ant Design like a Pro!
TypeScript
3,981
star
7

ant-design-mobile-rn

Ant Design for React Native
TypeScript
2,925
star
8

ant-design-charts

A React Chart Library
JavaScript
1,802
star
9

antd-mobile-samples

antd-mobile samples
HTML
1,142
star
10

ant-ux

🎸 A sitemap template for ux design
JavaScript
1,136
star
11

ant-design-pro-layout

🌃 Powerful and easy to use beautiful layout
TypeScript
998
star
12

ant-design-icons

⭐ Ant Design SVG Icons
TypeScript
901
star
13

antd-init

🔰 Ant Design boilerplate generator.
JavaScript
816
star
14

pro-blocks

Blocks of Ant Design Pro.
TypeScript
710
star
15

ant-design-web3

🥳 Efficient react components for building dapps easier | Connect crypto wallets and more Web3 UI components | Web3 icons | Supports Ethereum, Solana, Bitcoin and others.
TypeScript
703
star
16

ant-design-colors

🎨 Color Palettes Calculator of Ant Design
TypeScript
612
star
17

create-react-app-antd

Use antd in create-react-app without ejecting ✨
JavaScript
583
star
18

sunflower

🦹 Process components for antd4 & antd3 by alipay industry technology
TypeScript
499
star
19

ant-design-dark-theme

🌚 Dark theme variables of Ant Design
TypeScript
481
star
20

react-tutorial

基于 umi 的 Ant Design 实战教程配套代码 https://www.yuque.com/ant-design/course
JavaScript
434
star
21

pro-chat

🤖 Components Library for Quickly Building LLM Chat Interfaces.
TypeScript
400
star
22

ant-design-pro-site

TypeScript
393
star
23

antd-tools

🔧 Cli Tools for Ant Design React
JavaScript
393
star
24

ant-design-mini

Ant Design for Alipay Mini Program
TypeScript
368
star
25

ant-design-aliyun-theme

⚙ Ant Design Theme for console.aliyun.com
TypeScript
305
star
26

antd-dayjs-webpack-plugin

⏰ Day.js webpack plugin for Ant Design
JavaScript
287
star
27

ant-design-pro-cli

Cli tool of Ant Design Pro
JavaScript
259
star
28

cssinjs

TypeScript
219
star
29

intl-example

🌏 example about`antd`/`antd-mobile` internationalization
JavaScript
205
star
30

antd-sketchapp

⚛️💎🐜 Render Ant Design components to Sketch.
HTML
201
star
31

antd-style

css-in-js library with antd v5 token system
TypeScript
166
star
32

pro-flow

🪢 A React based Flow Framework, include Flow View and Flow Editor
TypeScript
159
star
33

html2sketch

parser HTML to Sketch JSON
TypeScript
150
star
34

pro-editor

🕹️ The Ultimate Editor UI Framework and Components
TypeScript
145
star
35

scaffold-market

scaffold market for single page application
JavaScript
127
star
36

kitchen

Powerful sketch plugin for design cooperation 🍳🍳🍳
121
star
37

ant-design-mobile-chart

Ant Design Mobile Chart based on F2
JavaScript
103
star
38

codemod-v4

codemod cli for antd v4 upgrade
JavaScript
92
star
39

compatible

TypeScript
89
star
40

ant-bot

JavaScript
78
star
41

parcel-antd

Use antd with parcel
TypeScript
75
star
42

antd-library

Axure library for Ant Design
HTML
75
star
43

v2.preview.pro.ant.design

v2.preview.pro.ant.design
JavaScript
72
star
44

antd-token-previewer

TypeScript
63
star
45

antd-mobile-pro

👨🏻‍💻👩🏻‍💻 Use Antd Mobile like a Pro!
TypeScript
53
star
46

ant-design-blocks

umi blocks of Ant Design.
TypeScript
50
star
47

antd-mobile-icons-v2

svg icons for ant-design-mobile
45
star
48

antd-issue-helper

TypeScript
43
star
49

antd-migration-helper

CLI tool to aid in migrate antd from old version to newer version.
JavaScript
41
star
50

u.ant.design

URL shortener.
JavaScript
35
star
51

editable-table

JavaScript
33
star
52

bisheng-plugin-antd

To support ant.design-like websites.
JavaScript
33
star
53

pro-list

梦想被 antd 内置的基于 antd 修改的 list
TypeScript
30
star
54

antd-mobile-template

umijs@4 and antd-mobile@5 quick start project, You can click the `use template` to quickly create your own app.
TypeScript
29
star
55

functional-mini

TypeScript
26
star
56

examples

More complex demo using antd
JavaScript
25
star
57

HiTu

TypeScript
25
star
58

sketch-json-api

💎🔧 Node.js Library for Editing Sketch Files.
TypeScript
24
star
59

antd-color-editor

🎨 an open-source color editor for designing color system
TypeScript
23
star
60

static-style-extract

TypeScript
21
star
61

antd-codemod

antd codemod scripts.
JavaScript
20
star
62

happy-work-theme

TypeScript
16
star
63

use-emotion-css

A gadget that combines emotion and antd token
TypeScript
16
star
64

codemod-v5

codemod cli for antd v5 upgrade
JavaScript
16
star
65

ant-design-landing-build

JavaScript
16
star
66

antd-changelog-editor

Ant Design Changelog Editor
TypeScript
13
star
67

next-pro-components

下一个版本的 pro-components
HTML
12
star
68

antd-theme

CSS
10
star
69

antd-adapter

An adapter which makes newer antd works like old one. DIRTY HACK \ T^T /
JavaScript
9
star
70

sketch-assistant-ant-design

TypeScript
9
star
71

ant-design-analysis

bundle size analysis of ant-design-mobile
HTML
8
star
72

antd-mobile-icons

The icon set for antd-mobile.
JavaScript
7
star
73

.github

6
star
74

beta.pro.ant.design

beta for pro scaffold
HTML
6
star
75

2x.ant.design

[email protected] site
HTML
6
star
76

010x.ant.design

[email protected] site
HTML
5
star
77

1x.ant.design

[email protected] site http://1x.ant.design
HTML
5
star
78

v2.pro.ant.design

https://v2-pro.ant.design/index-cn v2 version
HTML
4
star
79

next.mobile.ant.design

This is the documentation site for antd-mobile v5.
4
star
80

beta.preview.pro.ant.design

ant.design.pro 的 beta 预览
JavaScript
4
star
81

3x.ant.design

HTML
4
star
82

doc

antd 技术栈的所有文档,用于做 AI 功能
JavaScript
4
star
83

1x.mobile.ant.design

[email protected] site, http://1x.mobile.ant.design
HTML
4
star
84

012x.ant.design

[email protected] site http://012x.ant.design
HTML
3
star
85

011x.ant.design

[email protected] site http://011x.ant.design
HTML
3
star
86

07x.mobile.ant.design

[email protected] site
3
star
87

v1.pro.ant.design

ant design pro document
CSS
3
star
88

08x.mobile.ant.design

[email protected] site
HTML
3
star
89

03x.pro.ant.design

Document for ant design pro 0.3.x
HTML
3
star
90

09x.mobile.ant.design

[email protected] site
HTML
3
star
91

2x.rn.mobile.ant.design

http://2x.rn.mobile.ant.design/
HTML
3
star
92

ant-design-web3-demo

A demo for Ant Design Web3 course.
TypeScript
3
star
93

09x.ant.design

document of [email protected]
JavaScript
2
star
94

v1.preview.pro.ant.design

ant design pro v1 preview
JavaScript
2
star
95

beta.mobile.ant.design

No longer use, please visitor:
HTML
2
star
96

v5.ant-design-pro-site

TypeScript
2
star
97

test-antd-locale

JavaScript
1
star
98

cssinjs-benchmark

Benchmark for ant design cssinjs
TypeScript
1
star
99

babel-plugin-antd-style

为 antd-style 生成的 classname 增加文件名,方便 debug
TypeScript
1
star
100

antd-moment-webpack-plugin

⏰ Replace Day.js to Moment.js webpack plugin for Ant Design
JavaScript
1
star