qbs-react-grid 1.0.50 → 1.1.0

package/es/qbsTable/CustomTableCell.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "link"];
+  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
 import React from 'react';
 import Cell from '../Cell';
 import MenuDropDown from './utilities/menuDropDown';
+import { handleCellFormat } from './utilities/handleFormatCell';
 var CHECKBOX_LINE_HEIGHT = '36px';
 export var CheckCell = /*#__PURE__*/React.memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -78,6 +79,7 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
     dataKey = _ref4.dataKey,
     onChange = _ref4.onChange,
     rowClick = _ref4.rowClick,
+    type = _ref4.type,
     link = _ref4.link,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
   return /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
@@ -87,5 +89,5 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
       return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
     },
     className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : rowData[dataKey]) : /*#__PURE__*/React.createElement(React.Fragment, null, (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell));
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type)));
 });

package/es/qbsTable/QbsTable.js

@@ -186,7 +186,8 @@ var QbsTable = function QbsTable(_ref) {
     tableHeaderActions: tableHeaderActions,
     selectedRowActions: selectedRowActions,
     onSelect: handleClear,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    dataLength: data === null || data === void 0 ? void 0 : data.length
   };
   var themeToggle = useMemo(function () {
     return document.getElementById('themeToggle');
@@ -284,7 +285,8 @@ var QbsTable = function QbsTable(_ref) {
         isVisible = _ref3.isVisible,
         link = _ref3.link,
         rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey;
+        sortKey = _ref3.sortKey,
+        type = _ref3.type;
       return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
         header: groupheader,
         fixed: fixed,
@@ -309,6 +311,7 @@ var QbsTable = function QbsTable(_ref) {
           renderCell: child.renderCell,
           dataKey: child.field,
           dataTheme: dataTheme,
+          type: child.type,
           link: child.link
         }) : /*#__PURE__*/React.createElement(Cell, {
           className: " " + classes.cellClass,
@@ -331,6 +334,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell: renderCell,
         dataKey: field,
         rowClick: rowClick,
+        type: type,
         dataTheme: dataTheme,
         link: link
       }) : /*#__PURE__*/React.createElement(Cell, {

package/es/qbsTable/Toolbar.js

@@ -18,7 +18,8 @@ var ToolBar = function ToolBar(_ref) {
     tableHeaderActions = _ref.tableHeaderActions,
     selectedRowActions = _ref.selectedRowActions,
     checkedKeys = _ref.checkedKeys,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    dataLength = _ref.dataLength;
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var handleSearch = useCallback(function (e) {
     if (debouncedOnSearch) {
@@ -84,7 +85,7 @@ var ToolBar = function ToolBar(_ref) {
         return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
       }
     }, actions.actionTitle));
-  }))) : /*#__PURE__*/React.createElement("div", null, pagination && paginationProps && /*#__PURE__*/React.createElement("div", {
+  }))) : /*#__PURE__*/React.createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/React.createElement("div", {
     className: "rows-count"
   }, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
 };

package/es/qbsTable/commontypes.d.ts

@@ -17,6 +17,7 @@ export interface ColumnBase {
     link?: boolean;
     rowClick?: (rowData: any) => void;
     sortKey?: string;
+    type?: string;
 }
 export interface QbsColumnProps extends ColumnBase {
     grouped?: boolean;
@@ -38,6 +39,7 @@ export interface ActionProps {
     icon: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
+    hide?: (data: any) => boolean;
 }
 export interface QbsTableProps {
     isLoading?: boolean;
@@ -114,6 +116,7 @@ export interface QbsTableToolbarProps {
     tableHeaderActions?: ReactElement | ReactNode;
     onSelect?: (keys: any[]) => void;
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
+    dataLength: number;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;

package/es/qbsTable/utilities/SearchInput.js

@@ -1,4 +1,4 @@
-import React, { useCallback, memo } from 'react';
+import React, { memo, useCallback } from 'react';
 var SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
     handleChange = _ref.handleChange,

package/es/qbsTable/utilities/handleFormatCell.d.ts

@@ -0,0 +1 @@
+export declare const handleCellFormat: (data: any, type: string) => any;

package/es/qbsTable/utilities/handleFormatCell.js

@@ -0,0 +1,46 @@
+var convertDateFormat = function convertDateFormat(input, type) {
+  // Splitting the string by space to separate date and time
+  if (input && input !== null) {
+    var parts = input.split(' ');
+    var datePart = parts[0];
+    var timePart = parts.length > 1 ? " " + parts[1] : '';
+
+    // Splitting the date into [month, day, year]
+    var separator = datePart.includes('-') ? '-' : '/';
+    var dateComponents = datePart.split(separator);
+    if (dateComponents.length !== 3) {
+      // Invalid date format
+      return input;
+    }
+    var day, month, year;
+    if (dateComponents.length === 3) {
+      if (dateComponents[0].length === 4) {
+        // Format: yyyy/mm/dd
+        year = dateComponents[0];
+        month = dateComponents[1];
+        day = dateComponents[2];
+      } else {
+        // Format: mm/dd/yyyy
+        month = dateComponents[0];
+        day = dateComponents[1];
+        year = dateComponents[2];
+      }
+    } else {
+      return input; // Invalid date format
+    }
+
+    // Rearranging to day/month/year format
+    return type === 'dateTime' ? day + "-" + month + "-" + year + " " + timePart : day + "-" + month + "-" + year;
+  } else {
+    return '';
+  }
+};
+export var handleCellFormat = function handleCellFormat(data, type) {
+  switch (type) {
+    case 'date':
+    case 'dateTime':
+      return convertDateFormat(data, type);
+    default:
+      return data;
+  }
+};

package/es/qbsTable/utilities/menuDropDown.js

@@ -41,7 +41,8 @@ var MenuDropDown = function MenuDropDown(_ref) {
   }, /*#__PURE__*/React.createElement(ThreeDotIcon, null)), openMenu && /*#__PURE__*/React.createElement("div", {
     className: 'qbs-table-qbs-table-menu-dropdown-content'
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !item.hidden && /*#__PURE__*/React.createElement("a", {
+    var _item$hide;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData)) && /*#__PURE__*/React.createElement("a", {
       key: item.title,
       className: "p-2 leading-7 hover:bg-background ",
       onClick: function onClick(e) {

package/lib/qbsTable/CustomTableCell.js

@@ -8,9 +8,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
+var _handleFormatCell = require("./utilities/handleFormatCell");
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "link"];
+  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
 var CHECKBOX_LINE_HEIGHT = '36px';
 var CheckCell = /*#__PURE__*/_react["default"].memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -86,6 +87,7 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     dataKey = _ref4.dataKey,
     onChange = _ref4.onChange,
     rowClick = _ref4.rowClick,
+    type = _ref4.type,
     link = _ref4.link,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded3);
   return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
@@ -95,6 +97,6 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
       return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
     },
     className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : rowData[dataKey]) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell));
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)));
 });
 exports.CustomTableCell = CustomTableCell;

package/lib/qbsTable/QbsTable.js

@@ -193,7 +193,8 @@ var QbsTable = function QbsTable(_ref) {
     tableHeaderActions: tableHeaderActions,
     selectedRowActions: selectedRowActions,
     onSelect: handleClear,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    dataLength: data === null || data === void 0 ? void 0 : data.length
   };
   var themeToggle = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');
@@ -291,7 +292,8 @@ var QbsTable = function QbsTable(_ref) {
         isVisible = _ref3.isVisible,
         link = _ref3.link,
         rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey;
+        sortKey = _ref3.sortKey,
+        type = _ref3.type;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isVisible && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
         header: groupheader,
         fixed: fixed,
@@ -316,6 +318,7 @@ var QbsTable = function QbsTable(_ref) {
           renderCell: child.renderCell,
           dataKey: child.field,
           dataTheme: dataTheme,
+          type: child.type,
           link: child.link
         }) : /*#__PURE__*/_react["default"].createElement(_Cell["default"], {
           className: " " + classes.cellClass,
@@ -338,6 +341,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell: renderCell,
         dataKey: field,
         rowClick: rowClick,
+        type: type,
         dataTheme: dataTheme,
         link: link
       }) : /*#__PURE__*/_react["default"].createElement(_Cell["default"], {

package/lib/qbsTable/Toolbar.js

@@ -25,7 +25,8 @@ var ToolBar = function ToolBar(_ref) {
     tableHeaderActions = _ref.tableHeaderActions,
     selectedRowActions = _ref.selectedRowActions,
     checkedKeys = _ref.checkedKeys,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    dataLength = _ref.dataLength;
   var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var handleSearch = (0, _react.useCallback)(function (e) {
     if (debouncedOnSearch) {
@@ -91,7 +92,7 @@ var ToolBar = function ToolBar(_ref) {
         return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
       }
     }, actions.actionTitle));
-  }))) : /*#__PURE__*/_react["default"].createElement("div", null, pagination && paginationProps && /*#__PURE__*/_react["default"].createElement("div", {
+  }))) : /*#__PURE__*/_react["default"].createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "rows-count"
   }, (0, _tablecalc.getRowDisplayRange)((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
 };

package/lib/qbsTable/commontypes.d.ts

@@ -17,6 +17,7 @@ export interface ColumnBase {
     link?: boolean;
     rowClick?: (rowData: any) => void;
     sortKey?: string;
+    type?: string;
 }
 export interface QbsColumnProps extends ColumnBase {
     grouped?: boolean;
@@ -38,6 +39,7 @@ export interface ActionProps {
     icon: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
+    hide?: (data: any) => boolean;
 }
 export interface QbsTableProps {
     isLoading?: boolean;
@@ -114,6 +116,7 @@ export interface QbsTableToolbarProps {
     tableHeaderActions?: ReactElement | ReactNode;
     onSelect?: (keys: any[]) => void;
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
+    dataLength: number;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;

package/lib/qbsTable/utilities/handleFormatCell.d.ts

@@ -0,0 +1 @@
+export declare const handleCellFormat: (data: any, type: string) => any;

package/lib/qbsTable/utilities/handleFormatCell.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.handleCellFormat = void 0;
+var convertDateFormat = function convertDateFormat(input, type) {
+  // Splitting the string by space to separate date and time
+  if (input && input !== null) {
+    var parts = input.split(' ');
+    var datePart = parts[0];
+    var timePart = parts.length > 1 ? " " + parts[1] : '';
+
+    // Splitting the date into [month, day, year]
+    var separator = datePart.includes('-') ? '-' : '/';
+    var dateComponents = datePart.split(separator);
+    if (dateComponents.length !== 3) {
+      // Invalid date format
+      return input;
+    }
+    var day, month, year;
+    if (dateComponents.length === 3) {
+      if (dateComponents[0].length === 4) {
+        // Format: yyyy/mm/dd
+        year = dateComponents[0];
+        month = dateComponents[1];
+        day = dateComponents[2];
+      } else {
+        // Format: mm/dd/yyyy
+        month = dateComponents[0];
+        day = dateComponents[1];
+        year = dateComponents[2];
+      }
+    } else {
+      return input; // Invalid date format
+    }
+
+    // Rearranging to day/month/year format
+    return type === 'dateTime' ? day + "-" + month + "-" + year + " " + timePart : day + "-" + month + "-" + year;
+  } else {
+    return '';
+  }
+};
+var handleCellFormat = function handleCellFormat(data, type) {
+  switch (type) {
+    case 'date':
+    case 'dateTime':
+      return convertDateFormat(data, type);
+    default:
+      return data;
+  }
+};
+exports.handleCellFormat = handleCellFormat;

package/lib/qbsTable/utilities/menuDropDown.js

@@ -47,7 +47,8 @@ var MenuDropDown = function MenuDropDown(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null)), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
     className: 'qbs-table-qbs-table-menu-dropdown-content'
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !item.hidden && /*#__PURE__*/_react["default"].createElement("a", {
+    var _item$hide;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData)) && /*#__PURE__*/_react["default"].createElement("a", {
       key: item.title,
       className: "p-2 leading-7 hover:bg-background ",
       onClick: function onClick(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.0.50",
+  "version": "1.1.0",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/qbsTable/CustomTableCell.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Cell from '../Cell';
 import MenuDropDown from './utilities/menuDropDown';
+import { handleCellFormat } from './utilities/handleFormatCell';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 
@@ -61,15 +62,15 @@ export const ExpandCell: React.FC<any> = React.memo(
   )
 );
 export const CustomTableCell: React.FC<any> = React.memo(
-  ({ rowData, renderCell, toolTip, dataKey, onChange, rowClick, link, ...props }) => {
+  ({ rowData, renderCell, toolTip, dataKey, onChange, rowClick, type, link, ...props }) => {
     return (
       <Cell {...props} dataKey={dataKey}>
         {link ? (
           <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
-            {renderCell ? renderCell(rowData)?.cell : rowData[dataKey]}
+            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
           </a>
         ) : (
-          <>{renderCell(rowData)?.cell}</>
+          <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
         )}
       </Cell>
     );

package/src/qbsTable/QbsTable.tsx

@@ -172,7 +172,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
     tableHeaderActions: tableHeaderActions,
     selectedRowActions: selectedRowActions,
     onSelect: handleClear,
-    handleColumnToggle: handleColumnToggle
+    handleColumnToggle: handleColumnToggle,
+    dataLength: data?.length
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
@@ -276,7 +277,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
           isVisible,
           link,
           rowClick,
-          sortKey
+          sortKey,
+          type
         }) => (
           <>
             {isVisible && (
@@ -312,6 +314,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                               renderCell={child.renderCell}
                               dataKey={child.field}
                               dataTheme={dataTheme}
+                              type={child.type}
                               link={child.link}
                             />
                           ) : (
@@ -347,6 +350,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                         renderCell={renderCell}
                         dataKey={field}
                         rowClick={rowClick}
+                        type={type}
                         dataTheme={dataTheme}
                         link={link}
                       />

package/src/qbsTable/Toolbar.tsx

@@ -19,7 +19,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   tableHeaderActions,
   selectedRowActions,
   checkedKeys,
-  onSelect
+  onSelect,
+  dataLength
 }) => {
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
 
@@ -99,7 +100,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           </div>
         ) : (
           <div>
-            {pagination && paginationProps && (
+            {pagination && paginationProps && dataLength > 0 && (
               <div className="rows-count">
                 {getRowDisplayRange(
                   paginationProps.total ?? 0,

package/src/qbsTable/commontypes.ts

@@ -18,6 +18,7 @@ export interface ColumnBase {
   link?: boolean;
   rowClick?: (rowData: any) => void;
   sortKey?: string;
+  type?: string;
 }
 
 export interface QbsColumnProps extends ColumnBase {
@@ -42,6 +43,7 @@ export interface ActionProps {
   icon: React.ReactNode;
   toolTip?: string;
   hidden?: boolean;
+  hide?: (data: any) => boolean;
 }
 
 export interface QbsTableProps {
@@ -118,6 +120,7 @@ export interface QbsTableToolbarProps {
   tableHeaderActions?: ReactElement | ReactNode;
   onSelect?: (keys: any[]) => void;
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
+  dataLength: number;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;

package/src/qbsTable/utilities/SearchInput.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, memo } from 'react';
+import React, { memo, useCallback } from 'react';
+
 export interface SearchProps {
   placeholder: string;
   handleChange: (value: string) => void;

package/src/qbsTable/utilities/handleFormatCell.ts

@@ -0,0 +1,45 @@
+const convertDateFormat = (input: string, type?: string): string => {
+  // Splitting the string by space to separate date and time
+  if (input && input !== null) {
+    const parts = input.split(' ');
+    const datePart = parts[0];
+    const timePart = parts.length > 1 ? ` ${parts[1]}` : '';
+
+    // Splitting the date into [month, day, year]
+    const separator = datePart.includes('-') ? '-' : '/';
+
+    const dateComponents = datePart.split(separator);
+
+    if (dateComponents.length !== 3) {
+      // Invalid date format
+      return input;
+    }
+    let day, month, year;
+    if (dateComponents.length === 3) {
+      if (dateComponents[0].length === 4) {
+        // Format: yyyy/mm/dd
+        [year, month, day] = dateComponents;
+      } else {
+        // Format: mm/dd/yyyy
+        [month, day, year] = dateComponents;
+      }
+    } else {
+      return input; // Invalid date format
+    }
+
+    // Rearranging to day/month/year format
+    return type === 'dateTime' ? `${day}-${month}-${year} ${timePart}` : `${day}-${month}-${year}`;
+  } else {
+    return '';
+  }
+};
+
+export const handleCellFormat = (data: any, type: string) => {
+  switch (type) {
+    case 'date':
+    case 'dateTime':
+      return convertDateFormat(data, type);
+    default:
+      return data;
+  }
+};

package/src/qbsTable/utilities/menuDropDown.tsx

@@ -50,7 +50,7 @@ const MenuDropDown: React.FC<Props> = ({ actionDropDown, handleMenuActions, rowD
         <div className={'qbs-table-qbs-table-menu-dropdown-content'}>
           {actionDropDown?.map(item => (
             <>
-              {!item.hidden && (
+              {!item?.hidden && !item?.hide?.(rowData) && (
                 <a
                   key={item.title}
                   className={`p-2 leading-7 hover:bg-background `}