qbs-react-grid 1.1.14 → 1.1.16

package/es/Table.d.ts

@@ -36,6 +36,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     height?: number;
     /** The minimum height of the table. The height is maintained even when the content is not stretched. */
     minHeight?: number;
+    columns?: any;
     /** The row of the table has a mouseover effect */
     hover?: boolean;
     /** The height of the table header */

package/es/Table.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight"],
+var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns"],
   _excluded2 = ["depth", "rowIndex"],
   _excluded3 = ["cellHeight"];
 import { getTranslateDOMPositionXY } from 'dom-lib/translateDOMPositionXY';
@@ -113,6 +113,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onTouchEnd = props.onTouchEnd,
     dataTheme = props.dataTheme,
     tableBodyHeight = props.tableBodyHeight,
+    columns = props.columns,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   var _useClassNames = useClassNames(classPrefix, typeof classPrefix !== 'undefined'),
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -359,7 +360,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
   var styles = _extends({
     width: widthProp || 'auto',
-    height: tableBodyHeight != null ? tableBodyHeight : getTableHeight()
+    height: getTableHeight()
   }, style);
   var renderRowExpanded = useCallback(function (rowData) {
     var styles = {
@@ -617,6 +618,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _visibleRows$current;
     var height = getTableHeight();
     var bodyHeight = height - headerHeight;
+    console.log(bodyHeight, height);
     var bodyStyles = {
       top: headerHeight,
       height: bodyHeight,
@@ -722,9 +724,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     var wheelStyles = {
       position: 'absolute',
-      height: contentHeight,
-      minHeight: tableBodyHeight,
-      maxHeight: tableBodyHeight,
+      // height: contentHeight,
+      minHeight: contentHeight,
+      // maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     var topRowStyles = {

package/es/qbsTable/QbsTable.js

@@ -387,12 +387,16 @@ var QbsTable = function QbsTable(_ref) {
     dataTheme: dataTheme,
     wordWrap: wordWrap,
     sortColumn: sortColumn,
+    style: {
+      position: 'relative'
+    },
     sortType: sortType,
     onSortColumn: handleSortColumn,
     onRowClick: onRowClick,
     tableBodyHeight: tableBodyHeight,
     cellBordered: cellBordered,
     bordered: bordered,
+    columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
     loading: isLoading != null ? isLoading : loading,
@@ -458,7 +462,21 @@ var QbsTable = function QbsTable(_ref) {
     className: "" + classes.tableCheckBoxClass,
     onChange: handleCheck,
     dataTheme: dataTheme
-  })), columnsRendered, (actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 || columnToggle) && /*#__PURE__*/React.createElement(Column, {
+  })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/React.createElement(Column, {
+    width: 40,
+    fixed: "right"
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    className: " " + classes.headerlClass,
+    dataTheme: dataTheme
+  }, /*#__PURE__*/React.createElement(ColumToggle, {
+    columns: columns,
+    onToggle: handleToggle,
+    onReorder: onReorder,
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    handleResetColumns: handleResetColumns
+  })), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
     width: 40,
     fixed: "right"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
@@ -472,7 +490,7 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns
-  })), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(ActionCell, {
+  })), /*#__PURE__*/React.createElement(ActionCell, {
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,

package/lib/Table.d.ts

@@ -36,6 +36,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     height?: number;
     /** The minimum height of the table. The height is maintained even when the content is not stretched. */
     minHeight?: number;
+    columns?: any;
     /** The row of the table has a mouseover effect */
     hover?: boolean;
     /** The height of the table header */

package/lib/Table.js

@@ -20,7 +20,7 @@ var _Row = _interopRequireDefault(require("./Row"));
 var _Scrollbar = _interopRequireDefault(require("./Scrollbar"));
 var _TableContext = _interopRequireDefault(require("./TableContext"));
 var _utils = require("./utils");
-var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight"],
+var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns"],
   _excluded2 = ["depth", "rowIndex"],
   _excluded3 = ["cellHeight"];
 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); }
@@ -120,6 +120,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     onTouchEnd = props.onTouchEnd,
     dataTheme = props.dataTheme,
     tableBodyHeight = props.tableBodyHeight,
+    columns = props.columns,
     rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix, typeof classPrefix !== 'undefined'),
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -366,7 +367,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }));
   var styles = (0, _extends2["default"])({
     width: widthProp || 'auto',
-    height: tableBodyHeight != null ? tableBodyHeight : getTableHeight()
+    height: getTableHeight()
   }, style);
   var renderRowExpanded = (0, _react.useCallback)(function (rowData) {
     var styles = {
@@ -624,6 +625,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     var _visibleRows$current;
     var height = getTableHeight();
     var bodyHeight = height - headerHeight;
+    console.log(bodyHeight, height);
     var bodyStyles = {
       top: headerHeight,
       height: bodyHeight,
@@ -729,9 +731,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
     var wheelStyles = {
       position: 'absolute',
-      height: contentHeight,
-      minHeight: tableBodyHeight,
-      maxHeight: tableBodyHeight,
+      // height: contentHeight,
+      minHeight: contentHeight,
+      // maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     var topRowStyles = {

package/lib/qbsTable/QbsTable.js

@@ -394,12 +394,16 @@ var QbsTable = function QbsTable(_ref) {
     dataTheme: dataTheme,
     wordWrap: wordWrap,
     sortColumn: sortColumn,
+    style: {
+      position: 'relative'
+    },
     sortType: sortType,
     onSortColumn: handleSortColumn,
     onRowClick: onRowClick,
     tableBodyHeight: tableBodyHeight,
     cellBordered: cellBordered,
     bordered: bordered,
+    columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
     loading: isLoading != null ? isLoading : loading,
@@ -465,7 +469,21 @@ var QbsTable = function QbsTable(_ref) {
     className: "" + classes.tableCheckBoxClass,
     onChange: handleCheck,
     dataTheme: dataTheme
-  })), columnsRendered, (actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 || columnToggle) && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
+  })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
+    width: 40,
+    fixed: "right"
+  }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    className: " " + classes.headerlClass,
+    dataTheme: dataTheme
+  }, /*#__PURE__*/_react["default"].createElement(_ColumShowHide["default"], {
+    columns: columns,
+    onToggle: handleToggle,
+    onReorder: onReorder,
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    handleResetColumns: handleResetColumns
+  })), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
     fixed: "right"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
@@ -479,7 +497,7 @@ var QbsTable = function QbsTable(_ref) {
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns
-  })), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
+  })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,

package/package.json

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

package/src/Table.tsx

@@ -6,14 +6,40 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useImperativeHandle, useReducer, useRef, useState } from 'react';
 
 import CellGroup from './CellGroup';
-import { CELL_PADDING_HEIGHT, EXPANDED_KEY, ROW_HEADER_HEIGHT, ROW_HEIGHT, SCROLLBAR_WIDTH, SORT_TYPE, TREE_DEPTH } from './constants';
+import {
+  CELL_PADDING_HEIGHT,
+  EXPANDED_KEY,
+  ROW_HEADER_HEIGHT,
+  ROW_HEIGHT,
+  SCROLLBAR_WIDTH,
+  SORT_TYPE,
+  TREE_DEPTH
+} from './constants';
 import EmptyMessage from './EmptyMessage';
 import Loader from './Loader';
 import MouseArea from './MouseArea';
 import Row, { RowProps } from './Row';
 import Scrollbar, { ScrollbarInstance } from './Scrollbar';
 import TableContext from './TableContext';
-import { findAllParents, findRowKeys, flattenData, isRTL, isSupportTouchEvent, mergeCells, resetLeftForCells, shouldShowRowByExpanded, useAffix, useCellDescriptor, useClassNames, useControlled, usePosition, useScrollListener, useTableDimension, useTableRows, useUpdateEffect } from './utils';
+import {
+  findAllParents,
+  findRowKeys,
+  flattenData,
+  isRTL,
+  isSupportTouchEvent,
+  mergeCells,
+  resetLeftForCells,
+  shouldShowRowByExpanded,
+  useAffix,
+  useCellDescriptor,
+  useClassNames,
+  useControlled,
+  usePosition,
+  useScrollListener,
+  useTableDimension,
+  useTableRows,
+  useUpdateEffect
+} from './utils';
 
 import type {
   StandardProps,
@@ -101,6 +127,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
   /** The minimum height of the table. The height is maintained even when the content is not stretched. */
   minHeight?: number;
 
+  columns?: any;
   /** The row of the table has a mouseover effect */
   hover?: boolean;
 
@@ -307,6 +334,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onTouchEnd,
     dataTheme,
     tableBodyHeight,
+    columns,
     ...rest
   } = props;
 
@@ -567,7 +595,9 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
   const styles = {
     width: widthProp || 'auto',
-    height: tableBodyHeight ?? getTableHeight(),
+    height: getTableHeight(),
+    // height: tableBodyHeight ?? getTableHeight(),
+
     ...style
   };
 
@@ -919,6 +949,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
   const renderTableBody = (bodyCells: any[], rowWidth: number) => {
     const height = getTableHeight();
     const bodyHeight = height - headerHeight;
+    console.log(bodyHeight, height);
     const bodyStyles = {
       top: headerHeight,
       height: bodyHeight,
@@ -1045,9 +1076,9 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
     const wheelStyles: React.CSSProperties = {
       position: 'absolute',
-      height: contentHeight,
-      minHeight: tableBodyHeight,
-      maxHeight: tableBodyHeight,
+      // height: contentHeight,
+      minHeight: contentHeight,
+      // maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     const topRowStyles = { height: topHideHeight };

package/src/qbsTable/QbsTable.tsx

@@ -407,6 +407,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
       ),
     [columns, dataTheme]
   );
+
   return (
     <div className={`qbs-table ${classes.tableContainerClass}`} data-theme={dataTheme}>
       {toolbar && <ToolBar {...toolbarProps} />}
@@ -417,12 +418,14 @@ const QbsTable: React.FC<QbsTableProps> = ({
           dataTheme={dataTheme}
           wordWrap={wordWrap}
           sortColumn={sortColumn}
+          style={{ position: 'relative' }}
           sortType={sortType}
           onSortColumn={handleSortColumn}
           onRowClick={onRowClick}
           tableBodyHeight={tableBodyHeight}
           cellBordered={cellBordered}
           bordered={bordered}
+          columns={columns}
           minHeight={minHeight}
           headerHeight={headerHeight}
           loading={isLoading ?? loading}
@@ -497,8 +500,27 @@ const QbsTable: React.FC<QbsTableProps> = ({
             </Column>
           )}
           {columnsRendered}
-
-          {((actionProps && actionProps?.length > 0) || columnToggle) && (
+          {!actionProps ||
+            (actionProps?.length === 0 && columnToggle && (
+              <Column width={40} fixed="right">
+                <HeaderCell
+                  verticalAlign={findGrouped() ? 'middle' : undefined}
+                  className={` ${classes.headerlClass}`}
+                  dataTheme={dataTheme}
+                >
+                  <ColumToggle
+                    columns={columns}
+                    onToggle={handleToggle}
+                    onReorder={onReorder}
+                    isOpen={isOpen}
+                    setIsOpen={setIsOpen}
+                    handleResetColumns={handleResetColumns}
+                  />
+                </HeaderCell>
+                <Cell />
+              </Column>
+            ))}
+          {actionProps && actionProps?.length > 0 && (
             <Column width={40} fixed="right">
               <HeaderCell
                 verticalAlign={findGrouped() ? 'middle' : undefined}
@@ -518,17 +540,16 @@ const QbsTable: React.FC<QbsTableProps> = ({
                   />
                 )}
               </HeaderCell>
-              {actionProps && actionProps?.length > 0 && (
-                <ActionCell
-                  actionProps={actionProps}
-                  className={`${classes.cellClass} ${classes.actionCellClass}`}
-                  handleMenuActions={handleMenuActions}
-                  dataTheme={dataTheme}
-                />
-              )}
+              <ActionCell
+                actionProps={actionProps}
+                className={`${classes.cellClass} ${classes.actionCellClass}`}
+                handleMenuActions={handleMenuActions}
+                dataTheme={dataTheme}
+              />
             </Column>
           )}
         </Table>
+
         <div>
           {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
         </div>

package/src/utils/useTableDimension.ts

@@ -305,7 +305,6 @@ const useTableDimension = <Row extends RowDataType, Key>(props: TableDimensionPr
     if (fillHeight) {
       return tableHeight.current;
     }
-
     if (data?.length === 0 && autoHeight) {
       return heightProp;
     }