Installation

npm install @wm-hosp/table-dragger-resizable --save

Usage

import * as React from 'react';
import { WmTableDraggerResizable } from '@wm-hosp/sum_react';

const TableDraggerResizable: React.FC<Props> = (props) => {
  return (
    <WmTableDraggerResizable
      bordered
      rowKey="id"
      dataSource={data}
      // loading={loading}
      tableType={'warehouseOrderList'}
      pagination={false}
      propsColumns={
        inboundType === 0
          ? this.columns
          : this.columns.filter((e) => !e.virtualHidden)
      }
      scroll={{ x: 1200 }}
      locale={{
        emptyText: loading ? '加载中...' : '暂无数据',
      }}
      rowClassName={(record: any) => {
        return record.hasRed ? 'hasRedIcon' : '';
      }}
      rowSelection={{
        selectedRowKeys,
        onChange: this.onSelectRowKeysChange,
        fixed: true,
      }}
      otherFetchParams={{
        fetchTableJson,
        fetchUpdateTableJson,
      }}
    >
      <div className="action-btn-radio">
        <div>
          <Button
            ghost
            type="primary"
            style={{ marginRight: 10 }}
            onClick={this.handleBatchOpenPrint}
          >
            批量打印
          </Button>
        </div>
      </div>
    </WmTableDraggerResizable>
  );
};

export default TableDraggerResizable;

Props

| props | type | default | description | required | | --------------------- | ---------------------------------- | ------- | ------------------------------------------- | -------- | | propsColumns | columnsProps[] | [] | columns source array | true | | tableType | string | - | current table type | true | | defaultcheckedColumns | array | - | dataIndex of the column selected by default | false | | otherFetchParams | FetchParams[] | - | function object | false | | isNotEllipsis | boolean | false | display with ellipsis | false | | updatePropsColumns | boolean | true | wheather to show change button | false | | isNotShowDragger | boolean | - | show filter column button | false | | pagination | object | - | 同 antd | false | | scroll | object | - | 同 antd | false | | dataSource | [] | - | 同 antd | true |

注：其他与 antd 的 Table 属性保持一致

columnsProps

| props | type | default | description | required | | ------------ | --------------- | ------- | ----------------------- | -------- | | title | string | - | column title | true | | dataIndex | string | - | description | false | | width | number | - | description | false | | render | React.ReactNode | - | ReactNode | false | | draggerTitle | string | - | Filter column drag name | false |

otherFetchParams

| props | type | default | description | required | | -------------------- | -------- | ------- | ----------------- | -------- | | fetchTableJson | function | - | Get database save | false | | fetchUpdateTableJson | function | - | Update database | false |

import * as React from 'react';
import { WmShowDraggerColumns } from '@wm-hosp/sum_react';

const ShowDraggerColumns: React.FC<Props> = (props) => {
  return (
    <WmShowDraggerColumns
      tableType={DYNAMIC_TABLE_TYPE.myOrderApplyColumns}
      propsColumns={[...this.columns]}
      defaultcheckedColumns={checkedColumns}
      onChange={(newColumns) => {
        this.setState({ countTime: (this.state.countTime || 0) + 1 });
        this.columns = newColumns;
      }}
      fetchTableJson={fetchTableJson}
      fetchUpdateTableJson={fetchUpdateTableJson}
    />
  );
};

export default ShowDraggerColumns;

Props

| props | type | default | description | required | | --------------------- | ------------------------------- | ------- | ------------------------------------------- | -------- | | propsColumns | columnsProps[] | [] | columns source array | true | | tableType | string | - | current table type | true | | defaultcheckedColumns | array | - | dataIndex of the column selected by default | false | | fetchTableJson | function | - | Get database save | false | | fetchUpdateTableJson | function | - | Update database | false | | onChange | function | - | Update current columns | false |

注：WmShowDraggerColumns 可与 WmTableDraggerResizable 一起使用，实现卡片表格的拖拽与显示

columnsProps

| props | type | default | description | required | | ------------ | --------------- | ------- | ----------------------- | -------- | | title | string | - | column title | true | | dataIndex | string | - | description | false | | width | number | - | description | false | | render | React.ReactNode | - | ReactNode | false | | draggerTitle | string | - | Filter column drag name | false |