@anchor-it/antd-table

anchor components library table by ant.design

Install

Use npm:

npm install --save @anchor-it/antd-table

Use yarn:

yarn add @anchor-it/antd-table -S

Usage

import React, { Component } from 'react';
import { TableComponent, tableSelectionMode } from '@anchor-it/antd-table';

const { multiple } = tableSelectionMode;

class TestTable extends Component {
  static propTypes = {};

  state = {
    data: [],
    loading: false,
    pageNum: 1,
    pageSize: 12,
    selectedKeys: [],
    selectedRowsData: [],

    cols: [
      {
        key: 0,
        title: 'id',
        dataIndex: 'id',
      },
      {
        key: 1,
        title: '姓名',
        dataIndex: 'name',
      },
      {
        key: 2,
        title: '性别',
        dataIndex: 'sex',
      },
      {
        key: 3,
        title: '手机号码',
        dataIndex: 'phone',
      },
    ],
  };

  handlePaginationOnChange = () => {};

  handleOnSort = () => {};

  render() {
    return (
      <TableComponent
        ref={(node) => (this.table = node)}
        loading={this.state.loading}
        dataSource={this.state.data}
        primaryKey={'id'}
        isShowPagination={true}
        selectedRowKeys={this.state.selectedKeys}
        selectedRowData={this.state.selectedRowsData}
        tablePagesize={this.state.pageSize}
        tableTotalRecord={this.state.total}
        tableSelectionMode={multiple}
        tableOnChange={this.handleTableOnChange}
        paginationOnChange={this.handlePaginationOnChange}
        currentPage={this.state.pageNum}
        onSort={this.handleOnSort}
        cols={this.state.cols}
      />
    );
  }
}

export default TestTable;

Api

| 属性 | 说明 | 类型 | 默认值 | | ------------------------- | ------------------------------------------ | ------------------------------------------- | --------- | | loading | 页面是否加载中 | boolean | false | | dataSource | 数据数组 | object[] | - | | size | 表格大小 | default| middle| small | default | | primaryKey | 表格行 key 的取值，可以是字符串或一个函数 | string | key | | hasBorder | 是否展示外边框和列边框 | boolean | true | | hasHeader | 是否显示表头 | boolean | true | | scroll | 表格是否可滚动，也可以指定滚动区域的宽、高 | Object | - | | isShowPagination | 是否显示分页组件 | boolean | true | | isShowTotalRecord | 是否显示总记录数目 | boolean | false | | selectedRowKeys | 指定选中项的 key 数组 | string[] | number[] | [] | | tablePagesize | 每页条数 | number | - | | tableTotalRecord | 数据总数 | number | 0 | | tableSelectionMode | 列表选择类型 | none|checkbox|radio | none | | tableDefaultSelectRowKeys | 默认选中项的 key 数组 | string[] | number[] | [] | | tableOnChange | 列表选中时的触发事件 | function(selectedRowKeys, selectedRows) | - | | tableOnRowClick | 列表的行点击事件 | function(index, record, event) | - | | paginationOnChange | 列表的翻页事件 | function(page) | - | | paginationShowQuickJumper | 列表翻页组件是否显示快捷跳转 | boolean | false | | cols | 列表的列配置 | object[] | - | | currentPage | 列表的当前页 | number | - | | onSort | 列表的排序事件 | function(field,order) | - | | isZebra | 是否显示斑马纹 | boolean | false |