qbs-react-grid 1.1.15 → 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,

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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.1.15",
+  "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}
@@ -546,6 +549,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             </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;
     }