rsuite-table - npm Package Compare versions

Comparing version 5.13.0 to 5.14.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [5.14.0](https://github.com/rsuite/rsuite-table/compare/5.13.0...5.14.0) (2023-10-19)
+
+### Features
+
+* **Table:** add an option to define rowExpandedHeight as function [#465](https://github.com/rsuite/rsuite-table/pull/465)
+
+
 # [5.13.0](https://github.com/rsuite/rsuite-table/compare/5.12.0...5.13.0) (2023-10-17)
@@ -2,0 +9,0 @@

es/Table.d.ts

@@ -55,3 +55,3 @@ import React from 'react';
     /** Set the height of an expandable area */
-    rowExpandedHeight?: number;
+    rowExpandedHeight?: ((rowData?: Row) => number) | number;
     /** Add an optional extra class name to row */
@@ -58,0 +58,0 @@ rowClassName?: string | ((rowData: Row, rowIndex: number) => string);

es/Table.js

@@ -385,4 +385,12 @@ 'use client';
   var renderRowExpanded = useCallback(function (rowData) {
+    var height = 0;
+
+    if (typeof rowExpandedHeight === 'function') {
+      height = rowExpandedHeight(rowData);
+    } else {
+      height = rowExpandedHeight;
+    }
+
     var styles = {
-      height: rowExpandedHeight
+      height: height
     };
@@ -687,3 +695,11 @@
       var minTop = Math.abs(scrollY.current);
-      var maxTop = minTop + height + rowExpandedHeight;
+      var startHeight = 0;
+
+      if (typeof rowExpandedHeight === 'function') {
+        startHeight = data.length ? rowExpandedHeight(data[0]) : 100;
+      } else {
+        startHeight = rowExpandedHeight;
+      }
+
+      var maxTop = minTop + height + startHeight;
       var isCustomRowHeight = typeof rowHeight === 'function';
@@ -718,3 +734,7 @@ var isUncertainHeight = !!renderRowExpandedProp || isCustomRowHeight || wordWrap; // If virtualized is enabled and the row height in the Table is variable,
               // If the row is expanded, the height of the expanded row is added.
-              nextRowHeight += rowExpandedHeight;
+              if (typeof rowExpandedHeight === 'function') {
+                nextRowHeight += rowExpandedHeight(_rowData);
+              } else {
+                nextRowHeight += rowExpandedHeight;
+              }
             }
@@ -885,3 +905,3 @@ }
   renderRow: PropTypes.func,
-  rowExpandedHeight: PropTypes.number,
+  rowExpandedHeight: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
   renderEmpty: PropTypes.func,
@@ -888,0 +908,0 @@ renderLoading: PropTypes.func,

lib/Table.d.ts

@@ -55,3 +55,3 @@ import React from 'react';
     /** Set the height of an expandable area */
-    rowExpandedHeight?: number;
+    rowExpandedHeight?: ((rowData?: Row) => number) | number;
     /** Add an optional extra class name to row */
@@ -58,0 +58,0 @@ rowClassName?: string | ((rowData: Row, rowIndex: number) => string);

lib/Table.js

@@ -411,4 +411,12 @@ "use strict";
   var renderRowExpanded = (0, _react.useCallback)(function (rowData) {
+    var height = 0;
+
+    if (typeof rowExpandedHeight === 'function') {
+      height = rowExpandedHeight(rowData);
+    } else {
+      height = rowExpandedHeight;
+    }
+
     var styles = {
-      height: rowExpandedHeight
+      height: height
     };
@@ -710,3 +718,11 @@
       var minTop = Math.abs(scrollY.current);
-      var maxTop = minTop + height + rowExpandedHeight;
+      var startHeight = 0;
+
+      if (typeof rowExpandedHeight === 'function') {
+        startHeight = data.length ? rowExpandedHeight(data[0]) : 100;
+      } else {
+        startHeight = rowExpandedHeight;
+      }
+
+      var maxTop = minTop + height + startHeight;
       var isCustomRowHeight = typeof rowHeight === 'function';
@@ -741,3 +757,7 @@ var isUncertainHeight = !!renderRowExpandedProp || isCustomRowHeight || wordWrap; // If virtualized is enabled and the row height in the Table is variable,
               // If the row is expanded, the height of the expanded row is added.
-              nextRowHeight += rowExpandedHeight;
+              if (typeof rowExpandedHeight === 'function') {
+                nextRowHeight += rowExpandedHeight(_rowData);
+              } else {
+                nextRowHeight += rowExpandedHeight;
+              }
             }
@@ -910,3 +930,3 @@ }
   renderRow: _propTypes["default"].func,
-  rowExpandedHeight: _propTypes["default"].number,
+  rowExpandedHeight: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].number]),
   renderEmpty: _propTypes["default"].func,
@@ -913,0 +933,0 @@ renderLoading: _propTypes["default"].func,

package.json

 {
   "name": "rsuite-table",
-  "version": "5.13.0",
+  "version": "5.14.0",
   "description": "A React table component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -126,3 +126,3 @@ # rsuite-table
 | rowClassName             | string , (rowData:object, rowIndex:number)=>string                 | Add an optional extra class name to row                                                                                             |
-| rowExpandedHeight        | number `(100)`                                                     | Set the height of an expandable area                                                                                                |
+| rowExpandedHeight        | number `(100)`, (rowDate?: Object) => number                       | Set the height of an expandable area                                                                                                |
 | rowHeight                | number`(46)`, (rowData: object) => number                          | Row height                                                                                                                          |
@@ -129,0 +129,0 @@ | rowKey                   | string `('key')`                                                   | Each row corresponds to the unique `key` in `data`                                                                                  |

No alert changes

Improved metrics

Total package byte prevSize

644114

increased by0.32%

Lines of code

13244

increased by0.36%

No dependency changes