ods-component-lib 1.18.234 → 1.18.236

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Functions.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 export declare const checkboxCellComponent: (props: any) => React.JSX.Element;
 export declare const statusCellComponent: (props: any) => React.JSX.Element;
-export declare const minimalHeaderCellComponent: (data: any, __el: any) => React.JSX.Element;
 export declare const mapCustomTask: (item: any) => any;
-export declare const setSelectedKeys: (datasource: any[], key?: string, selectedKeys?: number[] | string[]) => any[];
+export declare const mapSelectedKeys: (datasource: any[], key?: string, selectedKeys?: number[] | string[]) => any[];

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Style.d.ts

@@ -6,4 +6,6 @@ export declare const useStyles: (props?: {
     taskBar: import("antd-style").SerializedStyles;
     taskProgress: import("antd-style").SerializedStyles;
     taskBarTitle: import("antd-style").SerializedStyles;
+    searchBoxIcon: import("antd-style").SerializedStyles;
+    searchBox: import("antd-style").SerializedStyles;
 }>;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Types.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { IColumnProps, IGanttOptions, IItemProps } from "devextreme-react/gantt";
+import { ExportDocumentType, SortingProcessType, SortingType } from "../../../utils/customTypes";
+export declare type SortingMode = "single" | "multiple" | "none";
+export declare const enum EnumDateDirection {
+    prevMonth = "previousMonth",
+    nextMonth = "nextMonth"
+}
 export interface IMenuLinkItem {
     text: string;
     url: string;
@@ -24,10 +30,13 @@ export interface ICheckboxColumnChange {
     dataField: string;
 }
 export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOptions> {
+    /**
+     * Set reference object to access Gantt component props
+     */
     /**
      * Set columns for listview.
      */
-    customColumns?: IOdsTimelineColumnProps[];
+    customColumns?: IOdsTimelineTableColumnProps[];
     /**
      * Set task list. It is used for list view and timeline view.
      */
@@ -39,19 +48,19 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
     /**
      * Set key values to be selected. "multiSelectionEnabled" must be true.
      */
-    customSelectedKeys?: string[] | number[];
+    customSelectedKeys?: string[];
     /**
      * Set true if you want multi selection in list view.
      */
     multiSelectionEnabled?: boolean;
     /**
-     * Set true if it' s visible.
+     * Set settings an for toolbar.
      */
-    toolbarVisible?: boolean;
+    toolbarSettings?: IOdsTimelineTableToolbarSettings;
     /**
-     * Set true if it' s visible.
+     * ClientSideSorting means Gantt's default sorting, but sorting have to be managed programmacitally if ServerSideSorting is chosen
      */
-    showDateFilter?: boolean;
+    sortingProcess?: SortingProcessType;
     /**
      * This is a selection event that fired when selection is changed.
      */
@@ -60,26 +69,58 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
      * This is a date range event that fired when date range is changed.
      */
     onDateRangeChange?(e: IDateRangeChange): void;
+    /**
+     * Triggered after sorting changed
+     */
+    onSortingChanged?(sortedColumns: ISortedColumn[], headerCellProps?: any): void;
 }
-export interface IOdsTimelineColumnProps extends IColumnProps {
+export interface IOdsTimelineTableColumnProps extends IColumnProps {
     isMinimized?: boolean;
     isStatusColumn?: boolean;
     isCheckboxColumn?: boolean;
+    sortingFieldName?: string;
+    allowExporting?: boolean;
 }
-export interface IOdsTimelineStatusColumnProps extends IOdsTimelineColumnProps {
+export interface IOdsTimelineTableStatusColumnProps extends IOdsTimelineTableColumnProps {
     onStatusColumnChange(e: IStatusColumnChange): void;
 }
-export interface IOdsTimelineCheckboxColumnProps extends IOdsTimelineColumnProps {
+export interface IOdsTimelineCheckboxColumnProps extends IOdsTimelineTableColumnProps {
     onCheckboxColumnChange(e: ICheckboxColumnChange): void;
 }
-export interface IOdsTimelineDateFilter extends IItemProps {
+export interface ISortedColumn {
+    sortingFieldName: string;
+    sortType: SortingType;
+    sortIndex: number;
+    sortingText: string;
+}
+export interface IOdsTimelineTableToolbarSettings {
+    visible?: boolean;
+    location?: "before" | "after";
+    search?: {
+        visible?: boolean;
+        placeholder?: string;
+        searchValue?: string;
+        onSearch?(searchValue?: string): void;
+    };
+    export?: {
+        visible?: boolean;
+        title?: string;
+        fileName?: string;
+        documentFormat?: ExportDocumentType;
+    };
+    dateFilterVisible?: boolean;
+    zoomVisible?: boolean;
+}
+export interface IOdsTimelineTableDateFilter extends IItemProps {
     defaultStartDate?: Date;
     defaultEndDate?: Date;
     backText?: string;
     nextText?: string;
     onFilterRangeChange(e: IDateRangeChange): void;
 }
-export declare const enum DateDirection {
-    prevMonth = "previousMonth",
-    nextMonth = "nextMonth"
+export interface IOdsTimelineTableSearchBox extends IItemProps {
+    value?: string;
+    timeoutDuration?: number;
+    placeholder?: string;
+    onSearch?(searchValue?: string): void;
 }

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "jspdf-autotable";
 import "./OdsTimelineTable.css";
 import { IOdsTimelineTableProps } from "./OdsTimelineTable.Types";
 declare const OdsTimelineTable: React.ForwardRefExoticComponent<IOdsTimelineTableProps & React.RefAttributes<unknown>>;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTableDateFilter.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { IOdsTimelineDateFilter } from "./OdsTimelineTable.Types";
-export declare const OdsTimelineDateFilter: (props: IOdsTimelineDateFilter | Readonly<IOdsTimelineDateFilter>) => React.JSX.Element;
+import { IOdsTimelineTableDateFilter } from "./OdsTimelineTable.Types";
+export declare const OdsTimelineTableDateFilter: (props: IOdsTimelineTableDateFilter | Readonly<IOdsTimelineTableDateFilter>) => React.JSX.Element;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTableSearchBox.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IOdsTimelineTableSearchBox } from "./OdsTimelineTable.Types";
+export declare const OdsTimelineTableSearchBox: (props: IOdsTimelineTableSearchBox | Readonly<IOdsTimelineTableSearchBox>) => React.JSX.Element;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTableSelectionColumn.d.ts

@@ -1,2 +1,2 @@
-import { ICustomSelectionChange, IOdsTimelineColumnProps } from "./OdsTimelineTable.Types";
-export declare const OdsTimelineSelectionColumn: (selectionEvent?: (e: ICustomSelectionChange) => void) => IOdsTimelineColumnProps;
+import { ICustomSelectionChange, IOdsTimelineTableColumnProps } from "./OdsTimelineTable.Types";
+export declare const OdsTimelineSelectionColumn: (selectionEvent?: (e: ICustomSelectionChange) => void) => IOdsTimelineTableColumnProps;

package/dist/index.css

@@ -230,7 +230,22 @@ tr._2CvVM._3Xrp3._19iuB._3udtX {
 ._3sOBn {
   vertical-align: middle !important;
 }
-
+
+._ww084:has(._2Ljgj) {
+  width: 100%;
+}
+
+._2Ljgj{
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+._2dILO {
+  flex: 1;
+  align-content: center;
+}
 ._3n8UJ {
   background-color: lightgreen;
 }

package/dist/index.js

@@ -36,7 +36,8 @@ var DataGrid__default = _interopDefault(DataGrid);
 var form = require('devextreme-react/form');
 var pdf_exporter = require('devextreme/pdf_exporter');
 var excel_exporter = require('devextreme/excel_exporter');
-var jsPDF = _interopDefault(require('jspdf'));
+var jsPDF = require('jspdf');
+var jsPDF__default = _interopDefault(jsPDF);
 var exceljs = require('exceljs');
 var fileSaverEs = require('file-saver-es');
 var moment = _interopDefault(require('moment'));
@@ -46,6 +47,7 @@ var antdStyle = require('antd-style');
 var FileSaver = require('file-saver');
 require('devextreme/dist/css/dx.light.css');
 var gantt = require('devextreme-react/gantt');
+require('jspdf-autotable');
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -1284,7 +1286,7 @@ function OdsDataGrid(props) {
         });
       });
     } else {
-      var doc = new jsPDF();
+      var doc = new jsPDF__default();
       pdf_exporter.exportDataGrid({
         jsPDFDocument: doc,
         component: e.component,
@@ -1556,7 +1558,7 @@ function grid(props) {
         });
       });
     } else {
-      var doc = new jsPDF();
+      var doc = new jsPDF__default();
       pdf_exporter.exportDataGrid({
         jsPDFDocument: doc,
         component: e.component,
@@ -38563,17 +38565,12 @@ var statusCellComponent = function statusCellComponent(props) {
     }
   });
 };
-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) {
+var mapSelectedKeys = function mapSelectedKeys(datasource, key, selectedKeys) {
   if (key && key != "" && selectedKeys && selectedKeys.length > 0) {
     return datasource.map(function (x) {
       if (selectedKeys.some(function (y) {
@@ -38588,7 +38585,7 @@ var setSelectedKeys = function setSelectedKeys(datasource, key, selectedKeys) {
   }
 };
 
-var OdsTimelineDateFilter = function OdsTimelineDateFilter(props) {
+var OdsTimelineTableDateFilter = function OdsTimelineTableDateFilter(props) {
   var defaultStartDate = props.defaultStartDate,
     defaultEndDate = props.defaultEndDate,
     backText = props.backText,
@@ -38684,13 +38681,19 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
   return selectionColumn;
 };
 
-var _templateObject$B, _templateObject2$9, _templateObject3$6;
+var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4;
 var useStyles$b = antdStyle.createStyles(function (_ref, props) {
+  var _props$taskWidth, _props$progressPerc, _props$progressColor;
   var css = _ref.css;
+  var _taskWidth = (_props$taskWidth = props === null || props === void 0 ? void 0 : props.taskWidth) != null ? _props$taskWidth : 0;
+  var _progressPerc = (_props$progressPerc = props === null || props === void 0 ? void 0 : props.progressPerc) != null ? _props$progressPerc : 100;
+  var _progressColor = (_props$progressColor = props === null || props === void 0 ? void 0 : props.progressColor) != null ? _props$progressColor : "unset";
   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      "])))
+    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      "])), _taskWidth != null ? _taskWidth : 0),
+    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      "])), _progressPerc, _progressColor, _progressColor),
+    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "]))),
+    searchBoxIcon: css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        color: #999;\n        font-size: 17px;\n        line-height: 18px;\n      "]))),
+    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        padding-left: 5px;\n      "])))
   };
 });
 
@@ -38712,7 +38715,45 @@ var OdsTimelineTableTaskTemplate = function OdsTimelineTableTaskTemplate(_ref) {
   }));
 };
 
+var OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
+  var _props$value;
+  var _useStyles = useStyles$b(),
+    timelineTableStyles = _useStyles.styles;
+  var _useState = React.useState(true),
+    initialLoad = _useState[0],
+    setInitialLoad = _useState[1];
+  var _useState2 = React.useState((_props$value = props.value) != null ? _props$value : ""),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  React.useEffect(function () {
+    var _props$timeoutDuratio;
+    if (initialLoad) {
+      setInitialLoad(false);
+      return function () {};
+    }
+    var timeoutSearch = setTimeout(function () {
+      props.onSearch && props.onSearch(searchValue);
+    }, (_props$timeoutDuratio = props.timeoutDuration) != null ? _props$timeoutDuratio : 2000);
+    return function () {
+      return clearTimeout(timeoutSearch);
+    };
+  }, [searchValue]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(OdsInput, {
+    key: "OdsTimelineTableSearchBox_OdsSearch",
+    value: searchValue,
+    prefix: React__default.createElement("span", {
+      className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
+    }),
+    placeholder: props.placeholder,
+    className: timelineTableStyles.searchBox,
+    onChange: function onChange(e) {
+      return setSearchValue(e.target.value);
+    }
+  }));
+};
+
 var OdsTimelineTable = React.forwardRef(function (props, ref) {
+  var _toolbarSettings$sear, _toolbarSettings$sear5, _toolbarSettings$expo6, _toolbarSettings$expo7;
   var customColumns = props.customColumns,
     customTasks = props.customTasks,
     customTaskKey = props.customTaskKey,
@@ -38721,10 +38762,13 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     startDateRange = props.startDateRange,
     endDateRange = props.endDateRange,
     multiSelectionEnabled = props.multiSelectionEnabled,
-    toolbarVisible = props.toolbarVisible,
-    showDateFilter = props.showDateFilter,
+    sorting = props.sorting,
+    sortingProcess = props.sortingProcess,
+    toolbarSettings = props.toolbarSettings,
     onCustomSelectionChanged = props.onCustomSelectionChanged,
-    onDateRangeChange = props.onDateRangeChange;
+    onDateRangeChange = props.onDateRangeChange,
+    onSortingChanged = props.onSortingChanged;
+  var refGantt = React.useRef(null);
   var _useState = React.useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
     startDate = _useState[0],
     setStartDate = _useState[1];
@@ -38734,23 +38778,147 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   var _useState3 = React.useState([]),
     timelineTasks = _useState3[0],
     setTimelineTasks = _useState3[1];
+  var _useState4 = React.useState([]),
+    sortedColumns = _useState4[0],
+    setSortedColumns = _useState4[1];
+  var _useState5 = React.useState(customSelectedKeys),
+    selectedKeys = _useState5[0],
+    setSelectedKeys = _useState5[1];
+  var _useState6 = React.useState(toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$sear = toolbarSettings.search) === null || _toolbarSettings$sear === void 0 ? void 0 : _toolbarSettings$sear.searchValue),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1];
+  var originalSortingMode = sorting.mode === undefined || sorting.mode === "" ? "none" : sorting.mode;
+  var sortingMode = sortingProcess == "ServerSideSorting" ? "none" : originalSortingMode;
+  var showSortIndexes = sortingProcess == "ServerSideSorting" ? false : sorting.showSortIndexes;
+  var sortingActive = sortingProcess == "ServerSideSorting" && originalSortingMode != "none";
   React.useEffect(function () {
-    setTimelineTasks(multiSelectionEnabled ? setSelectedKeys(customTasks.map(mapCustomTask), customTaskKey, customSelectedKeys) : customTasks);
-  }, [customTasks]);
+    prepareTimelineTasks(customTasks, customSelectedKeys);
+  }, [customTasks, customSelectedKeys]);
+  var prepareTimelineTasks = function prepareTimelineTasks(tasks, selectedKeys) {
+    setTimelineTasks(mapSelectedKeys(tasks.map(mapCustomTask), customTaskKey, multiSelectionEnabled ? selectedKeys : selectedKeys.length > 0 ? selectedKeys[0] : []));
+  };
   var getSelectedRowsData = function getSelectedRowsData() {
     return timelineTasks.filter(function (item) {
       return item.isSelected == true;
     });
   };
+  var customClearSorting = function customClearSorting() {
+    if (sortingProcess === "ServerSideSorting") {
+      setSortedColumns([]);
+    } else {
+      refGantt.current.instance.clearSorting();
+    }
+    onSortingChanged && onSortingChanged([], undefined);
+  };
+  var getSortedColumns = function getSortedColumns() {
+    return sortedColumns;
+  };
   var updateSelectionData = function updateSelectionData(keyValue, isSelected) {
-    setTimelineTasks(function (prev) {
-      return prev.map(function (item) {
-        if (item[props.customTaskKey] == keyValue) {
-          item.isSelected = isSelected;
+    var newSelectedKeys = [];
+    if (multiSelectionEnabled) {
+      newSelectedKeys = selectedKeys.filter(function (item) {
+        return item != keyValue;
+      });
+      if (isSelected) {
+        newSelectedKeys = [].concat(newSelectedKeys, [keyValue]);
+      }
+    } else if (isSelected) {
+      newSelectedKeys = [keyValue];
+    }
+    setSelectedKeys(newSelectedKeys);
+    prepareTimelineTasks(timelineTasks, newSelectedKeys);
+  };
+  var minimalHeaderCellComponent = function minimalHeaderCellComponent(data) {
+    return customHeaderCellComponent(data, true);
+  };
+  var customHeaderCellComponent = function customHeaderCellComponent(props, isMinimized) {
+    var _ref;
+    var _isMinimized = (_ref = isMinimized != null ? isMinimized : props.data.column.isMinimized) != null ? _ref : false;
+    if (sortingActive && props.data.column.allowSorting) {
+      return React__default.createElement("div", {
+        className: "sortingHeaderCell",
+        onClick: function onClick(e) {
+          if (Boolean(props.data.column.allowSorting)) {
+            if (e.shiftKey === true && e.ctrlKey === false) {
+              onSorting(props.data, 2);
+            } else if (e.shiftKey === false && e.ctrlKey === false) {
+              onSorting(props.data, 1);
+            } else if (e.shiftKey === false && e.ctrlKey === true) {
+              onRemoveSorting(props.data);
+            }
+          }
+        }
+      }, React__default.createElement("span", {
+        className: _isMinimized ? "headerCaption minimalHeaderCell" : "headerCaption"
+      }, props.data.column.caption), getSortIcon(props.data.column));
+    }
+    return React__default.createElement("div", {
+      className: _isMinimized ? "minimalHeaderCell" : ""
+    }, props.data.column.caption);
+  };
+  var getSortIcon = function getSortIcon(column) {
+    var sortingFieldName = getSortingFieldName(column);
+    var sortedColumn = sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn) {
+      return sortedColumn.sortType === "ASC" ? React__default.createElement(outline.UpArrow2Icon, null) : React__default.createElement(outline.DownArrow2Icon, null);
+    }
+    return undefined;
+  };
+  var getSortingFieldName = function getSortingFieldName(column) {
+    var _column$sortingFieldN;
+    return (_column$sortingFieldN = column.sortingFieldName) != null ? _column$sortingFieldN : column.dataField;
+  };
+  var onSorting = function onSorting(headerCellProps, sortingMode) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    var prevSortIndex = sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sortIndex;
+    var newSortedColumn = {
+      sortingFieldName: sortingFieldName,
+      sortType: "ASC",
+      sortIndex: sortingMode == 2 ? sortedColumn === undefined ? sortedColumns.length : sortedColumns.length - 1 : 0,
+      sortingText: sortingFieldName + " ASC"
+    };
+    if (sortedColumn) {
+      newSortedColumn.sortType = sortedColumn.sortType == "ASC" ? "DESC" : "ASC";
+      newSortedColumn.sortingText = sortingFieldName + " " + newSortedColumn.sortType;
+    }
+    var newSortedColumns = sortingMode == 2 ? [].concat(sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }), [newSortedColumn]) : [newSortedColumn];
+    if (sortingMode == 2 && sortedColumn !== undefined) {
+      newSortedColumns = newSortedColumns.map(function (item) {
+        if (item.sortingFieldName != sortingFieldName && item.sortIndex > prevSortIndex) {
+          item.sortIndex = item.sortIndex - 1;
         }
         return item;
       });
+    }
+    setSortedColumns(newSortedColumns);
+    onSortingChanged && onSortingChanged(newSortedColumns, headerCellProps);
+  };
+  var onRemoveSorting = function onRemoveSorting(headerCellProps) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn === undefined) {
+      return;
+    }
+    var prevSortIndex = sortedColumn.sortIndex;
+    var newSortedColumns = sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }).map(function (item) {
+      if (item.sortIndex > prevSortIndex) {
+        item.sortIndex = item.sortIndex - 1;
+      }
+      return item;
     });
+    setSortedColumns(newSortedColumns);
+    onSortingChanged && onSortingChanged(newSortedColumns, headerCellProps);
   };
   var onTimelineDateRangeChange = function onTimelineDateRangeChange(e) {
     setStartDate(e.startDate);
@@ -38761,13 +38929,72 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     });
   };
   var onTimelineCheckboxSelectionChange = function onTimelineCheckboxSelectionChange(e) {
-    updateSelectionData(e.data[props.customTaskKey], e.isSelected);
+    updateSelectionData(e.data[props.customTaskKey].toString(), e.isSelected);
     onCustomSelectionChanged && onCustomSelectionChanged(e);
   };
+  var searchBoxComponent = function searchBoxComponent(props) {
+    var _toolbarSettings$sear4;
+    var filterInAllFields = function filterInAllFields(item, searchValue) {
+      var fields = Object.keys(item);
+      for (var index = 0; index < fields.length; index++) {
+        if (String(item[fields[index]]).toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())) {
+          return true;
+        }
+      }
+      return false;
+    };
+    var searchTask = function searchTask(searchValue) {
+      if (searchValue === undefined || searchValue === "") {
+        prepareTimelineTasks(customTasks, selectedKeys);
+        return;
+      }
+      var filteredTasks = customTasks.filter(function (item) {
+        return filterInAllFields(item, searchValue);
+      });
+      prepareTimelineTasks(filteredTasks, selectedKeys);
+    };
+    var onSearchBoxSearch = function onSearchBoxSearch(searchValue) {
+      var _toolbarSettings$sear2, _toolbarSettings$sear3;
+      setSearchValue(searchValue);
+      searchTask(searchValue);
+      (toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$sear2 = toolbarSettings.search) === null || _toolbarSettings$sear2 === void 0 ? void 0 : _toolbarSettings$sear2.onSearch) && (toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$sear3 = toolbarSettings.search) === null || _toolbarSettings$sear3 === void 0 ? void 0 : _toolbarSettings$sear3.onSearch(searchValue));
+    };
+    return OdsTimelineTableSearchBox(_extends({}, props, {
+      value: searchValue,
+      placeholder: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$sear4 = toolbarSettings.search) === null || _toolbarSettings$sear4 === void 0 ? void 0 : _toolbarSettings$sear4.placeholder,
+      onSearch: onSearchBoxSearch
+    }));
+  };
+  var exportToPdf = function exportToPdf() {
+    var _odsTimelineTable$_tr, _toolbarSettings$expo, _toolbarSettings$expo2, _toolbarSettings$expo3;
+    var _odsTimelineTable = refGantt.current.instance;
+    console.log("exportToPdf", _odsTimelineTable, _odsTimelineTable._treeList, (_odsTimelineTable$_tr = _odsTimelineTable._treeList) === null || _odsTimelineTable$_tr === void 0 ? void 0 : _odsTimelineTable$_tr.getVisibleColumns());
+    pdf_exporter.exportGantt({
+      component: _odsTimelineTable,
+      createDocumentMethod: function createDocumentMethod(args) {
+        return new jsPDF.jsPDF(args);
+      },
+      format: (_toolbarSettings$expo = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo2 = toolbarSettings["export"]) === null || _toolbarSettings$expo2 === void 0 ? void 0 : (_toolbarSettings$expo3 = _toolbarSettings$expo2.documentFormat) === null || _toolbarSettings$expo3 === void 0 ? void 0 : _toolbarSettings$expo3.toLowerCase()) != null ? _toolbarSettings$expo : "auto",
+      landscape: true,
+      exportMode: "all",
+      dateRange: "all"
+    }).then(function (doc) {
+      return doc.save(getExportFileName());
+    });
+  };
+  var getExportFileName = function getExportFileName() {
+    var _toolbarSettings$expo4, _toolbarSettings$expo5;
+    var now = new Date();
+    var datePart = ('0' + now.getDate()).slice(-2) + "-" + ('0' + (now.getMonth() + 1)).slice(-2) + "-" + now.getFullYear();
+    var timePart = ('0' + now.getHours()).slice(-2) + ":" + ('0' + now.getMinutes()).slice(-2);
+    return ((_toolbarSettings$expo4 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo5 = toolbarSettings["export"]) === null || _toolbarSettings$expo5 === void 0 ? void 0 : _toolbarSettings$expo5.fileName) != null ? _toolbarSettings$expo4 : "Timeline") + "-" + datePart + "-" + timePart + ".pdf";
+  };
   var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
   React.useImperativeHandle(ref, function () {
     return {
-      getSelectedRowsData: getSelectedRowsData
+      getSelectedRowsData: getSelectedRowsData,
+      getSortedColumns: getSortedColumns,
+      customClearSorting: customClearSorting
     };
   });
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(gantt.Gantt, Object.assign({
@@ -38778,21 +39005,49 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     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, {
+  }, props, {
+    ref: refGantt,
+    sorting: {
+      mode: sortingMode,
+      showSortIndexes: false
+    }
+  }), toolbarSettings !== null && toolbarSettings !== void 0 && toolbarSettings.visible ? React__default.createElement(gantt.Toolbar, null, React__default.createElement(gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_DateFilter",
+    visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.dateFilterVisible,
+    location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
     component: function component(props) {
-      return OdsTimelineDateFilter(_extends({}, props, {
+      return OdsTimelineTableDateFilter(_extends({}, props, {
         defaultStartDate: startDate,
         defaultEndDate: endDate,
         onFilterRangeChange: onTimelineDateRangeChange
       }));
     }
-  }) : "", React__default.createElement(gantt.Item, {
+  }), React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_Search",
+    visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$sear5 = toolbarSettings.search) === null || _toolbarSettings$sear5 === void 0 ? void 0 : _toolbarSettings$sear5.visible,
+    location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
+    component: searchBoxComponent
+  }), React__default.createElement(gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_ZoomIn",
-    name: "zoomIn"
+    visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible,
+    name: "zoomIn",
+    location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location
   }), React__default.createElement(gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_ZoomOut",
-    name: "zoomOut"
+    visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible,
+    name: "zoomOut",
+    location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location
+  }), React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_Export",
+    visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo6 = toolbarSettings["export"]) === null || _toolbarSettings$expo6 === void 0 ? void 0 : _toolbarSettings$expo6.visible,
+    location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
+    widget: "dxButton",
+    options: {
+      icon: "export",
+      hint: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo7 = toolbarSettings["export"]) === null || _toolbarSettings$expo7 === void 0 ? void 0 : _toolbarSettings$expo7.title,
+      stylingMode: "text",
+      onClick: exportToPdf
+    }
   })) : "", React__default.createElement(gantt.ContextMenu, {
     enabled: false
   }), timelineColumns === null || timelineColumns === void 0 ? void 0 : timelineColumns.map(function (columnProps) {
@@ -38810,16 +39065,22 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         minWidth: 50,
         cssClass: "cellCenteredVertically",
         cellComponent: checkboxCellComponent,
-        headerCellComponent: minimalHeaderCellComponent
+        headerCellComponent: minimalHeaderCellComponent,
+        allowSorting: false
       }, columnProps));
     } else {
       return React__default.createElement(gantt.Column, Object.assign({
-        headerCellComponent: columnProps.isMinimized && minimalHeaderCellComponent
+        headerCellComponent: function headerCellComponent(props) {
+          return customHeaderCellComponent(props);
+        }
       }, columnProps));
     }
   }), React__default.createElement(gantt.Tasks, {
     dataSource: timelineTasks
-  }), children));
+  }), children, React__default.createElement(gantt.Sorting, {
+    mode: sortingMode,
+    showSortIndexes: showSortIndexes
+  })));
 });
 
 /**
@@ -39889,7 +40150,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
         });
       });
     } else {
-      var doc = new jsPDF();
+      var doc = new jsPDF__default();
       pdf_exporter.exportDataGrid({
         jsPDFDocument: doc,
         component: e.component,