ods-component-lib 1.18.235 → 1.18.237

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

@@ -1,5 +1,7 @@
 import React from "react";
+import { IOdsTimelineTableProps } from "./OdsTimelineTable.Types";
 export declare const checkboxCellComponent: (props: any) => React.JSX.Element;
 export declare const statusCellComponent: (props: 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?: string[]) => any[];
+export declare const getExportableTimelineTable: (props: IOdsTimelineTableProps, ref: any) => React.JSX.Element;

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,6 +1,6 @@
 /// <reference types="react" />
 import { IColumnProps, IGanttOptions, IItemProps } from "devextreme-react/gantt";
-import { SortingProcessType, SortingType } from "../../../utils/customTypes";
+import { ExportDocumentType, SortingProcessType, SortingType } from "../../../utils/customTypes";
 export declare type SortingMode = "single" | "multiple" | "none";
 export declare const enum EnumDateDirection {
     prevMonth = "previousMonth",
@@ -36,7 +36,7 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
     /**
      * Set columns for listview.
      */
-    customColumns?: IOdsTimelineColumnProps[];
+    customColumns?: IOdsTimelineTableColumnProps[];
     /**
      * Set task list. It is used for list view and timeline view.
      */
@@ -48,23 +48,23 @@ 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;
-    /**
-     * Set true if it' s visible.
-     */
-    showDateFilter?: boolean;
+    toolbarSettings?: IOdsTimelineTableToolbarSettings;
     /**
      * ClientSideSorting means Gantt's default sorting, but sorting have to be managed programmacitally if ServerSideSorting is chosen
      */
     sortingProcess?: SortingProcessType;
+    /**
+     * Set translations for showing in cells
+     */
+    dataTranslations?: ITranslationValue[];
     /**
      * This is a selection event that fired when selection is changed.
      */
@@ -78,28 +78,57 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
      */
     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 interface ISortedColumn {
-    sortingFieldName: string;
-    sortType: SortingType;
-    sortIndex: number;
-    sortingText: string;
+export interface IOdsTimelineTableSearchBox extends IItemProps {
+    value?: string;
+    timeoutDuration?: number;
+    placeholder?: string;
+    onSearch?(searchValue?: string): void;
+}
+export interface ITranslationValue {
+    originalValue: any;
+    translatedValue: string;
 }

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.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'));
@@ -45,7 +46,9 @@ 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');
+var Gantt = require('devextreme-react/gantt');
+var Gantt__default = _interopDefault(Gantt);
+require('jspdf-autotable');
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -1284,7 +1287,7 @@ function OdsDataGrid(props) {
         });
       });
     } else {
-      var doc = new jsPDF();
+      var doc = new jsPDF__default();
       pdf_exporter.exportDataGrid({
         jsPDFDocument: doc,
         component: e.component,
@@ -1556,7 +1559,7 @@ function grid(props) {
         });
       });
     } else {
-      var doc = new jsPDF();
+      var doc = new jsPDF__default();
       pdf_exporter.exportDataGrid({
         jsPDFDocument: doc,
         component: e.component,
@@ -38518,6 +38521,40 @@ var Constants = {
   timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
 };
 
+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      "])), _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      "])))
+  };
+});
+
+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 checkboxCellComponent = function checkboxCellComponent(props) {
   var isChecked = props.data.value;
   var onChange = function onChange(e) {
@@ -38568,22 +38605,70 @@ var mapCustomTask = function mapCustomTask(item) {
     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) {
+      x.isSelected = selectedKeys.some(function (y) {
         return y == x[key];
-      })) {
-        x.isSelected = true;
-      }
+      });
       return x;
     });
   } else {
     return datasource;
   }
 };
+var getTranslatedValue = function getTranslatedValue(value, translations) {
+  var _translations$find$tr, _translations$find;
+  return (_translations$find$tr = (_translations$find = translations.find(function (item) {
+    return item.originalValue == value;
+  })) === null || _translations$find === void 0 ? void 0 : _translations$find.translatedValue) != null ? _translations$find$tr : value;
+};
+var getExportableTimelineTable = function getExportableTimelineTable(props, ref) {
+  var _props$customColumns;
+  return React__default.createElement(Gantt__default, Object.assign({
+    width: 0,
+    height: 0,
+    startDateRange: props.startDateRange,
+    endDateRange: props.endDateRange,
+    ref: ref,
+    taskContentRender: function taskContentRender(params) {
+      return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
+    }
+  }, props), (_props$customColumns = props.customColumns) === null || _props$customColumns === void 0 ? void 0 : _props$customColumns.filter(function (col) {
+    return col.allowExporting != false;
+  }).map(function (columnProps) {
+    if (columnProps.isStatusColumn) {
+      return React__default.createElement(Gantt.Column, Object.assign({
+        cssClass: "cellCenteredVertically"
+      }, columnProps, {
+        cellRender: function cellRender(_ref) {
+          var value = _ref.value;
+          return getTranslatedValue(value, props.dataTranslations);
+        }
+      }));
+    } else if (columnProps.isCheckboxColumn) {
+      return React__default.createElement(Gantt.Column, Object.assign({
+        cssClass: "cellCenteredVertically"
+      }, columnProps, {
+        cellRender: function cellRender(_ref2) {
+          var value = _ref2.value;
+          return getTranslatedValue(value, props.dataTranslations);
+        }
+      }));
+    } else {
+      return React__default.createElement(Gantt.Column, Object.assign({}, columnProps, {
+        cellRender: function cellRender(_ref3) {
+          var value = _ref3.value;
+          return getTranslatedValue(value, props.dataTranslations);
+        }
+      }));
+    }
+  }), React__default.createElement(Gantt.Tasks, {
+    dataSource: props.customTasks
+  }), props.children);
+};
 
-var OdsTimelineDateFilter = function OdsTimelineDateFilter(props) {
+var OdsTimelineTableDateFilter = function OdsTimelineTableDateFilter(props) {
   var defaultStartDate = props.defaultStartDate,
     defaultEndDate = props.defaultEndDate,
     backText = props.backText,
@@ -38659,6 +38744,7 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
     minWidth: 50,
     width: 50,
     dataField: "isSelected",
+    allowExporting: false,
     cellComponent: function cellComponent(props) {
       var onChange = function onChange(e) {
         selectionEvent && selectionEvent({
@@ -38679,35 +38765,45 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
   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
-    }),
+var OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
+  var _props$value;
+  var _useStyles = useStyles$b(),
     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 _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,
@@ -38716,14 +38812,14 @@ 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,
     onSortingChanged = props.onSortingChanged;
   var refGantt = React.useRef(null);
+  var refGanttExportable = React.useRef(null);
   var _useState = React.useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
     startDate = _useState[0],
     setStartDate = _useState[1];
@@ -38736,13 +38832,22 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   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;
@@ -38760,14 +38865,19 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     return sortedColumns;
   };
   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 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);
@@ -38870,9 +38980,65 @@ 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 _toolbarSettings$expo, _toolbarSettings$expo2, _toolbarSettings$expo3;
+    var exportableTimelineTable = refGanttExportable.current.instance;
+    pdf_exporter.exportGantt({
+      component: exportableTimelineTable,
+      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 {
@@ -38881,7 +39047,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       customClearSorting: customClearSorting
     };
   });
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(gantt.Gantt, Object.assign({
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Gantt.Gantt, Object.assign({
     width: "100%",
     height: 500,
     startDateRange: startDate,
@@ -38895,26 +39061,48 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       mode: sortingMode,
       showSortIndexes: false
     }
-  }), toolbarVisible ? React__default.createElement(gantt.Toolbar, null, showDateFilter ? React__default.createElement(gantt.Item, {
+  }), 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
+  }), (toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible) && React__default.createElement(Gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_ZoomIn",
-    name: "zoomIn"
-  }), React__default.createElement(gantt.Item, {
+    visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible,
+    name: "zoomIn",
+    location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location
+  }), (toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.zoomVisible) && React__default.createElement(Gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_ZoomOut",
-    name: "zoomOut"
-  })) : "", React__default.createElement(gantt.ContextMenu, {
+    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) {
     if (columnProps.isStatusColumn) {
-      return React__default.createElement(gantt.Column, Object.assign({
+      return React__default.createElement(Gantt.Column, Object.assign({
         width: 50,
         minWidth: 50,
         cssClass: "cellCenteredVertically",
@@ -38922,7 +39110,7 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         headerCellComponent: minimalHeaderCellComponent
       }, columnProps));
     } else if (columnProps.isCheckboxColumn) {
-      return React__default.createElement(gantt.Column, Object.assign({
+      return React__default.createElement(Gantt.Column, Object.assign({
         width: 50,
         minWidth: 50,
         cssClass: "cellCenteredVertically",
@@ -38931,18 +39119,23 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         allowSorting: false
       }, columnProps));
     } else {
-      return React__default.createElement(gantt.Column, Object.assign({
+      return React__default.createElement(Gantt.Column, Object.assign({
         headerCellComponent: function headerCellComponent(props) {
           return customHeaderCellComponent(props);
         }
       }, columnProps));
     }
-  }), React__default.createElement(gantt.Tasks, {
+  }), React__default.createElement(Gantt.Tasks, {
     dataSource: timelineTasks
-  }), children, React__default.createElement(gantt.Sorting, {
+  }), children, React__default.createElement(Gantt.Sorting, {
     mode: sortingMode,
     showSortIndexes: showSortIndexes
-  })));
+  })), getExportableTimelineTable(_extends({}, props, {
+    startDateRange: startDate,
+    endDateRange: endDate,
+    customColumns: timelineColumns,
+    customTasks: timelineTasks
+  }), refGanttExportable));
 });
 
 /**
@@ -40012,7 +40205,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
         });
       });
     } else {
-      var doc = new jsPDF();
+      var doc = new jsPDF__default();
       pdf_exporter.exportDataGrid({
         jsPDFDocument: doc,
         component: e.component,