rc-table - npm Package Compare versions

Comparing version 7.33.4 to 7.34.0

es/hooks/useColumns/index.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
  */
-declare function useColumns<RecordType>({ prefixCls, columns, children, expandable, expandedKeys, columnTitle, getRowKey, onTriggerExpand, expandIcon, rowExpandable, expandIconColumnIndex, direction, expandRowByClick, columnWidth, fixed, scrollWidth, }: {
+declare function useColumns<RecordType>({ prefixCls, columns, children, expandable, expandedKeys, columnTitle, getRowKey, onTriggerExpand, expandIcon, rowExpandable, expandIconColumnIndex, direction, expandRowByClick, columnWidth, fixed, scrollWidth, clientWidth, }: {
     prefixCls?: string;
@@ -23,2 +23,3 @@ columns?: ColumnsType<RecordType>;
     columnWidth?: number | string;
+    clientWidth: number;
     fixed?: FixedType;
@@ -25,0 +26,0 @@ scrollWidth?: number;

es/hooks/useColumns/index.js

@@ -115,3 +115,4 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     fixed = _ref2.fixed,
-    scrollWidth = _ref2.scrollWidth;
+    scrollWidth = _ref2.scrollWidth,
+    clientWidth = _ref2.clientWidth;
   var baseColumns = React.useMemo(function () {
@@ -230,3 +231,3 @@ return columns || convertChildrenToColumns(children);
   // ========================= FillWidth ========================
-  var _useWidthColumns = useWidthColumns(flattenColumns, scrollWidth),
+  var _useWidthColumns = useWidthColumns(flattenColumns, scrollWidth, clientWidth),
     _useWidthColumns2 = _slicedToArray(_useWidthColumns, 2),
@@ -233,0 +234,0 @@ filledColumns = _useWidthColumns2[0],

es/hooks/useColumns/useWidthColumns.d.ts

@@ -5,2 +5,2 @@ import type { ColumnsType } from '../../interface';
  */
-export default function useWidthColumns(flattenColumns: ColumnsType<any>, scrollWidth: number): [columns: ColumnsType<any>, realScrollWidth: number];
+export default function useWidthColumns(flattenColumns: ColumnsType<any>, scrollWidth: number, clientWidth: number): [columns: ColumnsType<any>, realScrollWidth: number];

es/hooks/useColumns/useWidthColumns.js

@@ -17,3 +17,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  */
-export default function useWidthColumns(flattenColumns, scrollWidth) {
+export default function useWidthColumns(flattenColumns, scrollWidth, clientWidth) {
   return React.useMemo(function () {
@@ -36,3 +36,3 @@ // Fill width if needed
       // Fill width
-      var restWidth = scrollWidth - totalWidth;
+      var restWidth = Math.max(scrollWidth - totalWidth, missWidthCount);
       var restCount = missWidthCount;
@@ -55,6 +55,18 @@ var avgWidth = restWidth / missWidthCount;
       });
-      return [filledColumns, realTotal];
+
+      // If realTotal is less than clientWidth,
+      // We need extend column width
+      if (realTotal < clientWidth) {
+        var scale = clientWidth / realTotal;
+        restWidth = clientWidth;
+        filledColumns.forEach(function (col, index) {
+          var colWidth = Math.floor(col.width * scale);
+          col.width = index === filledColumns.length - 1 ? restWidth : colWidth;
+          restWidth -= colWidth;
+        });
+      }
+      return [filledColumns, Math.max(realTotal, clientWidth)];
     }
     return [flattenColumns, scrollWidth];
-  }, [flattenColumns, scrollWidth]);
+  }, [flattenColumns, scrollWidth, clientWidth]);
 }

es/Table.d.ts

@@ -61,2 +61,3 @@ /**
     direction?: Direction;
+    sticky?: boolean | TableSticky;
     /**
@@ -85,6 +86,11 @@ * @private Internal usage, may remove by refactor. Should always use `columns` instead.
      */
+    getContainerWidth?: (ele: HTMLElement, width: number) => number;
+    /**
+     * @private Internal usage, may remove by refactor.
+     *
+     * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
+     */
     internalRefs?: {
         body: React.MutableRefObject<HTMLDivElement>;
     };
-    sticky?: boolean | TableSticky;
 }
@@ -91,0 +97,0 @@ declare function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<RecordType>): React.JSX.Element;

es/Table.js

@@ -101,2 +101,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     tailor = props.tailor,
+    getContainerWidth = props.getContainerWidth,
     sticky = props.sticky;
@@ -166,3 +167,4 @@ var mergedData = data || EMPTY_DATA;
       direction: direction,
-      scrollWidth: useInternalHooks && tailor && typeof scrollX === 'number' ? scrollX : null
+      scrollWidth: useInternalHooks && tailor && typeof scrollX === 'number' ? scrollX : null,
+      clientWidth: componentWidth
     }), useInternalHooks ? transformColumns : null),
@@ -338,5 +340,9 @@ _useColumns2 = _slicedToArray(_useColumns, 3),
     var width = _ref3.width;
-    if (width !== componentWidth) {
+    var mergedWidth = fullTableRef.current ? fullTableRef.current.offsetWidth : width;
+    if (useInternalHooks && getContainerWidth) {
+      mergedWidth = getContainerWidth(fullTableRef.current, mergedWidth) || mergedWidth;
+    }
+    if (mergedWidth !== componentWidth) {
       triggerOnScroll();
-      setComponentWidth(fullTableRef.current ? fullTableRef.current.offsetWidth : width);
+      setComponentWidth(mergedWidth);
     }
@@ -343,0 +349,0 @@ };

es/VirtualTable/index.d.ts

@@ -6,3 +6,3 @@ import type { CompareProps } from '@rc-component/context/lib/Immutable';
     scroll: {
-        x: number;
+        x?: number;
         y: number;
@@ -9,0 +9,0 @@ };

es/VirtualTable/index.js

@@ -20,3 +20,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 };
-var PRESET_COLUMN_WIDTH = 100;
 function VirtualTable(props) {
@@ -35,6 +34,3 @@ var columns = props.columns,
   if (typeof scrollX !== 'number') {
-    scrollX = ((columns || []).length + 1) * PRESET_COLUMN_WIDTH;
-    if (process.env.NODE_ENV !== 'production') {
-      warning(false, '`scroll.x` in virtual table must be number.');
-    }
+    scrollX = 1;
   }
@@ -41,0 +37,0 @@

lib/hooks/useColumns/index.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
  */
-declare function useColumns<RecordType>({ prefixCls, columns, children, expandable, expandedKeys, columnTitle, getRowKey, onTriggerExpand, expandIcon, rowExpandable, expandIconColumnIndex, direction, expandRowByClick, columnWidth, fixed, scrollWidth, }: {
+declare function useColumns<RecordType>({ prefixCls, columns, children, expandable, expandedKeys, columnTitle, getRowKey, onTriggerExpand, expandIcon, rowExpandable, expandIconColumnIndex, direction, expandRowByClick, columnWidth, fixed, scrollWidth, clientWidth, }: {
     prefixCls?: string;
@@ -23,2 +23,3 @@ columns?: ColumnsType<RecordType>;
     columnWidth?: number | string;
+    clientWidth: number;
     fixed?: FixedType;
@@ -25,0 +26,0 @@ scrollWidth?: number;

lib/hooks/useColumns/index.js

@@ -126,3 +126,4 @@ "use strict";
     fixed = _ref2.fixed,
-    scrollWidth = _ref2.scrollWidth;
+    scrollWidth = _ref2.scrollWidth,
+    clientWidth = _ref2.clientWidth;
   var baseColumns = React.useMemo(function () {
@@ -241,3 +242,3 @@ return columns || convertChildrenToColumns(children);
   // ========================= FillWidth ========================
-  var _useWidthColumns = (0, _useWidthColumns3.default)(flattenColumns, scrollWidth),
+  var _useWidthColumns = (0, _useWidthColumns3.default)(flattenColumns, scrollWidth, clientWidth),
     _useWidthColumns2 = (0, _slicedToArray2.default)(_useWidthColumns, 2),
@@ -244,0 +245,0 @@ filledColumns = _useWidthColumns2[0],

lib/hooks/useColumns/useWidthColumns.d.ts

@@ -5,2 +5,2 @@ import type { ColumnsType } from '../../interface';
  */
-export default function useWidthColumns(flattenColumns: ColumnsType<any>, scrollWidth: number): [columns: ColumnsType<any>, realScrollWidth: number];
+export default function useWidthColumns(flattenColumns: ColumnsType<any>, scrollWidth: number, clientWidth: number): [columns: ColumnsType<any>, realScrollWidth: number];

lib/hooks/useColumns/useWidthColumns.js

@@ -27,3 +27,3 @@ "use strict";
  */
-function useWidthColumns(flattenColumns, scrollWidth) {
+function useWidthColumns(flattenColumns, scrollWidth, clientWidth) {
   return React.useMemo(function () {
@@ -46,3 +46,3 @@ // Fill width if needed
       // Fill width
-      var restWidth = scrollWidth - totalWidth;
+      var restWidth = Math.max(scrollWidth - totalWidth, missWidthCount);
       var restCount = missWidthCount;
@@ -65,6 +65,18 @@ var avgWidth = restWidth / missWidthCount;
       });
-      return [filledColumns, realTotal];
+
+      // If realTotal is less than clientWidth,
+      // We need extend column width
+      if (realTotal < clientWidth) {
+        var scale = clientWidth / realTotal;
+        restWidth = clientWidth;
+        filledColumns.forEach(function (col, index) {
+          var colWidth = Math.floor(col.width * scale);
+          col.width = index === filledColumns.length - 1 ? restWidth : colWidth;
+          restWidth -= colWidth;
+        });
+      }
+      return [filledColumns, Math.max(realTotal, clientWidth)];
     }
     return [flattenColumns, scrollWidth];
-  }, [flattenColumns, scrollWidth]);
+  }, [flattenColumns, scrollWidth, clientWidth]);
 }

lib/Table.d.ts

@@ -61,2 +61,3 @@ /**
     direction?: Direction;
+    sticky?: boolean | TableSticky;
     /**
@@ -85,6 +86,11 @@ * @private Internal usage, may remove by refactor. Should always use `columns` instead.
      */
+    getContainerWidth?: (ele: HTMLElement, width: number) => number;
+    /**
+     * @private Internal usage, may remove by refactor.
+     *
+     * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
+     */
     internalRefs?: {
         body: React.MutableRefObject<HTMLDivElement>;
     };
-    sticky?: boolean | TableSticky;
 }
@@ -91,0 +97,0 @@ declare function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<RecordType>): React.JSX.Element;

lib/Table.js

@@ -113,2 +113,3 @@ "use strict";
     tailor = props.tailor,
+    getContainerWidth = props.getContainerWidth,
     sticky = props.sticky;
@@ -178,3 +179,4 @@ var mergedData = data || EMPTY_DATA;
       direction: direction,
-      scrollWidth: useInternalHooks && tailor && typeof scrollX === 'number' ? scrollX : null
+      scrollWidth: useInternalHooks && tailor && typeof scrollX === 'number' ? scrollX : null,
+      clientWidth: componentWidth
     }), useInternalHooks ? transformColumns : null),
@@ -350,5 +352,9 @@ _useColumns2 = (0, _slicedToArray2.default)(_useColumns, 3),
     var width = _ref3.width;
-    if (width !== componentWidth) {
+    var mergedWidth = fullTableRef.current ? fullTableRef.current.offsetWidth : width;
+    if (useInternalHooks && getContainerWidth) {
+      mergedWidth = getContainerWidth(fullTableRef.current, mergedWidth) || mergedWidth;
+    }
+    if (mergedWidth !== componentWidth) {
       triggerOnScroll();
-      setComponentWidth(fullTableRef.current ? fullTableRef.current.offsetWidth : width);
+      setComponentWidth(mergedWidth);
     }
@@ -355,0 +361,0 @@ };

lib/VirtualTable/index.d.ts

@@ -6,3 +6,3 @@ import type { CompareProps } from '@rc-component/context/lib/Immutable';
     scroll: {
-        x: number;
+        x?: number;
         y: number;
@@ -9,0 +9,0 @@ };

lib/VirtualTable/index.js

@@ -31,3 +31,2 @@ "use strict";
 };
-var PRESET_COLUMN_WIDTH = 100;
 function VirtualTable(props) {
@@ -46,6 +45,3 @@ var columns = props.columns,
   if (typeof scrollX !== 'number') {
-    scrollX = ((columns || []).length + 1) * PRESET_COLUMN_WIDTH;
-    if (process.env.NODE_ENV !== 'production') {
-      (0, _rcUtil.warning)(false, '`scroll.x` in virtual table must be number.');
-    }
+    scrollX = 1;
   }
@@ -52,0 +48,0 @@

package.json

 {
   "name": "rc-table",
-  "version": "7.33.4",
+  "version": "7.34.0",
   "description": "table ui component for react",
@@ -5,0 +5,0 @@ "engines": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

394038

increased by0.45%

Lines of code

8593

increased by0.49%

Number of low supply chain risk alerts

44

decreased by-4.35%

Published versions last months

1

increased byInfinity%

No dependency changes