@bmstravel/nvp-pro-table NPM

🏆 Use Ant Design Table like a Pro!

Demo

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' \| 'small' \| undefined) => void`	-
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

Tài sản	Mô tả	Loại	Giá trị mặc định
renderText	valueEnum	`(text: any,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => string`	-
render		`(text: React.ReactNode,record: T,index: number,action: UseFetchDataAction<RequestData<T>>) => React.ReactNode \\| React.ReactNode[]`	-
renderFormItem		`(item,props:{value,onChange}) => React.ReactNode`	-
ellipsis	tự động thu nhỏ	boolean	-
copyable	cho phép copy	boolean	-
valueEnum	liệt kê giá trị tự động chuyển đổi giá trị theo key để truy xuất nội dung sẽ được hiển thị	valueEnum	-
valueType		`'money' \\| 'option' \\| 'date' \\| 'dateTime' \\| 'time' \\| 'text'\\| 'index' \\| 'indexBorder'`	'text'
hideInSearch		boolean	-
hideInTable		boolean	-
hideInForm	ẩn Form tìm kiếm	boolean	-
filters	true sẽ lấy filter dựa trên valueEnum được cung cấp	`boolean \\| object[]`	false
order	thứ tự xuất hiện	number	-
formItemProps	custom formItem	`{ [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,
      }}
    />
  );
};