table-warp

组件功能描述

Install

$ npm i table-warp --save

Usage

import TableWarp from 'table-warp';
import { ColumnType } from 'antd/es/table';
import * as React from 'react';

const createItem = (order: React.Key, other: any) => {
  return {
    order,
    title: `title${order}${other && Object.keys(other).length ? `-${JSON.stringify(other)}` : ''}`,
    status: ((Math.random() * 3) | 0) + 1,
    id: order,
  };
};

type RecordType = {
  order: React.Key;
  title: string;
};
type ParamsProps = { pageNo: number; pageSize: number };
function Test() {
  const [totalCount] = React.useState((Math.random() * 100) | 0);
  const getList = (params: ParamsProps = {} as ParamsProps) => {
    console.log(params);
    const { pageNo = 1, pageSize = 5, ...other } = params;
    return Promise.resolve({
      rows: Array.from({ length: pageSize }).map((i, index) => {
        const order: number = (pageNo - 1) * pageSize + index + 1;
        return createItem(order, other);
      }),
      pageNo,
      pageSize,
      totalCount,
    });
  };
  const columns = React.useMemo<ColumnType<RecordType>[]>(
    () => [
      { dataIndex: 'order', title: '序号' },
      {
        dataIndex: 'title',
        title: '姓名',
        search: true,
        placeholder: '请输入姓名',
      },
      {
        dataIndex: 'status',
        title: 'status',
        search: true,
        valueType: 'select',
        placeholder: 'xuanze',
        fieldProps: {
          options: [
            { label: '未审核', value: 1 },
            { label: '已审核', value: 2 },
            { label: '未通过', value: 3 },
          ],
        },
      },
    ],
    [],
  );
  return <TableWarp request={getList} columns={columns} onPullDelete={console.log} />;
}

export default Test;