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 |