aldehyde 0.0.12 → 0.1.1

package/src/aldehyde/table/act-table.tsx

@@ -0,0 +1,635 @@
+import React from 'react'
+import {Button, Card, Checkbox, Col, Collapse, Divider, Popconfirm, Popover, Row, Space, Table, Tooltip} from 'antd';
+import {
+    AlignLeftOutlined,
+    CalculatorOutlined,
+    DownloadOutlined,
+    EditOutlined,
+    EyeInvisibleOutlined,
+    EyeOutlined,
+    FundOutlined,
+    LineChartOutlined,
+    MenuOutlined,
+    PlusOutlined,
+    ReloadOutlined,
+    RetweetOutlined,
+    TableOutlined,
+    UploadOutlined,
+    CopyOutlined
+} from '@ant-design/icons';
+import "./index.css"
+import {
+    ActTableViewModel,
+    ColumnConfig,
+    DtmplConfig, DtmplData,
+    LtmplConfig,
+    QueryKey,
+    SelectedRow,
+    TmplBaseProps,
+    AddOrUpdate
+} from "../tmpl/interface";
+import TableUnits from "./table-util";
+import SupportInputTypes from '../tmpl/control-type-supportor';
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import QueryTable from './query-table';
+import CriteriaForm from "../../aldehyde/form/criteria-form";
+import ViewControl from "../controls/view-control";
+import Units from "../units";
+import ColumnSelector from './column/column-selector';
+import ExportFrame from '../../aldehyde/exportor/export-frame';
+import {SortableHandle} from 'react-sortable-hoc';
+import L2ActTable from "./l2-act-table";
+import StatViewL2Chart from '../chart/statview-l2-chart'
+import Action from '../controls/action'
+import Restat from "./stat/restat"
+import ActionUtils from '../controls/action/utils'
+import CquickButton from "../controls/cquery/cquick-button";
+const DragHandle = SortableHandle(() => <MenuOutlined style={{cursor: 'grab', color: '#999'}}/>);
+const {Panel} = Collapse;
+
+type Level = 'l1' | 'l2'
+
+const defualtDisabledColIds:string[]=['20000']
+
+interface ActTableProps extends TmplBaseProps {
+    criteriaData: object,
+    ltmplConfig: LtmplConfig,
+    menuId?:string,
+    showView?: (code: string) => void,
+    doCreate?: () => void,
+    doEdit?: (code: string,mode:AddOrUpdate) => void,
+    doSearch?: (params: object) => void,
+    level?: Level,
+};
+
+interface ActTableStat {
+    tableColumns: object[];
+    sortedColConfigs: ColumnConfig[];
+    queryKey: QueryKey;
+    loading: boolean;
+    criteriaData: object;
+    selectedRows: SelectedRow[];
+    selectedDatas:DtmplData[];
+    hiddenColIds?: string[];
+    drillingColIds?: string[];
+    disabledColIds: string[];
+    hiddenRowCodes?: string[];
+    viewModels?: ActTableViewModel[];
+    showL2ActTable: boolean;
+    showL2Chart: boolean;
+    // drillingPopoverVisible:boolean;
+};
+
+
+
+
+class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
+    state = {
+        tableColumns: undefined,
+        sortedColConfigs: undefined,
+        queryKey: undefined,
+        loading: true,
+        criteriaData: undefined,
+        disableCols: undefined,
+        hiddenColIds: defualtDisabledColIds,
+        selectedRows: [],
+        selectedDatas:[],
+        hiddenRowCodes: [],
+        viewModels: [],
+        drillingColIds: undefined,
+        disabledColIds: undefined,
+        showL2ActTable: false,
+        showL2Chart: false,
+        //drillingPopoverVisible:false,
+    }
+
+    static defaultProps={
+        criteriaData:{}
+    }
+
+    loadData = async (hiddenColIds: string[], hiddenRowCodes: string[], sortedColConfigs: ColumnConfig[]) => {
+        const {sourceId, criteriaData, ltmplConfig, mainCode, level} = this.props;
+        if (!ltmplConfig) {
+            return;
+        }
+        // console.log('acttable location criteriaData:', criteriaData);
+        // console.log('acttable ltmplConfig:', ltmplConfig);
+        this.setState({
+            loading: true,
+        })
+        let disabledColIds: string[] = [];
+        let hiddenColIds_ = [...hiddenColIds];
+        if (criteriaData && criteriaData['drillingColIds']) {
+            let dColIds = [...criteriaData['drillingColIds']];
+            ltmplConfig.columns.forEach((item) => {
+                if (item.statColType == 'dimension' && !dColIds.includes(item.id) && !hiddenColIds_.includes(item.id)) {
+                    hiddenColIds_.push(item.id);
+                    disabledColIds.push(item.id);
+                }
+                if (item.statColType == 'dimension' && !dColIds.includes(item.id) && !disabledColIds.includes(item.id)) {
+                    disabledColIds.push(item.id);
+                }
+            });
+            hiddenColIds_ = hiddenColIds_.filter((id) => {
+                return !dColIds.includes(id)
+            });
+        }
+        /** 构建column **/
+        let tableColumns = this.buildTableColumns(ltmplConfig, hiddenColIds_, hiddenRowCodes, sortedColConfigs);
+
+        const {defaultPageSize, buttons} = ltmplConfig;
+
+        let pageInfo = {
+            pageNo: 1,
+            pageSize: defaultPageSize ? defaultPageSize : 10,
+            virtualEndPageNo: undefined,
+        }
+
+        /** 构建 dataSource **/
+            //构建过滤条件
+        let queryKey: QueryKey
+        if (level && level == 'l2') {
+            queryKey = await HcserviceV3.requestL2LtmplQueryKey( sourceId, {
+                ...criteriaData, ...pageInfo,
+                mainCode
+            });
+        } else {
+            queryKey = await HcserviceV3.requestLtmplQueryKey( sourceId, {
+                ...criteriaData, ...pageInfo,
+                mainCode
+            });
+        }
+
+
+        this.setState({
+            disabledColIds,
+            hiddenColIds: hiddenColIds_,
+            hiddenRowCodes,
+            sortedColConfigs,
+            tableColumns,
+            queryKey,
+            criteriaData,
+            loading: false,
+            showL2Chart:false,
+            selectedRows: [],
+            selectedDatas:[],
+            viewModels: (this.state.viewModels.length > 0 ? this.state.viewModels : ['table']),
+        })
+    }
+
+    buildTableColumns = (ltmplConfig: LtmplConfig, hiddenColIds: string[], hiddenRowCodes: string[], sortedColConfigs: ColumnConfig[]) => {
+        const {mainCode, showView, doEdit,menuId} = this.props
+        const {buttons} = ltmplConfig;
+        let tableColumns = [];
+        let s = 0;
+
+        let colConfigs = sortedColConfigs ? sortedColConfigs : ltmplConfig.columns;
+
+        colConfigs.forEach((item) => {
+            let column = {};
+            if (!hiddenColIds || !hiddenColIds.includes(item.id)) {
+                tableColumns.push(column);
+            }
+            column['title'] = item.title;
+            column['dataIndex'] = item.id;
+            // column['ellipsis']= true;
+            s++;
+            let itemType = SupportInputTypes.getSupportControlType(item);
+            if (s < 10 && item.title != '操作' && item.title != '序号') {
+                if (hiddenColIds.includes('10000')) {
+                    TableUnits.sort(column, itemType);
+                }
+            }
+            //TableUnits.render(column, item);
+            //特殊列处理
+            //序号
+            if (item.title === "序号") {
+                //item.fixed='left';
+                column['render'] = (text, record, index) => (
+                    <label>{index + 1}</label>
+                )
+                item['sorter'] = undefined;
+            } else if (item.id == '10000') {
+                column['title'] = <Tooltip title={'拖拽排序'}>{item.title}</Tooltip>;
+                column['width'] = 30;
+                column['dataIndex'] = item.id;
+                column['className'] = 'drag-visible';
+                column['render'] = () => <DragHandle/>;
+            } else if (item.id == '20000') {//隐藏
+                column['align'] = 'center';
+                column['width'] = 14;
+                column['title'] = <>{hiddenRowCodes.length > 0 ?
+                    <Tooltip title={'取消隐藏'}><Button style={{marginRight: '0px'}}
+                                                    size="small" shape={'circle'}
+                                                    icon={<EyeOutlined/>} type={'text'}
+                                                    onClick={() => this.unHiden()}>
+                    </Button></Tooltip> : ''}</>;
+                column['render'] = (text, record) => (<Tooltip title={'隐藏'}> <Button style={{marginRight: '0px'}}
+                                                                                     icon={<EyeInvisibleOutlined/>}
+                                                                                     type="dashed"
+                                                                                     size="small"
+                                                                                     onClick={() => this.onHide(record.code)}>
+                </Button></Tooltip>);
+            } else if (item.title === "操作") {
+                column['fixed'] = 'right';
+                column['align']='center';
+                column['className']='opsColumn';
+                column['title'] = <>操 作</>
+                column['render'] = (text, record) => (
+                    <Space  size={[0, 4]} wrap>
+                            {buttons.includes('detail') && showView ?
+                                <Button
+                                    size="small"
+                                    type="primary"
+                                    icon={<AlignLeftOutlined/>}
+                                    onClick={() => showView(record.code)}>
+                                </Button>
+                                : ""}
+                        {buttons.includes('dtmplEdit') && doEdit
+                        && (!ltmplConfig.editAction || ActionUtils.isShow(ltmplConfig.editAction,[record],undefined))?
+                            < Button
+                                size="small"
+                                type="dashed"
+                                icon={<EditOutlined/>}
+                                onClick={() => doEdit(record.code,'update')}>
+                            </Button>: ""}
+                        {buttons.includes('copy') && doEdit
+                        //&& (!ltmplConfig.editAction || ActionUtils.isShow(ltmplConfig.editAction,[record],undefined))
+                            ?
+                            <Tooltip title={'复制'}>< Button
+                                size="small"
+                                type="dashed"
+                                icon={<CopyOutlined />}
+                                onClick={() => doEdit(record.code,'copy')}>
+                            </Button></Tooltip> : ""}
+                        {ltmplConfig.ractions ? ltmplConfig.ractions.map((raction) => {
+                            return <Button
+                                key={raction.id}
+                                size="small"
+                                type="dashed"
+                                href={`#/${raction.id}/act-table?mainCode=${record.code}&menuId=${menuId}`}>
+                                {raction.title}
+                            </Button>
+                        }) : ""}
+                        {ltmplConfig.rowActions && ltmplConfig.rowActions.length > 0 ?
+                            ltmplConfig.rowActions.map((action) => {
+                                return <Action key={action.id} data={[record]} actionConfig={action}  doAction={this.doRowAction} buttonSize={'small'}  serial={1}></Action>
+                            }) : ""}
+                        {ltmplConfig.jumps && ltmplConfig.jumps.length > 0 ?
+                            ltmplConfig.jumps.map((jump) => {
+                                return <Button key={jump.id} size="small" type="dashed"
+                                               onClick={() => this.doRowJump(jump.id, record.code)}
+                                >{jump.title}</Button>;
+                            }) : ""}
+                        {ltmplConfig.rowCQuerys && ltmplConfig.rowCQuerys.length > 0 ?
+                            ltmplConfig.rowCQuerys.map((cquery) => {
+                                // return <Button key={cQuery.id} size="small" type="dashed"
+                                //                onClick={() => this.doRowCQuery(cQuery.id, record.code)}
+                                // >{cQuery.title}</Button>;
+                                console.log("record record",record);
+                                return <CquickButton key={cquery.id} size={"small"}
+                                    // onClick={() => doCQuery(cquery.id)}
+                                                     disabled={false} cQueryConfig={cquery} mainCode={cquery.mainCodeColId?record[cquery.mainCodeColId]:record.code}/>
+                            }) : ""}
+                        </Space>);
+            } else {
+                column['className']='opsColumn';
+                column['render'] = (text, record) => {
+                    return <ViewControl  fieldConfig={item} value={record[item.id]} holderType={'table'}/>
+
+                }
+            }
+        });
+        return tableColumns
+    }
+
+
+    async componentDidMount() {
+        const {ltmplConfig} = this.props;
+        let sortedColConfigs = undefined;
+        if (ltmplConfig) {
+            sortedColConfigs = [{id: '10000', title: '排序'}, ...ltmplConfig.columns, {id: '20000', title: '隐藏'}]
+        }
+        this.loadData(defualtDisabledColIds, [], sortedColConfigs);
+    }
+
+    async componentDidUpdate(prevProps) {
+        const { sourceId, criteriaData, ltmplConfig} = this.props;
+        let {ltmplConfig: preLtmplConfig, criteriaData: preCriteriaData} = prevProps;
+
+        let {hiddenColIds, sortedColConfigs} = this.state;
+
+        console.log("UnitscriteriaData)",Units.transQueryParamsToStr(criteriaData));
+        console.log("preCriteriaData)",Units.transQueryParamsToStr(preCriteriaData));
+        console.log("preCriteriaData) bool",Units.transQueryParamsToStr(preCriteriaData)==Units.transQueryParamsToStr(criteriaData));
+        if (ltmplConfig && (!preLtmplConfig || ltmplConfig.id != preLtmplConfig.id) || (Units.transQueryParamsToStr(criteriaData) != Units.transQueryParamsToStr(preCriteriaData))) {
+
+            if (ltmplConfig.id == preLtmplConfig.id) {
+                this.loadData(hiddenColIds, [], sortedColConfigs);
+            } else {
+                let sColConfigs = undefined;
+                if (ltmplConfig) {
+                    sColConfigs = [{id: '10000', title: '排序'}, ...ltmplConfig.columns, {id: '20000', title: '隐藏'}]
+                }
+                this.setState({
+                    viewModels: ['table'],
+                })
+                this.loadData(defualtDisabledColIds, [], sColConfigs);
+            }
+        }
+    }
+
+
+    handleShowChart = () => {
+        this.setState({
+            showL2Chart: !this.state.showL2Chart
+        })
+    }
+
+    handleDataAnalysis = () => {
+
+        this.setState({
+            showL2ActTable: !this.state.showL2ActTable,
+        })
+    }
+
+    unHiden = () => {
+        const {ltmplConfig,} = this.props
+        const {hiddenColIds, sortedColConfigs} = this.state;
+        this.setState({
+            hiddenRowCodes: [],
+            tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, [], sortedColConfigs),
+        })
+    }
+
+    onHide = (code: string) => {
+        const {ltmplConfig,} = this.props
+        const {hiddenRowCodes, hiddenColIds, sortedColConfigs} = this.state;
+        let hiddenCodes = [...hiddenRowCodes, code];
+        this.setState({
+            hiddenRowCodes: hiddenCodes,
+            tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenCodes, sortedColConfigs),
+        })
+    }
+
+    changeViewModel = (viewModels) => {
+        this.setState({
+            viewModels
+        })
+    }
+
+    changeHiddenColumns = (hiddenColIds: string[]) => {
+        const {ltmplConfig} = this.props
+        const {hiddenRowCodes, sortedColConfigs} = this.state;
+        this.setState({
+            showL2Chart:false,
+            hiddenColIds,
+            tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
+        })
+    }
+
+    doSelectedAction = async (actionId: string,codes,params:object) => {
+        const {selectedRows} = this.state;
+        this.doAction(actionId, selectedRows,params);
+    }
+
+    doAction = async (actionId: string, selectedRows: SelectedRow[],params) => {
+        const { sourceId} = this.props;
+        const {hiddenColIds, hiddenRowCodes, sortedColConfigs} = this.state;
+        this.setState({
+            loading: true,
+        })
+        let result: boolean = await HcserviceV3.postActions( actionId, selectedRows,params);
+        if (result) {//重新加载数据
+            this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+        } else {
+            this.setState({
+                loading: false,
+            })
+        }
+    }
+
+    doRowAction = async (actionId: string, codes: string[],params:object) => {
+        this.doAction(actionId, [{title: undefined, code:codes[0]}],params);
+    }
+
+    doDelete = async () => {
+        const { sourceId} = this.props;
+        const {selectedRows, hiddenColIds, hiddenRowCodes, sortedColConfigs} = this.state;
+        this.setState({
+            loading: true,
+        })
+        let result: boolean = await HcserviceV3.deleteData(sourceId, selectedRows);
+        if (result) {//重新加载数据
+            this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+        } else {
+            this.setState({
+                loading: false,
+            })
+        }
+    }
+
+    // doCQuery=(cqueryId: string, selectedRow: SelectedRow)=>{
+    //
+    //
+    // }
+    // doRowCQuery = async (cqueryId: string, code: string) => {
+    //     this.doCQuery(cqueryId, {title: undefined, code})
+    // }
+
+    doSelectedCQuery = async (cqueryId: string) => {
+        // const {selectedRows} = this.state;
+        // this.doCQuery(cqueryId, selectedRows[0])
+    }
+
+    doJump = async (jumpId: string, selectedRows: SelectedRow[]) => {
+        const { sourceId} = this.props;
+        const {hiddenColIds, hiddenRowCodes, sortedColConfigs} = this.state;
+        let result: boolean = await HcserviceV3.postJumps( sourceId, jumpId, selectedRows);
+        if (result) {//重新加载数据
+            this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+        }
+    }
+
+    doRowJump = async (jumpId: string, code: string) => {
+        this.doJump(jumpId, [{title: undefined, code}])
+    }
+
+    doSelectedJump = async (jumpId: string) => {
+        const {selectedRows} = this.state;
+        this.doJump(jumpId, selectedRows)
+    }
+
+
+
+
+    changeRowSelection = (selectedRows: SelectedRow[],selectedDatas:DtmplData[]) => {
+        this.setState({
+            selectedRows,
+            selectedDatas,
+        })
+    }
+
+    onChangeColSort = (sortedColConfigs: ColumnConfig[]) => {
+        const {ltmplConfig} = this.props
+        const {hiddenRowCodes, hiddenColIds} = this.state;
+        this.setState({
+            sortedColConfigs,
+            tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
+        })
+    }
+
+
+
+    renderHeaderButtons = () => {
+        let {hiddenColIds, queryKey, viewModels, sortedColConfigs, disabledColIds, showL2Chart, showL2ActTable} = this.state;
+        const {ltmplConfig,  sourceId, doCreate, doSearch,menuId} = this.props;
+        let {buttons} = ltmplConfig;
+
+        return <>
+            {buttons.includes("dtmplAdd") && doCreate ?
+                <Tooltip title={'创建'}>
+                    <Button
+                        onClick={doCreate}>
+                        <PlusOutlined/>
+                    </Button> </Tooltip> : ''}
+            {buttons.includes("importLtmplExcel") ? <Tooltip title={'导入'}> <Button
+                href={`#/${sourceId}/importer?menuId=${menuId}`} target={'_blank'}>
+                <UploadOutlined/>
+            </Button></Tooltip> : ''}
+            <Popover
+                content={<ExportFrame //导出组件
+                    queryKey={queryKey}
+                    title={ltmplConfig.title}
+                />}
+                title={"导出"}
+                placement="bottomRight"
+                trigger="click">
+                <Tooltip title={'导出'}><Button
+                    style={{
+                        display: buttons.includes("exportLtmplExcel") ? "inline" : "none",
+                        marginLeft: '5px'
+                    }} //为了点击到没有导出模块，使组件不致销毁，丢失导出数据
+                >
+                    <DownloadOutlined/>
+                </Button></Tooltip>
+            </Popover>
+            {buttons.includes("showChart") ? <Tooltip title={showL2Chart ? '隐藏图表' : '展示图表'}><Button
+                onClick={this.handleShowChart}>
+                <LineChartOutlined/>
+            </Button></Tooltip> : ""
+
+            }
+            {buttons.includes("analysis") ? <Tooltip title={showL2ActTable ? '隐藏数据分析' : '展示数据分析'}><Button
+                onClick={this.handleDataAnalysis}>
+                <FundOutlined/>
+            </Button></Tooltip> : ""}
+            {buttons.includes("reStat") ? <Restat fields={ltmplConfig.reStatParams} sourceId={sourceId} onfinish={()=>doSearch(null)}></Restat> : ""}
+            <Popover content={<Checkbox.Group value={viewModels} onChange={this.changeViewModel}>
+                <Row style={{width: '120px'}}>
+                    <Col span={24}><Checkbox value={'table'}>表格</Checkbox></Col>
+                    <Col span={24}><Checkbox value={'verticalList'}>纵向列表</Checkbox></Col>
+                    {/*<Col span={24}><Checkbox value={'horizontalList'}>横向列表</Checkbox></Col>*/}
+                </Row>
+            </Checkbox.Group>} title="视图" placement="bottomRight"
+                     trigger="click">
+                <Tooltip title={'选择视图'}>
+                    <Button><RetweetOutlined/></Button>
+                </Tooltip>
+            </Popover>
+            <Popover content={<ColumnSelector columns={sortedColConfigs}
+                                              disabledColIds={disabledColIds}
+                                              hiddenColIds={hiddenColIds}
+                                              onChangeColSort={this.onChangeColSort}
+                                              onChangeHiddenCols={this.changeHiddenColumns}/>}
+                     title={'排序和选择列'}
+                     placement="bottomRight"
+                     trigger="click">
+                <Tooltip title={'点击排序和选择列'}>
+                    <Button><TableOutlined/></Button>
+                </Tooltip>
+            </Popover>
+            {doSearch ?
+                <Button
+                    className="hoverbig"
+                    title="刷新"
+                    onClick={() => {
+                        doSearch(null)
+                    }}>
+                    <ReloadOutlined/>
+                </Button> : ""
+            }
+        </>
+    }
+
+    render() {
+        let {queryKey, tableColumns, criteriaData, loading, selectedRows,selectedDatas, hiddenRowCodes, viewModels, sortedColConfigs, hiddenColIds, showL2ActTable, showL2Chart} = this.state;
+        let { sourceId, ltmplConfig, doSearch} = this.props;
+
+        if (!ltmplConfig || !sourceId) {
+            return <>
+                <Card loading={loading}>
+                </Card>
+                <Table loading={loading}>
+                </Table>
+            </>
+        }
+        let {buttons, criterias, jumps, actions} = ltmplConfig
+        let displayCriteriaCard: boolean = false;
+        if (buttons.includes('delete') || (buttons.includes('query') && criterias && criterias.length > 0) ||
+            (actions && actions.length > 0) || (jumps && jumps.length > 0) || buttons.includes('drilling')) {
+            displayCriteriaCard = true;
+        }
+
+        let columnConfigs = [];
+        if (sortedColConfigs) {
+            for (let colConfig of sortedColConfigs) {
+                if (!hiddenColIds.includes(colConfig.id)) {
+                    columnConfigs.push(colConfig);
+                }
+            }
+        }
+        return (
+            <>
+                {buttons.includes("showChart") && showL2Chart ? <div>
+                    <StatViewL2Chart queryKey={queryKey.key} ltmplConfig={ltmplConfig} hiddenColIds={hiddenColIds}
+                                     hiddenRowCodes={hiddenRowCodes}/>
+                    {/*<Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>*/}
+                </div> : ""
+                }
+                {buttons.includes("analysis") && showL2ActTable ? <div>
+                    <L2ActTable innerQueryKey={queryKey.key}  sourceId={sourceId}/>
+                    <Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>
+                </div> : ""
+                }
+                <div className="actTable">
+                    <h3>
+                        {ltmplConfig.title}
+                        <p className="fr">
+                            {this.renderHeaderButtons()}
+                        </p>
+                    </h3>
+                    <CriteriaForm loading={loading} visible={displayCriteriaCard} selectedDatas={selectedDatas} selectedRows={selectedRows}
+                                  ltmplConfig={ltmplConfig} data={criteriaData}
+                                  doCQuery={this.doSelectedCQuery}
+                                  doAction={this.doSelectedAction}
+                                  doDelete={this.doDelete}
+                                  doJump={this.doSelectedJump}
+                                  doSearch={doSearch} />
+                    {
+                        loading ? "" :
+                            <QueryTable viewModels={viewModels} columnConfigs={columnConfigs}
+                                        selectedRows={selectedRows}
+                                        columns={tableColumns}
+                                        hiddenRowCodes={hiddenRowCodes}
+                                        defaultPageSize={ltmplConfig.defaultPageSize}
+                                        queryKey={queryKey}
+                                        onChangeRowSelection={this.changeRowSelection}/>
+                    }
+                </div>
+            </>
+        );
+    }
+}
+
+export default ActTable;