qbs-react-grid 1.1.37 → 1.1.39

package/es/qbsTable/QbsTable.js

@@ -80,7 +80,8 @@ var QbsTable = function QbsTable(_ref) {
     _ref$headerHeight = _ref.headerHeight,
     headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
     tableBodyHeight = _ref.tableBodyHeight,
-    customRowStatus = _ref.customRowStatus;
+    customRowStatus = _ref.customRowStatus,
+    searchPlaceholder = _ref.searchPlaceholder;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -215,7 +216,8 @@ var QbsTable = function QbsTable(_ref) {
     selectedRowActions: selectedRowActions,
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
-    dataLength: data === null || data === void 0 ? void 0 : data.length
+    dataLength: data === null || data === void 0 ? void 0 : data.length,
+    searchPlaceholder: searchPlaceholder
   };
   var themeToggle = useMemo(function () {
     return document.getElementById('themeToggle');

package/es/qbsTable/Toolbar.js

@@ -19,7 +19,8 @@ var ToolBar = function ToolBar(_ref) {
     selectedRowActions = _ref.selectedRowActions,
     checkedKeys = _ref.checkedKeys,
     onSelect = _ref.onSelect,
-    dataLength = _ref.dataLength;
+    dataLength = _ref.dataLength,
+    searchPlaceholder = _ref.searchPlaceholder;
   var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = useState(searchValue),
     searchParam = _useState[0],
@@ -59,7 +60,7 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-primary-filter"
   }, search && /*#__PURE__*/React.createElement(SearchInput, {
-    placeholder: "Search",
+    placeholder: searchPlaceholder != null ? searchPlaceholder : 'Search',
     handleChange: handleChange,
     handleSearch: handleSearch,
     searchValue: searchParam

package/es/qbsTable/commontypes.d.ts

@@ -82,6 +82,7 @@ export interface QbsTableProps {
     primaryFilter?: ReactElement | ReactNode;
     advancefilter?: ReactElement | ReactNode;
     tableHeaderActions?: ReactElement | ReactNode;
+    searchPlaceholder?: string;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;
@@ -131,6 +132,7 @@ export interface QbsTableToolbarProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     dataLength: number;
     headerHeight?: number;
+    searchPlaceholder?: string;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;

package/es/qbsTable/utilities/menuDropDown.js

@@ -32,18 +32,26 @@ var MenuDropDown = function MenuDropDown(_ref) {
     (_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
     setOpenMenu(false);
   };
+  var handleShowHideMenu = function handleShowHideMenu() {
+    var _result$length;
+    var result = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
+      var _item$hide;
+      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData));
+    });
+    return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-menu-dropdown",
     ref: menuRef
-  }, /*#__PURE__*/React.createElement("button", {
+  }, handleShowHideMenu() > 0 && /*#__PURE__*/React.createElement("button", {
     className: "qbs-table-dropbtn",
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__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) {
-    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", {
+    var _item$hide2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.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/QbsTable.js

@@ -86,7 +86,8 @@ var QbsTable = function QbsTable(_ref) {
     _ref$headerHeight = _ref.headerHeight,
     headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
     tableBodyHeight = _ref.tableBodyHeight,
-    customRowStatus = _ref.customRowStatus;
+    customRowStatus = _ref.customRowStatus,
+    searchPlaceholder = _ref.searchPlaceholder;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -221,7 +222,8 @@ var QbsTable = function QbsTable(_ref) {
     selectedRowActions: selectedRowActions,
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
-    dataLength: data === null || data === void 0 ? void 0 : data.length
+    dataLength: data === null || data === void 0 ? void 0 : data.length,
+    searchPlaceholder: searchPlaceholder
   };
   var themeToggle = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');

package/lib/qbsTable/Toolbar.js

@@ -26,7 +26,8 @@ var ToolBar = function ToolBar(_ref) {
     selectedRowActions = _ref.selectedRowActions,
     checkedKeys = _ref.checkedKeys,
     onSelect = _ref.onSelect,
-    dataLength = _ref.dataLength;
+    dataLength = _ref.dataLength,
+    searchPlaceholder = _ref.searchPlaceholder;
   var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
   var _useState = (0, _react.useState)(searchValue),
     searchParam = _useState[0],
@@ -66,7 +67,7 @@ var ToolBar = function ToolBar(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-primary-filter"
   }, search && /*#__PURE__*/_react["default"].createElement(_SearchInput["default"], {
-    placeholder: "Search",
+    placeholder: searchPlaceholder != null ? searchPlaceholder : 'Search',
     handleChange: handleChange,
     handleSearch: handleSearch,
     searchValue: searchParam

package/lib/qbsTable/commontypes.d.ts

@@ -82,6 +82,7 @@ export interface QbsTableProps {
     primaryFilter?: ReactElement | ReactNode;
     advancefilter?: ReactElement | ReactNode;
     tableHeaderActions?: ReactElement | ReactNode;
+    searchPlaceholder?: string;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;
@@ -131,6 +132,7 @@ export interface QbsTableToolbarProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     dataLength: number;
     headerHeight?: number;
+    searchPlaceholder?: string;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;

package/lib/qbsTable/utilities/menuDropDown.js

@@ -38,18 +38,26 @@ var MenuDropDown = function MenuDropDown(_ref) {
     (_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
     setOpenMenu(false);
   };
+  var handleShowHideMenu = function handleShowHideMenu() {
+    var _result$length;
+    var result = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
+      var _item$hide;
+      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData));
+    });
+    return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-menu-dropdown",
     ref: menuRef
-  }, /*#__PURE__*/_react["default"].createElement("button", {
+  }, handleShowHideMenu() > 0 && /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-dropbtn",
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__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) {
-    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", {
+    var _item$hide2;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.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.1.37",
+  "version": "1.1.39",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/qbsTable/QbsTable.tsx

@@ -66,7 +66,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   selectedRows,
   headerHeight = 40,
   tableBodyHeight,
-  customRowStatus
+  customRowStatus,
+  searchPlaceholder
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -207,7 +208,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
     selectedRowActions: selectedRowActions,
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
-    dataLength: data?.length
+    dataLength: data?.length,
+    searchPlaceholder: searchPlaceholder
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 

package/src/qbsTable/Toolbar.tsx

@@ -20,7 +20,8 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
   selectedRowActions,
   checkedKeys,
   onSelect,
-  dataLength
+  dataLength,
+  searchPlaceholder
 }) => {
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
@@ -60,7 +61,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           <div className="qbs-table-primary-filter">
             {search && (
               <SearchInput
-                placeholder="Search"
+                placeholder={searchPlaceholder ?? 'Search'}
                 handleChange={handleChange}
                 handleSearch={handleSearch}
                 searchValue={searchParam}

package/src/qbsTable/commontypes.ts

@@ -20,7 +20,7 @@ export interface ColumnBase {
   sortKey?: string;
   type?: string;
   getPath?: (data: any) => string;
-  hideLink?:(data:any)=>boolean
+  hideLink?: (data: any) => boolean;
 }
 
 export interface QbsColumnProps extends ColumnBase {
@@ -87,6 +87,7 @@ export interface QbsTableProps {
   primaryFilter?: ReactElement | ReactNode;
   advancefilter?: ReactElement | ReactNode;
   tableHeaderActions?: ReactElement | ReactNode;
+  searchPlaceholder?:string
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;
@@ -135,6 +136,7 @@ export interface QbsTableToolbarProps {
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   dataLength: number;
   headerHeight?: number;
+  searchPlaceholder?: string;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;

package/src/qbsTable/utilities/menuDropDown.tsx

@@ -46,12 +46,17 @@ const MenuDropDown: React.FC<Props> = ({
     slug.action?.(rowData);
     setOpenMenu(false);
   };
-
+  const handleShowHideMenu = () => {
+    const result = actionDropDown?.filter((item: any) => !item.hidden && !item?.hide?.(rowData));
+    return result?.length ?? 0;
+  };
   return (
     <div className="qbs-table-menu-dropdown" ref={menuRef}>
-      <button className="qbs-table-dropbtn" onClick={toggleMenu} ref={menuButtonRef}>
-        <ThreeDotIcon />
-      </button>
+      {handleShowHideMenu() > 0 && (
+        <button className="qbs-table-dropbtn" onClick={toggleMenu} ref={menuButtonRef}>
+          <ThreeDotIcon />
+        </button>
+      )}
       {openMenu && (
         <div className={'qbs-table-qbs-table-menu-dropdown-content'}>
           {actionDropDown?.map(item => (