@wm-hosp/table-dragger-resizable

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