rsuite-table - npm Package Compare versions

Comparing version 5.8.2 to 5.9.0

CHANGELOG.md

@@ -0,1 +1,15 @@
+# [5.9.0](https://github.com/rsuite/rsuite-table/compare/5.8.2...5.9.0) (2023-02-23)
+
+
+### Bug Fixes
+
+* **resizable:** fix scrollbar not showing after resizing column width ([#399](https://github.com/rsuite/rsuite-table/issues/399)) ([19c1370](https://github.com/rsuite/rsuite-table/commit/19c137037176a4f46b27506022ddb9d3df509440))
+
+
+### Features
+
+* **Table:** add support for `rowIndex` on `rowClassName` ([#400](https://github.com/rsuite/rsuite-table/issues/400)) ([c97ed46](https://github.com/rsuite/rsuite-table/commit/c97ed4618fe592005aa6c67942159caf63da2e28))
+
+
+
 ## [5.8.2](https://github.com/rsuite/rsuite-table/compare/5.8.1...5.8.2) (2023-01-11)
@@ -2,0 +16,0 @@

es/Table.d.ts

@@ -57,3 +57,3 @@ import React from 'react';
     /** Add an optional extra class name to row */
-    rowClassName?: string | ((rowData: RowDataType) => string);
+    rowClassName?: string | ((rowData: RowDataType, rowIndex: number) => string);
     /** Whether to display the header of the table */
@@ -60,0 +60,0 @@ showHeader?: boolean;

es/Table.js

 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", "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"],
-    _excluded2 = ["depth"];
+    _excluded2 = ["depth", "rowIndex"];
 import React, { useState, useRef, useCallback, useImperativeHandle, useReducer } from 'react';
@@ -391,6 +391,7 @@ import { getTranslateDOMPositionXY } from 'dom-lib/translateDOMPositionXY';
     var depth = props.depth,
+        rowIndex = props.rowIndex,
         restRowProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
     if (typeof rowClassName === 'function') {
-      restRowProps.className = rowClassName(rowData);
+      restRowProps.className = rowClassName(rowData, rowIndex);
     } else {
@@ -482,3 +483,4 @@ restRowProps.className = rowClassName;
       isHeaderRow: true,
-      top: 0
+      top: 0,
+      rowIndex: -1
     };
@@ -602,5 +604,5 @@ var fixedStyle = {
         rowData: rowData,
+        rowIndex: props.rowIndex,
         wordWrap: wordWrap,
         height: _rowHeight,
-        rowIndex: props.key,
         depth: props.depth,
@@ -709,2 +711,3 @@ renderTreeToggle: renderTreeToggle,
             top: top,
+            rowIndex: index,
             width: rowWidth,
@@ -752,2 +755,3 @@ depth: _rowData[TREE_DEPTH],
             key: _index,
+            rowIndex: _index,
             depth: _rowData2[TREE_DEPTH],
@@ -754,0 +758,0 @@ top: _index * _nextRowHeight,

es/utils/useCellDescriptor.js

@@ -14,2 +14,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useUpdateEffect from './useUpdateEffect';
+import flushSync from './flushSync';
 
@@ -76,5 +77,8 @@ /**
       });
-    }
+    } // fix: https://github.com/rsuite/rsuite-table/issues/398
 
-    clearCache();
+
+    flushSync(function () {
+      return clearCache();
+    });
     onHeaderCellResize === null || onHeaderCellResize === void 0 ? void 0 : onHeaderCellResize(columnWidth, dataKey);
@@ -81,0 +85,0 @@ }, [clearCache, mouseAreaRef, onHeaderCellResize, setColumnResizing]);

lib/Table.d.ts

@@ -57,3 +57,3 @@ import React from 'react';
     /** Add an optional extra class name to row */
-    rowClassName?: string | ((rowData: RowDataType) => string);
+    rowClassName?: string | ((rowData: RowDataType, rowIndex: number) => string);
     /** Whether to display the header of the table */
@@ -60,0 +60,0 @@ showHeader?: boolean;

lib/Table.js

@@ -43,3 +43,3 @@ "use strict";
 var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "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"],
-    _excluded2 = ["depth"];
+    _excluded2 = ["depth", "rowIndex"];
 
@@ -419,6 +419,7 @@ 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); }
     var depth = props.depth,
+        rowIndex = props.rowIndex,
         restRowProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded2);
 
     if (typeof rowClassName === 'function') {
-      restRowProps.className = rowClassName(rowData);
+      restRowProps.className = rowClassName(rowData, rowIndex);
     } else {
@@ -509,3 +510,4 @@ restRowProps.className = rowClassName;
       isHeaderRow: true,
-      top: 0
+      top: 0,
+      rowIndex: -1
     };
@@ -628,5 +630,5 @@ var fixedStyle = {
         rowData: rowData,
+        rowIndex: props.rowIndex,
         wordWrap: wordWrap,
         height: _rowHeight,
-        rowIndex: props.key,
         depth: props.depth,
@@ -735,2 +737,3 @@ renderTreeToggle: renderTreeToggle,
             top: top,
+            rowIndex: index,
             width: rowWidth,
@@ -778,2 +781,3 @@ depth: _rowData[_constants.TREE_DEPTH],
             key: _index,
+            rowIndex: _index,
             depth: _rowData2[_constants.TREE_DEPTH],
@@ -780,0 +784,0 @@ top: _index * _nextRowHeight,

lib/utils/useCellDescriptor.js

@@ -34,2 +34,4 @@ "use strict";
 
+var _flushSync = _interopRequireDefault(require("./flushSync"));
+
 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); }
@@ -99,5 +101,8 @@
       });
-    }
+    } // fix: https://github.com/rsuite/rsuite-table/issues/398
 
-    clearCache();
+
+    (0, _flushSync["default"])(function () {
+      return clearCache();
+    });
     onHeaderCellResize === null || onHeaderCellResize === void 0 ? void 0 : onHeaderCellResize(columnWidth, dataKey);
@@ -104,0 +109,0 @@ }, [clearCache, mouseAreaRef, onHeaderCellResize, setColumnResizing]);

package.json

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

README.md

@@ -127,3 +127,3 @@ # rsuite-table
 | renderTreeToggle         | (icon:node,rowData:object,expanded:boolean)=> node                 | Tree table, the callback function in the expanded node                                                                              |
-| rowClassName             | string , (rowData:object)=>string                                  | Add an optional extra class name to row                                                                                             |
+| 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                                                                                                |
@@ -130,0 +130,0 @@ | rowHeight                | number`(46)`, (rowData: object) => number                          | Row height                                                                                                                          |

src/utils/useCellDescriptor.ts

@@ -16,2 +16,3 @@ import React, { useState, useCallback, useRef } from 'react';
 import { CellProps } from '../Cell';
+import flushSync from './flushSync';
 
@@ -111,3 +112,4 @@ interface CellDescriptorProps {
 
-      clearCache();
+      // fix: https://github.com/rsuite/rsuite-table/issues/398
+      flushSync(() => clearCache());
       onHeaderCellResize?.(columnWidth, dataKey);
@@ -114,0 +116,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

618631

increased by0.24%

Lines of code

12823

increased by0.16%

No dependency changes