ods-component-lib 1.18.231 → 1.18.233

package/dist/index.js

@@ -45,6 +45,7 @@ var devextremeReact = require('devextreme-react');
 var antdStyle = require('antd-style');
 var FileSaver = require('file-saver');
 require('devextreme/dist/css/dx.light.css');
+var gantt = require('devextreme-react/gantt');
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -37848,14 +37849,6 @@ var useStyles$a = antdStyle.createStyles(function (_ref) {
   };
 });
 
-var checkCellSelectionConstraints$1 = function checkCellSelectionConstraints(e) {
-  return e.rowType == "data" && e.columnIndex > -1 && e.rowIndex > -1;
-};
-var cellAlreadySelected$1 = function cellAlreadySelected(pkValue, dataField, cellInfos) {
-  return cellInfos.some(function (cell) {
-    return cell.pkValue == pkValue && cell.dataField == dataField;
-  });
-};
 var getMultiLevelColumns$1 = function getMultiLevelColumns(col) {
   return col.multiLevelColumns && col.multiLevelColumns.map(function (colItem) {
     return React__default.createElement(DataGrid.Column, Object.assign({
@@ -38054,31 +38047,12 @@ OdsMergeCellDataGridHelper.getInstance = function () {
 var useToken$2 = antd.theme.useToken;
 var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _props$columnResizing, _props$className, _props$selection, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
-  var ref = props.ref,
+  var refGrid = props.refGrid,
     keyExpr = props.keyExpr,
-    hasFastUpdate = props.hasFastUpdate,
-    fastUpdateButtonText = props.fastUpdateButtonText,
-    fastUpdateModalTitle = props.fastUpdateModalTitle,
-    fastUpdateModalCancelText = props.fastUpdateModalCancelText,
-    fastUpdateModalSaveText = props.fastUpdateModalSaveText,
-    fastUpdateFormRequiredFieldMessage = props.fastUpdateFormRequiredFieldMessage,
-    onCellClick = props.onCellClick,
-    onCellHoverChanged = props.onCellHoverChanged,
-    onFastUpdateButtonClick = props.onFastUpdateButtonClick,
-    onFastUpdateFinish = props.onFastUpdateFinish,
-    onFastUpdateCancel = props.onFastUpdateCancel,
-    onFastUpdateFailed = props.onFastUpdateFailed,
-    onCellPrepared = props.onCellPrepared,
-    detailGridColumns = props.detailGridColumns,
-    detailData = props.detailData,
-    masterDetailFeatures = props.masterDetailFeatures;
+    onCellPrepared = props.onCellPrepared;
   var _useToken = useToken$2(),
     token = _useToken.token;
-  var _AntForm$useForm = antd.Form.useForm(),
-    fastUpdateForm = _AntForm$useForm[0];
-  var gridRef = ref != null ? ref : React.useRef(null);
   var helper = OdsMergeCellDataGridHelper.getInstance();
-  var pkName = keyExpr && keyExpr.toString();
   var _useState = React.useState(false),
     render = _useState[0],
     rerender = _useState[1];
@@ -38088,24 +38062,9 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _useState3 = React.useState([]),
     data = _useState3[0],
     setData = _useState3[1];
-  var _useState4 = React.useState(false),
-    isFastUpdateModalOpen = _useState4[0],
-    setIsFastUpdateModalOpen = _useState4[1];
-  var _useState5 = React.useState([]),
-    selectedCells = _useState5[0],
-    setSelectedCells = _useState5[1];
-  var _useState6 = React.useState([]),
-    hoveredCells = _useState6[0],
-    setHoveredCells = _useState6[1];
-  var _useState7 = React.useState([]),
-    ctrlSelectedCells = _useState7[0],
-    setCtrlSelectedCells = _useState7[1];
-  var _useState8 = React.useState(false),
-    ctrlSelection = _useState8[0],
-    setCtrlSelection = _useState8[1];
-  var _useState9 = React.useState([]),
-    mergedCellInfo = _useState9[0],
-    setMergedCellInfo = _useState9[1];
+  var _useState4 = React.useState([]),
+    mergedCellInfo = _useState4[0],
+    setMergedCellInfo = _useState4[1];
   var _useStyles = useStyles$a(),
     gridStyle = _useStyles.styles;
   React.useEffect(function () {
@@ -38148,121 +38107,10 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   React.useEffect(function () {
     localization.locale(localStorage.getItem("locale"));
     localization.loadMessages(JSON.parse(localStorage.getItem("localTranslation")));
-    if (gridRef.current) {
-      gridRef.current.instance.updateDimensions();
+    if (refGrid !== null && refGrid !== void 0 && refGrid.current) {
+      refGrid.current.instance.updateDimensions();
     }
-    hasFastUpdate && document.addEventListener("keydown", keydownEvent);
-    return function () {
-      hasFastUpdate && document.removeEventListener("keydown", keydownEvent);
-    };
   }, []);
-  var keydownEvent = function keydownEvent(e) {
-    switch (e.key) {
-      case "Escape":
-        {
-          clearSelectedCells();
-        }
-        break;
-    }
-  };
-  var clearSelectedCells = function clearSelectedCells() {
-    setSelectedCells([]);
-  };
-  var singleSelect = function singleSelect(pkValue, dataField) {
-    runSetSelectedCells([{
-      dataField: dataField,
-      pkValue: pkValue
-    }]);
-  };
-  var multipleSelect = function multipleSelect(cells) {
-    if (cells.length == 0) {
-      return;
-    }
-    var _cells = [];
-    var _loop = function _loop() {
-      var element = cells[index];
-      if (!_cells.some(function (cell) {
-        return cell.colIndex == element.colIndex && cell.rowIndex == element.rowIndex;
-      })) {
-        _cells.push({
-          colIndex: element.colIndex,
-          rowIndex: element.rowIndex
-        });
-      }
-    };
-    for (var index = 0; index < cells.length; index++) {
-      _loop();
-    }
-    var result = [];
-    var maxColIndex = Math.max.apply(null, _cells.map(function (item) {
-      return item.colIndex;
-    }));
-    var minColIndex = Math.min.apply(null, _cells.map(function (item) {
-      return item.colIndex;
-    }));
-    var maxRowIndex = Math.max.apply(null, _cells.map(function (item) {
-      return item.rowIndex;
-    }));
-    var minRowIndex = Math.min.apply(null, _cells.map(function (item) {
-      return item.rowIndex;
-    }));
-    for (var rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {
-      var _loop2 = function _loop2() {
-        var _column = gridRef.current.instance.columnOption(colIndex);
-        if (constants$2.allowedDataTypesForMultiCellEditing.some(function (item) {
-          return item.toLocaleLowerCase() == _column.dataType.toLocaleLowerCase();
-        })) {
-          result.push({
-            dataField: _column.dataField,
-            pkValue: gridRef.current.instance.cellValue(rowIndex, pkName)
-          });
-        }
-      };
-      for (var colIndex = minColIndex; colIndex <= maxColIndex; colIndex++) {
-        _loop2();
-      }
-    }
-    runSetSelectedCells(result);
-    setHoveredCells([]);
-    setCtrlSelectedCells([]);
-  };
-  var runSetSelectedCells = function runSetSelectedCells(value) {
-    var removeDuplicates = function removeDuplicates(oldValues) {
-      var result = [];
-      var _loop3 = function _loop3() {
-        var element = value[index];
-        if (element.pkValue && !oldValues.some(function (cell) {
-          return cell.dataField == element.dataField && cell.pkValue == element.pkValue;
-        })) {
-          result.push({
-            dataField: element.dataField,
-            pkValue: element.pkValue
-          });
-        }
-      };
-      for (var index = 0; index < value.length; index++) {
-        _loop3();
-      }
-      return result;
-    };
-    setSelectedCells(function (prev) {
-      return [].concat(prev, removeDuplicates(prev));
-    });
-  };
-  var removeSelectedCell = function removeSelectedCell(rowIndex, colIndex) {
-    var dataField = gridRef.current.instance.columnOption(colIndex).dataField;
-    var pkValue = gridRef.current.instance.cellValue(rowIndex, pkName);
-    setSelectedCells(function (prev) {
-      return prev.filter(function (cell) {
-        return !(cell.dataField == dataField && cell.pkValue == pkValue);
-      });
-    });
-  };
-  var closeModal = function closeModal() {
-    setIsFastUpdateModalOpen(false);
-    clearSelectedCells();
-    fastUpdateForm.resetFields();
-  };
   var actionButtons = React.useMemo(function () {
     if (props.actionButtonGroup) {
       if (props.actionButtonGroup.length > 3 && !props.edit) {
@@ -38274,18 +38122,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       return [];
     }
   }, [props.actionButtonGroup]);
-  var onEditorPreparing = React.useCallback(function (e) {
-    if (e.row !== undefined && e.parentType === "dataRow") {
-      if (props.handleEditorPreparing) {
-        props.handleEditorPreparing(e);
-      }
-    }
-    if (e.editorOptions && e.rowType === "data" && e.parentType === "dataRow") {
-      e.editorOptions.onValueChanged = function (args) {
-        if (args.event && args.event.type === "cancel") e.cellElement.dispatchEvent(onCancelEditEvent$1);
-      };
-    }
-  }, [props.isServerSide]);
   var customLoad = React.useCallback(function () {
     var state = JSON.parse(localStorage.getItem(props.exportFileName + "Storage"));
     if (localStorage.getItem(props.exportFileName + "Storage")) {
@@ -38312,21 +38148,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }
     localStorage.setItem(props.exportFileName + "Storage", JSON.stringify(state));
   }, [props.filterEnabledShow]);
-  var onEditorPrepared = React.useCallback(function (info) {
-    if (info.parentType === "filterRow" && info.editorName === "dxSelectBox" && (info.dataField === "IsActive" || info.dataField === "isActive")) {
-      if (info.dataSource != null && info.dataSource.length > 0) {
-        info.showAllText = info.dataSource.find(function (i) {
-          return i.value === null;
-        }).label;
-        info.trueText = info.dataSource.find(function (i) {
-          return i.value === true;
-        }).label;
-        info.falseText = info.dataSource.find(function (i) {
-          return i.value === false;
-        }).label;
-      }
-    }
-  }, []);
   function actionCellRender(cellData, props) {
     var kebabMenuButtons = props.actionButtonGroup && props.actionButtonGroup.length > 3 && !props.edit ? props.actionButtonGroup.slice(2).map(function (button) {
       return {
@@ -38423,95 +38244,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }
     return React__default.createElement(React__default.Fragment, null, buttonElements);
   }
-  var onCustomCellClick = function onCustomCellClick(e) {
-    if (hasFastUpdate) {
-      if (checkCellSelectionConstraints$1(e) && constants$2.allowedDataTypesForMultiCellEditing.some(function (item) {
-        return item.toLocaleLowerCase() == e.column.dataType.toLocaleLowerCase();
-      })) {
-        if (!e.event.ctrlKey) {
-          if (cellAlreadySelected$1(e.data[pkName], e.column.dataField, selectedCells)) {
-            removeSelectedCell(e.rowIndex, e.columnIndex);
-          } else {
-            singleSelect(e.data[pkName], e.column.dataField);
-          }
-        } else {
-          var selectedCell = {
-            colIndex: e.columnIndex,
-            rowIndex: e.rowIndex
-          };
-          if (ctrlSelection) {
-            multipleSelect([].concat(ctrlSelectedCells, [selectedCell]));
-          } else {
-            setCtrlSelectedCells(function (prev) {
-              return [].concat(prev, [selectedCell]);
-            });
-          }
-          setCtrlSelection(function (prev) {
-            return !prev;
-          });
-        }
-      }
-    }
-    onCellClick && onCellClick(e);
-  };
-  var onCustomCellHoverChanged = function onCustomCellHoverChanged(e) {
-    if (hasFastUpdate) {
-      if (!e.event.ctrlKey && !ctrlSelection) {
-        if (checkCellSelectionConstraints$1(e)) {
-          if (e.event.buttons === 1) {
-            setHoveredCells(function (prev) {
-              return [].concat(prev, [{
-                colIndex: e.columnIndex,
-                rowIndex: e.rowIndex
-              }]);
-            });
-          } else {
-            multipleSelect(hoveredCells);
-          }
-        } else if (e.rowType != "data") {
-          multipleSelect(hoveredCells);
-        }
-      }
-    }
-    onCellHoverChanged && onCellHoverChanged(e);
-  };
-  var onCustomFastUpdateButtonClick = function onCustomFastUpdateButtonClick(e) {
-    if (selectedCells.length > 0) {
-      setIsFastUpdateModalOpen(true);
-    }
-    onFastUpdateButtonClick && onFastUpdateButtonClick(e);
-  };
-  var onFastUpdateModalCancel = function onFastUpdateModalCancel(_e) {
-    closeModal();
-    onFastUpdateCancel && onFastUpdateCancel();
-  };
-  var onFastUpdateFormFinish = function onFastUpdateFormFinish(values) {
-    onFastUpdateFinish && onFastUpdateFinish(values, selectedCells);
-    closeModal();
-  };
-  var onFastUpdateFormFinishFailed = function onFastUpdateFormFinishFailed(errorInfo) {
-    onFastUpdateFailed && onFastUpdateFailed(errorInfo);
-  };
-  var onClickFastUpdateFormCancel = function onClickFastUpdateFormCancel(_e) {
-    closeModal();
-    onFastUpdateCancel && onFastUpdateCancel();
-  };
   var onCustomCellPrepared = function onCustomCellPrepared(e) {
-    var _props$edit, _props$edit2;
-    if (hasFastUpdate) {
-      if (e.rowType === "data" && e.column.allowEditing && constants$2.allowedDataTypesForMultiCellEditing.some(function (item) {
-        return item.toLocaleLowerCase() == e.column.dataType.toLocaleLowerCase();
-      })) {
-        if (selectedCells.some(function (cell) {
-          return cell.pkValue == e.data[pkName] && cell.dataField == e.column.dataField;
-        })) {
-          e.cellElement.classList.add("grid-cell-selected");
-        }
-      }
-    }
-    if (((_props$edit = props.edit) === null || _props$edit === void 0 ? void 0 : _props$edit.mode) == "cell" && (_props$edit2 = props.edit) !== null && _props$edit2 !== void 0 && _props$edit2.allowUpdating && e.rowType == "data" && !e.column.allowEditing) {
-      e.cellElement.classList.add("grid-cell-disable-colored");
-    }
     var isDifferentDataField = e.column.type == "selection" || e.column.dataField == dataFieldNameActions;
     if (e.rowType === "data" && e.columnIndex >= 0 && e.rowIndex >= 0 && (props.mergeDataFields.some(function (x) {
       return x == e.column.dataField;
@@ -38636,81 +38369,23 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       });
     }
   };
-  var renderMasterDetailGrid = React.useCallback(function (_ref) {
-    var _dataSource$data;
-    var dataSource = _ref.data;
-    var detailID = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$data = dataSource.data) === null || _dataSource$data === void 0 ? void 0 : _dataSource$data.ID;
-    if (!detailID || !(detailData !== null && detailData !== void 0 && detailData[detailID])) {
-      return null;
-    }
-    return React__default.createElement(MasterDetailDataGrid, {
-      columns: detailGridColumns,
-      dataSource: detailData[detailID],
-      masterDetailFeatures: masterDetailFeatures
-    });
-  }, [detailGridColumns, detailData, masterDetailFeatures]);
   var checkIsPropArray = function checkIsPropArray(prop) {
     return prop && Array.isArray(prop);
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Modal, {
-    title: fastUpdateModalTitle != null ? fastUpdateModalTitle : "Fast Update",
-    open: isFastUpdateModalOpen,
-    onCancel: onFastUpdateModalCancel,
-    footer: [],
-    maskClosable: true,
-    width: 300
-  }, React__default.createElement(antd.Form, {
-    key: "form-fastupdate",
-    form: fastUpdateForm,
-    style: {
-      maxWidth: "100%"
-    },
-    layout: "vertical",
-    onFinish: onFastUpdateFormFinish,
-    onFinishFailed: onFastUpdateFormFinishFailed
-  }, constants$2.allowedDataTypesForMultiCellEditing.map(function (item) {
-    switch (item) {
-      case "number":
-        return React__default.createElement(antd.Form.Item, {
-          name: "number",
-          label: "",
-          rules: [{
-            required: true,
-            message: fastUpdateFormRequiredFieldMessage != null ? fastUpdateFormRequiredFieldMessage : "Required field"
-          }]
-        }, React__default.createElement(OdsInputNumber, {
-          key: "odsinputnumber-fastupdate",
-          style: {
-            width: "100%"
-          },
-          min: 0
-        }));
-      default:
-        return React__default.createElement("div", null);
-    }
-  }), React__default.createElement(antd.Row, {
-    style: {
-      justifyContent: "end",
-      gap: token.marginSM
-    }
-  }, React__default.createElement(antd.Col, null, React__default.createElement(OdsButton, {
-    key: "back",
-    onClick: onClickFastUpdateFormCancel
-  }, " ", fastUpdateModalCancelText != null ? fastUpdateModalCancelText : "Cancel")), React__default.createElement(antd.Col, null, React__default.createElement(OdsButton, {
-    htmlType: "submit",
-    type: "primary"
-  }, " ", fastUpdateModalSaveText != null ? fastUpdateModalSaveText : "Save"))))), React__default.createElement(DataGrid__default, Object.assign({
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(DataGrid__default, Object.assign({
     keyExpr: keyExpr,
     dataSource: data,
     showBorders: true,
     columnAutoWidth: false,
-    ref: gridRef,
+    ref: refGrid,
     height: props.height == undefined ? window.innerHeight - 164 : props.height,
     allowColumnResizing: true,
     columnResizingMode: (_props$columnResizing = props.columnResizingMode) != null ? _props$columnResizing : "widget",
     showRowLines: true,
     allowColumnReordering: true,
-    remoteOperations: false,
+    remoteOperations: {
+      sorting: true
+    },
     paging: {
       enabled: false
     },
@@ -38731,18 +38406,13 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
       mode: "multiple",
       selectAllMode: "page"
     },
-    sorting: {
-      mode: "none"
-    },
-    onEditorPreparing: onEditorPreparing,
     onExporting: handleExporting,
     onRowClick: props.onRowClick,
-    onEditorPrepared: onEditorPrepared,
     onSaved: props.onSaved,
     onSaving: props.onSaving,
     onEditCanceling: props.onEditCanceling,
-    onCellClick: onCustomCellClick,
-    onCellHoverChanged: onCustomCellHoverChanged,
+    onCellClick: props.onCellClick,
+    onCellHoverChanged: props.onCellHoverChanged,
     onCellPrepared: onCustomCellPrepared,
     onOptionChanged: props.onOptionChanged,
     onToolbarPreparing: !props.closeGridHeader && (props.onToolbarPreparing || onToolbarPreparing),
@@ -38753,7 +38423,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }, col, {
       minWidth: 50,
       width: props.isColumnWidthFixed === true ? 160 : undefined,
-      cssClass: col.cssClass + " " + (hasFastUpdate ? "grid-cell-disable-text-selection" : "")
+      cssClass: col.cssClass
     }), col.lookUp && React__default.createElement(devextremeReact.Lookup, Object.assign({}, col.lookUp)), (col.dataField === "IsActive" || col.dataField === "isActive") && React__default.createElement(DataGrid.HeaderFilter, {
       dataSource: [{
         text: "Active",
@@ -38786,32 +38456,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     cellRender: function cellRender(cellData) {
       return actionCellRender(cellData, props);
     }
-  }), props.showMasterDetail && React__default.createElement(DataGrid.MasterDetail, {
-    enabled: true,
-    component: renderMasterDetailGrid
-  }), props.edit && React__default.createElement(DataGrid.Editing, {
-    mode: props.edit.mode,
-    allowUpdating: props.edit.allowUpdating,
-    allowDeleting: props.edit.allowDeleting,
-    allowAdding: props.edit.allowAdding,
-    useIcons: true
-  }, props.edit.mode === "popup" && React__default.createElement("div", null, React__default.createElement(DataGrid.Popup, {
-    showTitle: true,
-    width: 700,
-    height: 300,
-    showCloseButton: false
-  }), React__default.createElement(DataGrid.Form, null, props.edit.formItems && props.edit.formItems.map(function (formItem) {
-    return React__default.createElement(form.Item, {
-      itemType: formItem.itemType,
-      colCount: formItem.colCount,
-      colSpan: formItem.colSpan
-    }, formItem.items.map(function (subItem) {
-      return React__default.createElement(form.Item, {
-        key: subItem.dataField,
-        dataField: subItem.dataField
-      });
-    }));
-  })))), React__default.createElement(DataGrid.Paging, {
+  }), React__default.createElement(DataGrid.Paging, {
     enabled: false
   }), React__default.createElement(DataGrid.Pager, {
     visible: false
@@ -38826,7 +38471,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   }), React__default.createElement(DataGrid.HeaderFilter, {
     visible: true
   }), React__default.createElement(DataGrid.Sorting, {
-    mode: "none"
+    mode: "multiple"
   }), !props.closeGridHeader && React__default.createElement(DataGrid.Export, {
     enabled: true,
     allowExportSelectedData: true,
@@ -38858,10 +38503,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   }), React__default.createElement(DataGrid.Item, {
     name: "exportButton",
     cssClass: "toolbarPanelItems"
-  }), hasFastUpdate && React__default.createElement(DataGrid.Item, null, React__default.createElement(OdsButton, {
-    key: "odsbutton-fastupdate",
-    onClick: onCustomFastUpdateButtonClick
-  }, fastUpdateButtonText != null ? fastUpdateButtonText : "Fast Update"))), React__default.createElement(DataGrid.StateStoring, {
+  })), React__default.createElement(DataGrid.StateStoring, {
     enabled: true,
     type: "custom",
     customLoad: customLoad,
@@ -38869,6 +38511,316 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   })));
 };
 
+var currentYear = new Date().getFullYear();
+var Constants = {
+  timelineDefaultStartDate: new Date(currentYear, 0, 1),
+  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
+};
+
+var checkboxCellComponent = function checkboxCellComponent(props) {
+  var isChecked = props.data.value;
+  var onChange = function onChange(e) {
+    props.data.column.onCheckboxColumnChange({
+      data: props.data.data,
+      dataField: props.data.column.dataField,
+      isChecked: e.target.checked
+    });
+  };
+  return React__default.createElement(OdsCheckbox, {
+    key: "odstimeline-checkboxcolumn-" + props.data.name,
+    style: {
+      height: "32px"
+    },
+    defaultChecked: isChecked,
+    onChange: onChange
+  });
+};
+var statusCellComponent = function statusCellComponent(props) {
+  var isActive = props.data.value;
+  var _onClick = function onClick(value) {
+    props.data.column.onStatusColumnChange({
+      data: props.data.data,
+      dataField: props.data.column.dataField,
+      status: value
+    });
+  };
+  return isActive ? React__default.createElement(icons.CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#568B6B"
+    },
+    onClick: function onClick() {
+      return _onClick(false);
+    }
+  }) : React__default.createElement(icons.CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#EDEDED"
+    },
+    onClick: function onClick() {
+      return _onClick(true);
+    }
+  });
+};
+var minimalHeaderCellComponent = function minimalHeaderCellComponent(data, __el) {
+  return React__default.createElement("div", {
+    className: "minimalHeaderCell"
+  }, data.data.column.caption);
+};
+var mapCustomTask = function mapCustomTask(item) {
+  return _extends({
+    isSelected: false
+  }, item);
+};
+var setSelectedKeys = function setSelectedKeys(datasource, key, selectedKeys) {
+  if (key && key != "" && selectedKeys && selectedKeys.length > 0) {
+    return datasource.map(function (x) {
+      if (selectedKeys.some(function (y) {
+        return y == x[key];
+      })) {
+        x.isSelected = true;
+      }
+      return x;
+    });
+  } else {
+    return datasource;
+  }
+};
+
+var OdsTimelineDateFilter = function OdsTimelineDateFilter(props) {
+  var defaultStartDate = props.defaultStartDate,
+    defaultEndDate = props.defaultEndDate,
+    backText = props.backText,
+    nextText = props.nextText,
+    onFilterRangeChange = props.onFilterRangeChange;
+  var _useState = React.useState([dayjs_min(defaultStartDate), dayjs_min(defaultEndDate)]),
+    dateRange = _useState[0],
+    setDateRange = _useState[1];
+  var startDate = dateRange[0].toDate();
+  var endDate = dateRange[1].toDate();
+  var onPickerValueChange = function onPickerValueChange(date) {
+    var newStartDate = date[0].toDate(),
+      newEndDate = date[1].toDate();
+    (newStartDate != startDate || newEndDate != endDate) && onFilterRangeChange({
+      startDate: newStartDate,
+      endDate: newEndDate
+    });
+    setDateRange(date);
+  };
+  var buttonClick = function buttonClick(monthDirection) {
+    var newStartDate = startDate,
+      newEndDate = endDate,
+      currentStartYear = startDate.getFullYear(),
+      currentStartMonth = startDate.getMonth(),
+      currentEndYear = endDate.getFullYear(),
+      currentEndMonth = endDate.getMonth();
+    switch (monthDirection) {
+      case "previousMonth":
+        newStartDate.setMonth(currentStartMonth == 0 ? 11 : currentStartMonth - 1);
+        newStartDate.setFullYear(currentStartMonth == 0 ? currentStartYear - 1 : currentStartYear);
+        break;
+      case "nextMonth":
+        newEndDate.setMonth(currentEndMonth == 11 ? 0 : currentEndMonth + 1);
+        newEndDate.setFullYear(currentEndMonth == 11 ? currentEndYear + 1 : currentEndYear);
+        break;
+    }
+    setDateRange([dayjs_min(newStartDate), dayjs_min(newEndDate)]);
+    onFilterRangeChange({
+      startDate: newStartDate,
+      endDate: newEndDate
+    });
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Space, null, React__default.createElement(OdsButton, {
+    key: "odsbutton-back",
+    onClick: function onClick(_e) {
+      buttonClick("previousMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, React__default.createElement(icons.LeftCircleFilled, null), backText != null ? backText : "Back"), React__default.createElement(OdsDateRangePicker, {
+    defaultValue: [dayjs_min(defaultStartDate), dayjs_min(defaultEndDate)],
+    value: dateRange,
+    onPickerValueChange: onPickerValueChange
+  }), React__default.createElement(OdsButton, {
+    key: "odsbutton-next",
+    onClick: function onClick(_e) {
+      buttonClick("nextMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, nextText != null ? nextText : "Next", React__default.createElement(icons.RightCircleFilled, null))));
+};
+
+var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEvent) {
+  var selectionColumn = {
+    caption: "",
+    minWidth: 50,
+    width: 50,
+    dataField: "isSelected",
+    cellComponent: function cellComponent(props) {
+      var onChange = function onChange(e) {
+        selectionEvent && selectionEvent({
+          data: props.data.data,
+          isSelected: e.target.checked
+        });
+      };
+      return React__default.createElement(OdsCheckbox, {
+        key: "odstimeline-selection-" + props.data.name,
+        style: {
+          height: "32px"
+        },
+        defaultChecked: props.data.value,
+        onChange: onChange
+      });
+    }
+  };
+  return selectionColumn;
+};
+
+var _templateObject$B, _templateObject2$9, _templateObject3$6;
+var useStyles$b = antdStyle.createStyles(function (_ref, props) {
+  var css = _ref.css;
+  return {
+    taskBar: css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n        min-height: 22px;\n        display: block;\n        overflow: hidden;\n        width: ", "px;\n        border: 1px solid #f0f0f0;\n        border-radius: 5px;\n        background-color: #f0f0f0;\n      "])), props.taskWidth),
+    taskProgress: css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: ", "%;\n        border: 1px solid ", ";\n        border-radius: 5px;\n        background-color: ", ";\n      "])), props.progressPerc, props.progressColor, props.progressColor),
+    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "])))
+  };
+});
+
+var OdsTimelineTableTaskTemplate = function OdsTimelineTableTaskTemplate(_ref) {
+  var taskData = _ref.taskData,
+    taskSize = _ref.taskSize;
+  var _useStyles = useStyles$b({
+      progressColor: taskData.color,
+      progressPerc: taskData.progress,
+      taskWidth: taskSize.width
+    }),
+    timelineTableStyles = _useStyles.styles;
+  return React__default.createElement("div", {
+    className: timelineTableStyles.taskBar
+  }, React__default.createElement("span", {
+    className: timelineTableStyles.taskBarTitle
+  }, taskData.title), React__default.createElement("div", {
+    className: timelineTableStyles.taskProgress
+  }));
+};
+
+var OdsTimelineTable = React.forwardRef(function (props, ref) {
+  var customColumns = props.customColumns,
+    customTasks = props.customTasks,
+    customTaskKey = props.customTaskKey,
+    customSelectedKeys = props.customSelectedKeys,
+    children = props.children,
+    startDateRange = props.startDateRange,
+    endDateRange = props.endDateRange,
+    multiSelectionEnabled = props.multiSelectionEnabled,
+    toolbarVisible = props.toolbarVisible,
+    showDateFilter = props.showDateFilter,
+    onCustomSelectionChanged = props.onCustomSelectionChanged,
+    onDateRangeChange = props.onDateRangeChange;
+  var _useState = React.useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
+    startDate = _useState[0],
+    setStartDate = _useState[1];
+  var _useState2 = React.useState(endDateRange != null ? endDateRange : Constants.timelineDefaultEndDate),
+    endDate = _useState2[0],
+    setEndDate = _useState2[1];
+  var _useState3 = React.useState([]),
+    timelineTasks = _useState3[0],
+    setTimelineTasks = _useState3[1];
+  React.useEffect(function () {
+    setTimelineTasks(multiSelectionEnabled ? setSelectedKeys(customTasks.map(mapCustomTask), customTaskKey, customSelectedKeys) : customTasks);
+  }, [customTasks]);
+  var getSelectedRowsData = function getSelectedRowsData() {
+    return timelineTasks.filter(function (item) {
+      return item.isSelected == true;
+    });
+  };
+  var updateSelectionData = function updateSelectionData(keyValue, isSelected) {
+    setTimelineTasks(function (prev) {
+      return prev.map(function (item) {
+        if (item[props.customTaskKey] == keyValue) {
+          item.isSelected = isSelected;
+        }
+        return item;
+      });
+    });
+  };
+  var onTimelineDateRangeChange = function onTimelineDateRangeChange(e) {
+    setStartDate(e.startDate);
+    setEndDate(e.endDate);
+    onDateRangeChange && onDateRangeChange({
+      startDate: e.startDate,
+      endDate: e.endDate
+    });
+  };
+  var onTimelineCheckboxSelectionChange = function onTimelineCheckboxSelectionChange(e) {
+    updateSelectionData(e.data[props.customTaskKey], e.isSelected);
+    onCustomSelectionChanged && onCustomSelectionChanged(e);
+  };
+  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
+  React.useImperativeHandle(ref, function () {
+    return {
+      getSelectedRowsData: getSelectedRowsData
+    };
+  });
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(gantt.Gantt, Object.assign({
+    width: "100%",
+    height: 500,
+    startDateRange: startDate,
+    endDateRange: endDate,
+    taskContentRender: function taskContentRender(params) {
+      return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
+    }
+  }, props), toolbarVisible ? React__default.createElement(gantt.Toolbar, null, showDateFilter ? React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_DateFilter",
+    component: function component(props) {
+      return OdsTimelineDateFilter(_extends({}, props, {
+        defaultStartDate: startDate,
+        defaultEndDate: endDate,
+        onFilterRangeChange: onTimelineDateRangeChange
+      }));
+    }
+  }) : "", React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomIn",
+    name: "zoomIn"
+  }), React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomOut",
+    name: "zoomOut"
+  })) : "", React__default.createElement(gantt.ContextMenu, {
+    enabled: false
+  }), timelineColumns === null || timelineColumns === void 0 ? void 0 : timelineColumns.map(function (columnProps) {
+    if (columnProps.isStatusColumn) {
+      return React__default.createElement(gantt.Column, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: statusCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else if (columnProps.isCheckboxColumn) {
+      return React__default.createElement(gantt.Column, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: checkboxCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else {
+      return React__default.createElement(gantt.Column, Object.assign({
+        headerCellComponent: columnProps.isMinimized && minimalHeaderCellComponent
+      }, columnProps));
+    }
+  }), React__default.createElement(gantt.Tasks, {
+    dataSource: timelineTasks
+  }), children));
+});
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -39378,10 +39330,10 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-var checkCellSelectionConstraints$2 = function checkCellSelectionConstraints(e) {
+var checkCellSelectionConstraints$1 = function checkCellSelectionConstraints(e) {
   return e.rowType == "data" && e.columnIndex > -1 && e.rowIndex > -1;
 };
-var cellAlreadySelected$2 = function cellAlreadySelected(pkValue, dataField, cellInfos) {
+var cellAlreadySelected$1 = function cellAlreadySelected(pkValue, dataField, cellInfos) {
   return cellInfos.some(function (cell) {
     return cell.pkValue == pkValue && cell.dataField == dataField;
   });
@@ -40163,11 +40115,11 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var onCustomCellClick = function onCustomCellClick(e) {
     e.cellElement.style.backgroundColor = "transparent";
     if (hasFastUpdate) {
-      if (checkCellSelectionConstraints$2(e) && constants$3.allowedDataTypesForMultiCellEditing.some(function (item) {
+      if (checkCellSelectionConstraints$1(e) && constants$3.allowedDataTypesForMultiCellEditing.some(function (item) {
         return item.toLocaleLowerCase() == e.column.dataType.toLocaleLowerCase();
       })) {
         if (!e.event.ctrlKey) {
-          if (cellAlreadySelected$2(e.data[pkName], e.column.dataField, selectedCells)) {
+          if (cellAlreadySelected$1(e.data[pkName], e.column.dataField, selectedCells)) {
             removeSelectedCell(e.rowIndex, e.columnIndex);
           } else {
             singleSelect(e.data[pkName], e.column.dataField);
@@ -40195,7 +40147,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var onCustomCellHoverChanged = function onCustomCellHoverChanged(e) {
     if (hasFastUpdate) {
       if (!e.event.ctrlKey && !ctrlSelection) {
-        if (checkCellSelectionConstraints$2(e)) {
+        if (checkCellSelectionConstraints$1(e)) {
           if (e.event.buttons === 1) {
             setHoveredCells(function (prev) {
               return [].concat(prev, [{
@@ -40587,6 +40539,7 @@ exports.OdsTag = OdsTag;
 exports.OdsText = OdsText;
 exports.OdsTextArea = OdsTextArea;
 exports.OdsTimeline = OdsTimeline;
+exports.OdsTimelineTable = OdsTimelineTable;
 exports.OdsTimepicker = OdsTimepicker;
 exports.OdsTitle = OdsTitle;
 exports.OdsTransfer = OdsTransfer;