@agilemotion/oui-react-js 1.1.0 → 1.2.0

package/src/lib/components/DataGrid.jsx

@@ -1,841 +0,0 @@
-import React from 'react';
-import {makeStyles} from '@material-ui/core/styles';
-import {Table, Tbody, Tr, Th, Td} from 'react-super-responsive-table';
-import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
-import Checkbox from '@material-ui/core/Checkbox';
-import Utils from '../Utils';
-import './DataGrid.css';
-import {invokeRest, invokeRpc} from "../RestUtils";
-import DataGridFilter from "./DataGridFilter";
-import DataGridHeading from "./DataGridHeading";
-import TableCellContent from "./TableCellContent";
-import TablePagination from '@material-ui/core/TablePagination';
-import {grey300} from 'material-ui/styles/colors';
-import Event from "../event/Event";
-import eventManager from "../event/Observable";
-import EventType from "../event/EventType";
-import Grid from '@material-ui/core/Grid';
-import Button from '@material-ui/core/Button';
-import {observable, observe} from "mobx"
-import * as $ from "jquery";
-import Alert from "react-bootstrap/Alert";
-import applicationContext from "../ApplicationContext";
-
-export const MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
-
-function evaluateTableCellWidth(multiSelect, column, columnCount) {
-    let width = column.attributes['width'];
-    return multiSelect === true ?
-        "calc(" + (typeof width !== 'undefined' ? width :
-        (100 / columnCount) + "%") + " - " + (MULTI_SELECT_CHECKBOX_COL_WIDTH / columnCount) + "px)"
-        :
-        (typeof width !== 'undefined' ? width : (100 / columnCount) + "%");
-}
-
-function desc(a, b, orderBy) {
-    if (b[orderBy] < a[orderBy]) {
-        return -1;
-    }
-    if (b[orderBy] > a[orderBy]) {
-        return 1;
-    }
-    return 0;
-}
-
-function stableSort(array, cmp) {
-    const stabilizedThis = array.map((el, index) => [el, index]);
-    stabilizedThis.sort((a, b) => {
-        const order = cmp(a[0], b[0]);
-        if (order !== 0) return order;
-        return a[1] - b[1];
-    });
-    return stabilizedThis.map(el => el[0]);
-}
-
-function getSorting(order, orderBy) {
-    return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
-}
-
-const useStyles = makeStyles(theme => ({
-    root: {
-        width: '100%',
-        marginTop: theme.spacing(3),
-    },
-    paper: {
-        width: '100%',
-        height: '100%',
-        position: 'relative',
-        zIndex: '0',
-    },
-    scrollPadding: {
-        padding: '8px !important'
-    },
-    noScrollPadding: {
-        padding: '0 !important',
-        width: '1px !important'
-    },
-    tableBody: {
-        display: 'block',
-        overflowY: 'auto'
-    },
-    tableSelected: {
-        backgroundColor: grey300,
-        "&:hover": {
-            background: "#f1f1f1"
-        }
-    },
-    tableRow: {
-        "&:hover": {
-            background: "#f1f1f1"
-        }
-    },
-    tableWrapper: {
-        height: '100%'
-    },
-    table: {
-        height: '100%',
-    },
-    visuallyHidden: {
-        border: 0,
-        clip: 'rect(0 0 0 0)',
-        height: 1,
-        margin: -1,
-        padding: 0,
-        position: 'absolute',
-        top: 20,
-        width: 1,
-    }
-}));
-
-export const DataGrid = React.memo(React.forwardRef((props, ref) => {
-    const classes = useStyles();
-    const [order, setOrder] = React.useState('desc');
-    const [config, setConfig] = React.useState(null);
-    const [orderBy, setOrderBy] = React.useState('id');
-    const [selected, setSelected] = React.useState([]);
-    const [totalNumberOfRows, setTotalNumberOfRows] = React.useState(0);
-    const [criteria] = React.useState({});
-    const [page, setPage] = React.useState(0);
-    const [rows, setRows] = React.useState(!Utils.isNull(props.rows) ? props.rows : []);
-    const [deletedRows, setDeletedRows] = React.useState([]);
-    const [editable, setEditable] = React.useState(false);
-    const [scrollWidth, setScrollWidth] = React.useState(0);
-    const [rowsPerPageOptions] = React.useState([15, 30, 45, 60, 75]);
-    const [rowsPerPage, setRowsPerPage] = React.useState(props.config.pageSize);
-    const [cells] = React.useState([]);
-    const {actionsToolbar} = props;
-    const [headingHandle] = React.useState({});
-    const [filterHandle] = React.useState({});
-    const rowCount = React.useRef(-1);
-    const loadingRef = React.useRef(true);
-    let noteKey = 0;
-
-    const api = () => {
-        return {
-            get id() {
-                return props.config.id;
-            },
-            get criteria() {
-                criteria.parameters = isFilterable() ? filterHandle.api.getParameters() : [];
-                criteria.pageSize = rowsPerPage;
-
-                return criteria;
-            },
-            get selection() {
-                let selectedRows = [];
-                for (let i = 0; i < selected.length; i++) {
-                    for (let j = 0; j < rows.length; j++) {
-                        if (selected[i] === rows[j].id) {
-                            selectedRows.push(rows[j]);
-                        }
-                    }
-                }
-
-                return selectedRows;
-            },
-            get columnDataBindings() {
-                let columnNames = [];
-                for (let i = 0; i < config.columns.length; i++) {
-                    let column = config.columns[i];
-                    columnNames.push(!Utils.isNull(column.dataBinding) ? column.dataBinding : column.id);
-                }
-
-                return columnNames
-            },
-            getChildren: () => {
-                if (!Utils.isNull(headingHandle.api)) {
-                    return headingHandle.api.getChildren();
-                }
-            },
-            loadData: (actionConfig) => {
-                search();
-            },
-            deleteSelectedRows: () => {
-                // TODO : dispose from observer
-                let newRows = rows.filter((row) => {
-                    return !isSelected(row.id)
-                });
-
-                setDeletedRows(getSelectedRows(selected));
-                rows.splice(0, rows.length);
-                for (const newRow of newRows) {
-                    rows.push(newRow)
-                }
-
-                setSelected([]);
-
-                if (!Utils.isNull(props.onSelectionChange)) {
-                    props.onSelectionChange([]);
-                }
-
-                updateScrollBarPadding();
-                rowCount.current = rows.length;
-
-                valueChangeCallback(rows);
-
-                return rows;
-            },
-            clear: () => {
-                // TODO : dispose from observer
-                setRows([]);
-            },
-            addRows: (newRows) => {
-                for (const newRow of newRows) {
-                    rows.push(observeRow(newRow));
-                }
-
-                let newSelection = [];
-                for (const newRow of newRows) {
-                    newSelection.push(newRow.id);
-                }
-
-                setSelected(newSelection);
-
-                if (!Utils.isNull(props.onSelectionChange)) {
-                    props.onSelectionChange(newRows);
-                }
-
-                updateScrollBarPadding();
-                rowCount.current = rows.length;
-
-                valueChangeCallback(rows);
-                return rows;
-            },
-            get numberOfPages() {
-                return totalNumberOfRows / rowsPerPage;
-            },
-            get rows() {
-                return rows;
-            },
-            search: () => {
-                search();
-            }
-        }
-    };
-
-    function updateScrollBarPadding() {
-        var tbody = document.getElementById('mainTableBody');
-        if (tbody !== null && typeof tbody !== 'undefined') {
-            setScrollWidth(tbody.offsetWidth - tbody.clientWidth);
-        }
-    }
-
-    window.onresize = function onresize() {
-        updateScrollBarPadding();
-    };
-
-    const handleRequestSort = (event, property) => {
-        const isDesc = orderBy === property && order === 'desc';
-        setOrder(isDesc ? 'asc' : 'desc');
-        setOrderBy(property);
-    };
-
-    function handleSelectAllClick(event) {
-        if (event.target.checked) {
-            const newSelecteds = rows.map(n => n.name);
-            setSelected(newSelecteds);
-            props.onSelectionChange(newSelecteds);
-        } else {
-            setSelected([]);
-            props.onSelectionChange([]);
-        }
-
-        applicationContext.enableFormMarkers(true);
-    }
-
-    function getSelectedRows(selected) {
-        let selectedRows = [];
-        for (var i = 0; i < rows.length; i++) {
-            let row = rows[i];
-            for (var j = 0; j < selected.length; j++) {
-                if (row.id === selected[j]) {
-                    selectedRows.push(row);
-                }
-            }
-        }
-
-        return selectedRows;
-    }
-
-    function doHandleClick(event, id) {
-        applicationContext.enableFormMarkers(true);
-
-        const selectedIndex = -1;
-        selected.indexOf(id);
-        let newSelected = [];
-
-        if (props.multiSelect === true) {
-            if (selectedIndex === -1) {
-                newSelected = newSelected.concat(selected, id);
-            } else if (selectedIndex === 0) {
-                newSelected = newSelected.concat(selected.slice(1));
-            } else if (selectedIndex === selected.length - 1) {
-                newSelected = newSelected.concat(selected.slice(0, -1));
-            } else if (selectedIndex > 0) {
-                newSelected = newSelected.concat(
-                    selected.slice(0, selectedIndex),
-                    selected.slice(selectedIndex + 1),
-                );
-            }
-        } else {
-            newSelected.push(id);
-        }
-
-        let selectedRows = getSelectedRows(newSelected);
-
-        setSelected(newSelected);
-        if (!Utils.isNull(props.onSelectionChange)) {
-            props.onSelectionChange(selectedRows);
-        }
-    }
-
-    function fireSelectionEvent() {
-        if (!Utils.isNull(config) && (!Utils.isNull(headingHandle) || config.gridType === 'TILE')) {
-            let event = new Event(props.handle, props.viewId, getSelectedRows(selected));
-            eventManager.fireEvent(EventType.SELECTION_CHANGE, event);
-        }
-    }
-
-    function handleClick(event, id) {
-        if (!Utils.isNull(props.onCellSelectionChange)) {
-            return;
-        }
-
-        doHandleClick(event, id);
-    }
-
-    function handleCellClick(event, id, column) {
-        if (column.fieldType !== "document") {
-            // TODO : Evaluate if this call is necessary
-            doHandleClick(event, id);
-        }
-
-        if (!Utils.isNull(props.onCellSelectionChange)) {
-            props.onCellSelectionChange(id, column);
-        }
-    }
-
-    function handleChangePage(event, newPage) {
-        criteria.currentPage = newPage + 1;
-        setPage(newPage);
-        search();
-    }
-
-    function handleChangeRowsPerPage(event) {
-        setRowsPerPage(rowsPerPage => event.target.value);
-        setPage(0);
-    }
-
-    const observeRow = (row) => {
-        let observableRow = observable(row);
-        observe(
-            observableRow,
-            change => {
-                let newValue = change.newValue;
-                let oldValue = change.oldValue;
-
-                if (newValue !== oldValue) {
-                    refreshCell(row.id, change.name);
-                }
-            }
-        );
-
-        return observableRow;
-    };
-
-    function processData(data, conf) {
-        setTotalNumberOfRows(data.totalNumberOfRecords);
-
-        let tableRows = [];
-        let records = data.records;
-        for (let i = 0; i < records.length; i++) {
-            if (!Utils.isNull(records[i].map)) {
-                tableRows.push(observeRow(records[i].map));
-            } else {
-                tableRows.push(observeRow(records[i]));
-            }
-        }
-
-        setRows(tableRows);
-    }
-
-    const search = () => {
-        let conf = config;
-        if (Utils.isNull(conf)) {
-            conf = Utils.parseConfig(props.config, props.viewId);
-        }
-
-        if (!Utils.isNull(conf.dataService)) {
-            let method = conf.dataService.type === 'remoteObjectProxy' ? invokeRpc : invokeRest;
-            method(conf.dataService, props.handle, props.viewId, (result) => {
-                    let data = conf.dataService.type === 'remoteObjectProxy' ? result.data : result;
-                    processData(data, conf);
-                },
-                (e) => {
-                    console.error(e);
-                    Utils.publishSystemErrorMessage(props.viewId);
-                });
-        } else {
-            props.loadCompleteHandler(conf.id);
-        }
-    };
-
-    React.useEffect(() => {
-        if (!Utils.isNull(config)) {
-            criteria.currentPage = 1;
-            search();
-        }
-    }, [rowsPerPage]);
-
-    React.useEffect(() => {
-        props.handle.api = api();
-
-        if (Utils.isNull(config)) {
-            let parsedConfig = Utils.parseConfig(props.config, props.viewId);
-            setConfig(parsedConfig);
-            let eventHandlingConfig = Utils.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
-            eventHandlingConfig.subscriptions = Utils.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
-
-            let autoLoadData = Utils.getComponentAttribute(parsedConfig, 'autoLoadData', null);
-            if (autoLoadData === null || autoLoadData === true) {
-                let subscription = {
-                    publisher: props.viewId,
-                    eventType: EventType.COMPONENT_LOAD,
-                    actions: [
-                        {
-                            actionType: "loadData"
-                        }
-                    ]
-                };
-
-                eventHandlingConfig.subscriptions.push(subscription);
-            }
-
-            eventManager.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
-            eventManager.addSystemSubscriptions(parsedConfig);
-            let isEditable = false;
-
-            for (let i = 0; i < parsedConfig.columns.length; i++) {
-                let column = parsedConfig.columns[i];
-
-                if (!isEditable && column.attributes['editable'] === true) {
-                    isEditable = true;
-                    setEditable(true);
-                }
-
-                column.width = evaluateTableCellWidth(props.selectionMode === 'MULTIPLE', column, parsedConfig.columns.length);
-                if (!Utils.isNull(column.attributes) && column.attributes['editable'] === true && Utils.isNull(column.editor)) {
-                    let defaultEditor = {};
-                    defaultEditor.fieldType = 'TEXT_FIELD';
-                    defaultEditor.id = column.id + 'Editor';
-
-                    column.editor = defaultEditor;
-                }
-            }
-        }
-    });
-
-    React.useEffect(() => {
-        if (!Utils.isNull(config)) {
-            criteria.currentPage = 1;
-            criteria.dataQueryName = config.dataQueryName;
-
-            if (!Utils.isNull(props.loadCompleteHandler) && loadingRef.current === true) {
-                props.loadCompleteHandler(config.id);
-            }
-        }
-    }, [config]);
-
-    React.useEffect(() => {
-        if (!Utils.isNull(props.data)) {
-            let conf = config;
-            if (Utils.isNull(conf)) {
-                conf = Utils.parseConfig(props.config, props.viewId);
-            }
-
-            processData(props.data, conf);
-        }
-    }, [props.data]);
-
-    function addRowFocusListener(row) {
-        $("#ROW-" + row.id).focusout(function () {
-            let newSelected = [];
-            for (const selectedElement of selected) {
-                if (selectedElement !== row.id) {
-                    newSelected.push(selectedElement);
-                }
-            }
-
-            setSelected(newSelected);
-        });
-    }
-
-    React.useEffect(() => {
-        if (editable) {
-            for (const row of rows) {
-                // TODO : Fix the focus loss behavior
-                //addRowFocusListener(row);
-            }
-        }
-    });
-
-    React.useEffect(() => {
-        updateScrollBarPadding();
-        eventManager.processSystemGeneratedSubscriptions(props.config.id);
-
-        rowCount.current = rows.length;
-    }, [rows]);
-
-    React.useEffect(() => {
-        if (!Utils.isNull(deletedRows) && deletedRows.length > 0) {
-            let event = new Event(props.handle, props.viewId, deletedRows);
-            eventManager.fireEvent(EventType.ROW_DELETED, event);
-            setDeletedRows(null);
-        }
-
-        rowCount.current = rows.length;
-    }, [deletedRows]);
-
-    React.useEffect(() => {
-        if (!Utils.isNull(props.rows)) {
-            let rowValues = [];
-
-            for (const row of props.rows) {
-                rowValues.push(observeRow(row));
-            }
-
-            setRows(rowValues);
-        }
-    }, [props.rows]);
-
-    React.useEffect(() => {
-        fireSelectionEvent()
-    }, [selected]);
-
-    const isSelected = id => selected.indexOf(id) !== -1;
-    const editorChangeHandler = (rowId, field, value) => {
-        for (const row of rows) {
-            if (row.id === rowId) {
-                row[field] = value;
-                break;
-            }
-        }
-
-        valueChangeCallback(rows);
-    };
-
-    const isFilterable = () => {
-        for (let i = 0; i < props.config.columns.length; i++) {
-            let column = props.config.columns[i];
-            if (column.attributes['filterable'] === true) {
-                return true;
-            }
-        }
-
-        return false;
-    };
-
-    const createCell = (row, columnName, cellHandle) => {
-        let rowCells = null;
-        for (const cellsEntry of cells) {
-            if (cellsEntry.rowId === row.id) {
-                rowCells = cellsEntry;
-                break;
-            }
-        }
-
-        if (Utils.isNull(rowCells) || rowCells.length === 0) {
-            rowCells = {};
-            rowCells.rowId = row.id;
-            cells.push(rowCells);
-        }
-
-        rowCells[columnName] = cellHandle;
-    };
-
-    const refreshCell = (rowId, columnName) => {
-        let rowCells = null;
-        for (const cell of cells) {
-            if (cell.rowId === rowId) {
-                rowCells = cell;
-                break;
-            }
-        }
-
-        if (!Utils.isNull(rowCells)) {
-            let cell = rowCells[columnName];
-
-            if (!Utils.isNull(cell)) {
-                cell.api.refresh();
-            }
-        }
-    };
-
-    const valueChangeCallback = (valueRows) => {
-        if (!Utils.isNull(props.valueChangeHandler)) {
-            let invalidRows = valueRows.filter((row) => {
-                return !Utils.isNull(row.errors) && row.errors.length > 0;
-            });
-
-            if (invalidRows.length > 0) {
-                props.valueChangeHandler(null);
-            } else {
-                props.valueChangeHandler(valueRows);
-            }
-        }
-    };
-
-    function getTileLabel(row) {
-        let counter = 0;
-        return (
-            <span>
-                {config.columns.map(column => (
-                    !column.attributes.hidden ?
-                        <span key={counter++}>
-                                {
-                                    row[!Utils.isNull(column.dataBinding) ? column.dataBinding : column.id]
-                                }
-                            <br/>
-                            </span> :
-                        null))
-                }
-            </span>
-        );
-    }
-
-    function renderTile(row, key) {
-        return (<Grid item xs style={{height: '200px', minWidth: '200px'}} key={key}>
-            <Button variant="contained" color="secondary"
-                    style={{width: '100%', height: '100%'}}
-                    onClick={event => doHandleClick(event, row.id)}
-            >
-                {
-                    getTileLabel(row)
-                }
-            </Button>
-        </Grid>);
-    }
-
-    function renderTiles() {
-        return (
-            <React.Fragment>
-                {stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
-                    const isItemSelected = isSelected(row.id);
-                    const labelId = `enhanced-table-checkbox-${index}`;
-                    row.index = index;
-
-                    return (
-                        renderTile(row, index)
-                    )
-                })}
-            </React.Fragment>
-        );
-    }
-
-    return (
-        <div ref={ref} style={(Utils.isNull(props.hasBorder) || props.hasBorder === true) && (!Utils.isNull(config)) ? {
-            margin: '32px',
-            border: '1px solid #e2e2e2',
-            borderRadius: '4px'
-        } : props.style}>
-            {
-                !Utils.isNull(props.config.notes) ?
-                    props.config.notes.map((note) => {
-                        return <div key={noteKey++}>
-                            <Alert
-                                variant={note.messageType === 'WARN' ? 'warning' :
-                                    note.messageType === 'INFO' ? '' : 'danger'}
-                                show={true}
-                            >
-                                <p style={{color: 'rgba(255, 255, 255, 0.8)'}}>{note.message}</p>
-                            </Alert>
-                        </div>
-                    })
-                    : null
-            }
-            {
-                rowsPerPageOptions.includes(props.config.pageSize) && !Utils.isNull(config) ?
-                    config.gridType === 'TILE' ?
-                        <div style={{margin: "0 0 8px 8px"}}>
-                            <div>
-                                {
-                                    isFilterable() ?
-                                        <DataGridFilter
-                                            ref={React.createRef()}
-                                            handle={filterHandle}
-                                            config={props.config}
-                                            filterWrapperClass={props.filterWrapperClass}
-                                            scrollWidth={scrollWidth}
-                                            onFilterSubmit={search}
-                                            onRequestSort={handleRequestSort}
-                                        />
-                                        :
-                                        null
-                                }
-                            </div>
-                            <div className={classes.root}>
-                                <Grid container spacing={1}>
-                                    <Grid container item xs={12} spacing={1}>
-                                        {
-                                            renderTiles()
-                                        }
-                                    </Grid>
-                                </Grid>
-                            </div>
-                        </div>
-                        :
-                        <div>
-                            <div className='responsive-table' style={{height: props.height}}>
-                                <Table className="ouiTable"
-                                       cellSpacing="0"
-                                       aria-labelledby="tableTitle"
-                                       style={{width: '100%'}}
-                                >
-                                    {
-                                        isFilterable() ?
-                                            <DataGridFilter
-                                                handle={filterHandle}
-                                                ref={React.createRef()}
-                                                config={config}
-                                                filterWrapperClass={props.filterWrapperClass}
-                                                scrollWidth={scrollWidth}
-                                                onFilterSubmit={search}
-                                                onRequestSort={handleRequestSort}
-                                            />
-                                            :
-                                            null
-                                    }
-                                    <DataGridHeading
-                                        ref={React.createRef()}
-                                        handle={headingHandle}
-                                        config={config}
-                                        numSelected={selected.length}
-                                        scrollWidth={scrollWidth}
-                                        onSelectAllClick={handleSelectAllClick}
-                                        onRequestSort={handleRequestSort}
-                                        rowCount={totalNumberOfRows}
-                                    />
-                                    <Tbody className={classes.tableBody}
-                                           style={{maxHeight: Utils.isNull(props.bodyMaxHeight) ? props.bodyMaxHeight : "42vh"}}
-                                           id="mainTableBody">
-                                    {stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
-                                        const isItemSelected = isSelected(row.id);
-                                        const labelId = `enhanced-table-checkbox-${index}`;
-                                        row.index = index;
-                                        let counter = 0;
-
-                                        return (
-                                            <Tr
-                                                style={{display: 'flex', flexWrap: 'wrap'}}
-                                                onClick={event => handleClick(event, row.id)}
-                                                role="checkbox"
-                                                aria-checked={isItemSelected}
-                                                tabIndex={-1}
-                                                key={row.id}
-                                                id={'ROW-' + row.id}
-                                                selected={isItemSelected}
-                                                className={isItemSelected ? classes.tableSelected : classes.tableRow}
-                                            >
-                                                {
-                                                    config.selectionMode === 'MULTIPLE' ?
-                                                        <Td padding="checkbox"
-                                                            width={MULTI_SELECT_CHECKBOX_COL_WIDTH + "px"}
-                                                            className={"selectCell"}>
-                                                            <Checkbox
-                                                                checked={isItemSelected}
-                                                                inputProps={{'aria-labelledby': labelId}}
-                                                            />
-                                                        </Td> : null
-
-                                                }
-                                                {config.columns.map(column => (
-                                                    column.attributes['hidden'] === true ? null :
-                                                        counter++ === config.columns.length - 1 && actionsToolbar !== null && typeof actionsToolbar !== "undefined" ?
-                                                            <Td
-                                                                style={{
-                                                                    width: column.width
-                                                                }}
-                                                                align="left"
-                                                                className={isItemSelected && !Utils.isNull(props.form) && !Utils.isNull(column.editor) ? "editCell" : null}
-                                                                key={column.id}>
-                                                                Row action toolbar not supported
-                                                            </Td> :
-                                                            <Td
-                                                                style={{
-                                                                    width: column.width
-                                                                }}
-                                                                align="left"
-                                                                className={isItemSelected && !Utils.isNull(props.form) && !Utils.isNull(column.editor) ? "editCell" : null}
-                                                                key={column.id}
-                                                                onClick={event => handleCellClick(event, row.id, column)}
-                                                            >
-                                                                <TableCellContent
-                                                                    viewId={props.viewId}
-                                                                    form={props.form}
-                                                                    formValues={props.formValues}
-                                                                    editor={column.editor}
-                                                                    ref={React.createRef()}
-                                                                    refCallback={createCell}
-                                                                    selected={isItemSelected}
-                                                                    validator={column.validator}
-                                                                    valueChangeHandler={editorChangeHandler}
-                                                                    columnConfig={column}
-                                                                    dataBinding={!Utils.isNull(column.dataBinding) ? column.dataBinding : column.id}
-                                                                    row={row}
-                                                                    contentType={column.fieldType}/>
-                                                            </Td>
-
-                                                ))}
-                                            </Tr>
-                                        );
-                                    })}
-                                    </Tbody>
-                                </Table>
-                            </div>
-                            {
-                                Utils.isNull(props.pagination) || props.pagination === true ?
-                                    <TablePagination
-                                        rowsPerPageOptions={rowsPerPageOptions}
-                                        component="div"
-                                        count={totalNumberOfRows}
-                                        rowsPerPage={rowsPerPage}
-                                        page={page}
-                                        backIconButtonProps={{
-                                            'aria-label': 'previous page',
-                                        }}
-                                        nextIconButtonProps={{
-                                            'aria-label': 'next page',
-                                        }}
-                                        onChangePage={handleChangePage}
-                                        onChangeRowsPerPage={handleChangeRowsPerPage}
-                                    />
-                                    :
-                                    null
-                            }
-                        </div>
-                    :
-                    null
-            }
-        </div>
-    );
-}));