qbs-react-grid 1.0.49 → 1.0.51

package/es/qbsTable/QbsTable.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Cell from '../Cell';
 import Column from '../Column';
 import ColumnGroup from '../ColumnGroup';
@@ -10,9 +10,9 @@ import { ActionCell, CheckCell, CustomTableCell, ExpandCell } from './CustomTabl
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
 import debounce from './utilities/debounce';
+import { deepEqual } from './utilities/deepEqual';
 import { SettingsIcon } from './utilities/icons';
 import '../../dist/css/qbs-react-grid.css';
-import { deepEqual } from './utilities/deepEqual';
 var CHECKBOX_LINE_HEIGHT = '36px';
 var COLUMN_WIDTH = 250;
 var QbsTable = function QbsTable(_ref) {
@@ -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');
@@ -258,6 +259,9 @@ var QbsTable = function QbsTable(_ref) {
     });
     setColumns(reColumns);
   }, [columns]);
+  useEffect(function () {
+    setColumns(propColumn);
+  }, [propColumn]);
   useEffect(function () {
     if (!deepEqual(columns, prevColumns.current)) {
       handleColumnsResizable();

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

@@ -114,6 +114,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/QbsTable.js

@@ -15,9 +15,9 @@ var _CustomTableCell = require("./CustomTableCell");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide"));
 var _debounce = _interopRequireDefault(require("./utilities/debounce"));
+var _deepEqual = require("./utilities/deepEqual");
 var _icons = require("./utilities/icons");
 require("../../dist/css/qbs-react-grid.css");
-var _deepEqual = require("./utilities/deepEqual");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CHECKBOX_LINE_HEIGHT = '36px';
@@ -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');
@@ -265,6 +266,9 @@ var QbsTable = function QbsTable(_ref) {
     });
     setColumns(reColumns);
   }, [columns]);
+  (0, _react.useEffect)(function () {
+    setColumns(propColumn);
+  }, [propColumn]);
   (0, _react.useEffect)(function () {
     if (!(0, _deepEqual.deepEqual)(columns, prevColumns.current)) {
       handleColumnsResizable();

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

@@ -114,6 +114,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/package.json

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

package/src/qbsTable/QbsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import Cell from '../Cell';
 import Column from '../Column';
@@ -11,10 +11,10 @@ import { ActionCell, CheckCell, CustomTableCell, ExpandCell } from './CustomTabl
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
 import debounce from './utilities/debounce';
+import { deepEqual } from './utilities/deepEqual';
 import { SettingsIcon } from './utilities/icons';
 
 import '../../dist/css/qbs-react-grid.css';
-import { deepEqual } from './utilities/deepEqual';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
@@ -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, []);
 
@@ -246,6 +247,10 @@ const QbsTable: React.FC<QbsTableProps> = ({
     setColumns(reColumns);
   }, [columns]);
 
+  useEffect(() => {
+    setColumns(propColumn);
+  }, [propColumn]);
+
   useEffect(() => {
     if (!deepEqual(columns, prevColumns.current)) {
       handleColumnsResizable();

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

@@ -118,6 +118,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;