@hi-ui/table 4.9.2 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hi-ui/table
 
+## 4.10.0
+
+### Minor Changes
+
+- [#3093](https://github.com/XiaoMi/hiui/pull/3093) [`8192dc3c0`](https://github.com/XiaoMi/hiui/commit/8192dc3c06a5299165fcad1a05f291b994384e3f) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(table): 列排序支持设置默认排序顺序和受控模式 (#3091)
+
+### Patch Changes
+
+- [#3105](https://github.com/XiaoMi/hiui/pull/3105) [`af5207873`](https://github.com/XiaoMi/hiui/commit/af5207873a2e1187a95b00d2c5f64658eb210086) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(table): 修复虚拟表格下自定义行和单元格样式无效问题 (#3100)
+
 ## 4.9.2
 
 ### Patch Changes

package/lib/cjs/TableBody.js

@@ -54,7 +54,8 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref) {
     measureRowElementRef = _useTableContext.measureRowElementRef,
     scrollbar = _useTableContext.scrollbar,
     scrollLeft = _useTableContext.scrollLeft,
-    innerRef = _useTableContext.innerRef;
+    innerRef = _useTableContext.innerRef,
+    rowClassName = _useTableContext.rowClassName;
   var virtualListRef = React.useRef(null);
   var listRef = React.useRef(null);
   var cls = classname.cx(prefixCls + "-body");
@@ -146,7 +147,8 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref) {
           key: row.id,
           // @ts-ignore
           rowIndex: index,
-          rowData: row
+          rowData: row,
+          className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index)
         }, getRequiredProps(row.id))));
       }
     }))) : TbodyContent.renderEmptyContent(Object.assign({

package/lib/cjs/TableRow.js

@@ -176,6 +176,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }), flattedColumnsWithoutChildren.map(function (column, idx) {
       return /*#__PURE__*/React__default["default"].createElement(TableCell.TableCell, {
         key: idx,
+        className: cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(rowDataProp, column, idx),
         column: column,
         isSwitcherCol: firstColumn ? firstColumn.id === column.id : false,
         rowData: rowDataProp,

package/lib/cjs/use-table.js

@@ -45,6 +45,7 @@ var DEFAULT_HIGHLIGHTED_COL_KEYS = [];
 var DEFAULT_EXPAND_ROW_KEYS = [];
 var DEFAULT_FIXED_TO_COLUMN = {};
 var useTable = function useTable(_a) {
+  var _b, _c, _d;
   var _a$data = _a.data,
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
     _a$columns = _a.columns,
@@ -494,29 +495,25 @@ var useTable = function useTable(_a) {
       return row.children && row.children.length || onLoadChildren && !row.isLeaf;
     }) : false;
   }, [data, onLoadChildren]);
-  var _useState3 = React.useState(null),
+  var sortOrderColumn = React.useMemo(function () {
+    return index.getColumnByDefaultSortOrder(columns);
+  }, [columns]);
+  var _useState3 = React.useState((_b = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.dataKey) !== null && _b !== void 0 ? _b : null),
     activeSorterColumn = _useState3[0],
     setActiveSorterColumn = _useState3[1];
-  var _useState4 = React.useState(null),
+  var _useState4 = React.useState((_d = (_c = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.defaultSortOrder) !== null && _c !== void 0 ? _c : sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.sortOrder) !== null && _d !== void 0 ? _d : null),
     activeSorterType = _useState4[0],
     setActiveSorterType = _useState4[1];
+  React.useEffect(function () {
+    var _a, _b, _c;
+    setActiveSorterColumn((_a = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.dataKey) !== null && _a !== void 0 ? _a : null);
+    setActiveSorterType((_c = (_b = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.defaultSortOrder) !== null && _b !== void 0 ? _b : sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.sortOrder) !== null && _c !== void 0 ? _c : null);
+  }, [sortOrderColumn]);
   //* *************** 根据排序列处理数据 ************** *//
   var showData = React.useMemo(function () {
     var _data = [].concat(transitionData);
     if (activeSorterColumn) {
-      var sortedColumn = {};
-      var findColumn = function findColumn(columns) {
-        columns.forEach(function (item) {
-          if (item.dataKey === activeSorterColumn) {
-            sortedColumn = item;
-            return;
-          }
-          if (item.children) {
-            findColumn(item.children);
-          }
-        });
-      };
-      findColumn(columns);
+      var sortedColumn = index.getColumnByDataKey(columns, activeSorterColumn);
       var sorter = sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sorter;
       if (sorter) {
         activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse();

package/lib/cjs/utils/index.js

@@ -13,6 +13,39 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 var typeAssertion = require('@hi-ui/type-assertion');
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
 var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWidth) {
   var _columns = columns.concat();
   var setWidth = function setWidth(_columns) {
@@ -153,7 +186,39 @@ var getTotalOrEvgRowData = function getTotalOrEvgRowData(_data, c, isAvg) {
   }
   return maxPointCount > 0 ? columnSumData.toFixed(maxPointCount) : columnSumData;
 };
+/**
+ * 获取指定列
+ */
+var getColumnByDataKey = function getColumnByDataKey(columns, dataKey) {
+  for (var _iterator = _createForOfIteratorHelperLoose(columns), _step; !(_step = _iterator()).done;) {
+    var column = _step.value;
+    if (column.dataKey === dataKey) {
+      return column;
+    }
+    if (column.children) {
+      return getColumnByDataKey(column.children, dataKey);
+    }
+  }
+  return {};
+};
+/**
+ * 获取默认排序的列
+ */
+var getColumnByDefaultSortOrder = function getColumnByDefaultSortOrder(columns) {
+  for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
+    var column = _step2.value;
+    if (column.defaultSortOrder || column.sortOrder) {
+      return column;
+    }
+    if (column.children) {
+      return getColumnByDefaultSortOrder(column.children);
+    }
+  }
+  return {};
+};
 exports.checkNeedTotalOrEvg = checkNeedTotalOrEvg;
+exports.getColumnByDataKey = getColumnByDataKey;
+exports.getColumnByDefaultSortOrder = getColumnByDefaultSortOrder;
 exports.getGroupItemWidth = getGroupItemWidth;
 exports.getTotalOrEvgRowData = getTotalOrEvgRowData;
 exports.parseFixedColumns = parseFixedColumns;

package/lib/esm/TableBody.js

@@ -41,7 +41,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref) {
     measureRowElementRef = _useTableContext.measureRowElementRef,
     scrollbar = _useTableContext.scrollbar,
     scrollLeft = _useTableContext.scrollLeft,
-    innerRef = _useTableContext.innerRef;
+    innerRef = _useTableContext.innerRef,
+    rowClassName = _useTableContext.rowClassName;
   var virtualListRef = useRef(null);
   var listRef = useRef(null);
   var cls = cx(prefixCls + "-body");
@@ -133,7 +134,8 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref) {
           key: row.id,
           // @ts-ignore
           rowIndex: index,
-          rowData: row
+          rowData: row,
+          className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index)
         }, getRequiredProps(row.id))));
       }
     }))) : renderEmptyContent(Object.assign({

package/lib/esm/TableRow.js

@@ -164,6 +164,7 @@ var TableRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }), flattedColumnsWithoutChildren.map(function (column, idx) {
       return /*#__PURE__*/React__default.createElement(TableCell, {
         key: idx,
+        className: cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(rowDataProp, column, idx),
         column: column,
         isSwitcherCol: firstColumn ? firstColumn.id === column.id : false,
         rowData: rowDataProp,

package/lib/esm/use-table.js

@@ -17,7 +17,7 @@ import { invariant } from '@hi-ui/env';
 import { setAttrStatus } from '@hi-ui/dom-utils';
 import { useCache } from '@hi-ui/use-cache';
 import { useLatestCallback } from '@hi-ui/use-latest';
-import { setColumnsDefaultWidth, parseFixedColumns } from './utils/index.js';
+import { setColumnsDefaultWidth, parseFixedColumns, getColumnByDefaultSortOrder, getColumnByDataKey } from './utils/index.js';
 import { useAsyncSwitch } from './hooks/use-async-switch.js';
 import { useExpand } from './hooks/use-expand.js';
 import { useChange } from './hooks/use-change.js';
@@ -33,6 +33,7 @@ var DEFAULT_HIGHLIGHTED_COL_KEYS = [];
 var DEFAULT_EXPAND_ROW_KEYS = [];
 var DEFAULT_FIXED_TO_COLUMN = {};
 var useTable = function useTable(_a) {
+  var _b, _c, _d;
   var _a$data = _a.data,
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
     _a$columns = _a.columns,
@@ -482,29 +483,25 @@ var useTable = function useTable(_a) {
       return row.children && row.children.length || onLoadChildren && !row.isLeaf;
     }) : false;
   }, [data, onLoadChildren]);
-  var _useState3 = useState(null),
+  var sortOrderColumn = useMemo(function () {
+    return getColumnByDefaultSortOrder(columns);
+  }, [columns]);
+  var _useState3 = useState((_b = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.dataKey) !== null && _b !== void 0 ? _b : null),
     activeSorterColumn = _useState3[0],
     setActiveSorterColumn = _useState3[1];
-  var _useState4 = useState(null),
+  var _useState4 = useState((_d = (_c = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.defaultSortOrder) !== null && _c !== void 0 ? _c : sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.sortOrder) !== null && _d !== void 0 ? _d : null),
     activeSorterType = _useState4[0],
     setActiveSorterType = _useState4[1];
+  useEffect(function () {
+    var _a, _b, _c;
+    setActiveSorterColumn((_a = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.dataKey) !== null && _a !== void 0 ? _a : null);
+    setActiveSorterType((_c = (_b = sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.defaultSortOrder) !== null && _b !== void 0 ? _b : sortOrderColumn === null || sortOrderColumn === void 0 ? void 0 : sortOrderColumn.sortOrder) !== null && _c !== void 0 ? _c : null);
+  }, [sortOrderColumn]);
   //* *************** 根据排序列处理数据 ************** *//
   var showData = useMemo(function () {
     var _data = [].concat(transitionData);
     if (activeSorterColumn) {
-      var sortedColumn = {};
-      var findColumn = function findColumn(columns) {
-        columns.forEach(function (item) {
-          if (item.dataKey === activeSorterColumn) {
-            sortedColumn = item;
-            return;
-          }
-          if (item.children) {
-            findColumn(item.children);
-          }
-        });
-      };
-      findColumn(columns);
+      var sortedColumn = getColumnByDataKey(columns, activeSorterColumn);
       var sorter = sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sorter;
       if (sorter) {
         activeSorterType === 'ascend' ? _data.sort(sorter) : _data.sort(sorter).reverse();

package/lib/esm/utils/index.js

@@ -8,6 +8,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { isNumeric } from '@hi-ui/type-assertion';
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
 var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWidth) {
   var _columns = columns.concat();
   var setWidth = function setWidth(_columns) {
@@ -148,4 +181,34 @@ var getTotalOrEvgRowData = function getTotalOrEvgRowData(_data, c, isAvg) {
   }
   return maxPointCount > 0 ? columnSumData.toFixed(maxPointCount) : columnSumData;
 };
-export { checkNeedTotalOrEvg, getGroupItemWidth, getTotalOrEvgRowData, parseFixedColumns, parseLocalArray, setColumnsDefaultWidth, uuid };
+/**
+ * 获取指定列
+ */
+var getColumnByDataKey = function getColumnByDataKey(columns, dataKey) {
+  for (var _iterator = _createForOfIteratorHelperLoose(columns), _step; !(_step = _iterator()).done;) {
+    var column = _step.value;
+    if (column.dataKey === dataKey) {
+      return column;
+    }
+    if (column.children) {
+      return getColumnByDataKey(column.children, dataKey);
+    }
+  }
+  return {};
+};
+/**
+ * 获取默认排序的列
+ */
+var getColumnByDefaultSortOrder = function getColumnByDefaultSortOrder(columns) {
+  for (var _iterator2 = _createForOfIteratorHelperLoose(columns), _step2; !(_step2 = _iterator2()).done;) {
+    var column = _step2.value;
+    if (column.defaultSortOrder || column.sortOrder) {
+      return column;
+    }
+    if (column.children) {
+      return getColumnByDefaultSortOrder(column.children);
+    }
+  }
+  return {};
+};
+export { checkNeedTotalOrEvg, getColumnByDataKey, getColumnByDefaultSortOrder, getGroupItemWidth, getTotalOrEvgRowData, parseFixedColumns, parseLocalArray, setColumnsDefaultWidth, uuid };

package/lib/types/types.d.ts

@@ -80,6 +80,7 @@ export interface TableColumnItemRenderReturn {
         rowSpan?: number;
     };
 }
+export declare type TableColumnSortOrder = 'ascend' | 'descend' | null;
 export declare type TableColumnItem = {
     /**
      * 列标题
@@ -101,6 +102,14 @@ export declare type TableColumnItem = {
      * 列对齐方式
      */
     align?: TableColumnItemAlignEnum;
+    /**
+     * 排序顺序
+     */
+    sortOrder?: TableColumnSortOrder;
+    /**
+     * 默认排序顺序
+     */
+    defaultSortOrder?: TableColumnSortOrder;
     /**
      * 列排序函数
      */

package/lib/types/utils/index.d.ts

@@ -16,3 +16,11 @@ export declare const uuid: () => string;
 export declare const parseLocalArray: ({ key, defaultValue }: any) => any;
 export declare const checkNeedTotalOrEvg: (_data: any[], item: any, calcKey: string) => boolean;
 export declare const getTotalOrEvgRowData: (_data: any[], c: any, isAvg: boolean) => any;
+/**
+ * 获取指定列
+ */
+export declare const getColumnByDataKey: (columns: TableColumnItem[], dataKey: string) => TableColumnItem;
+/**
+ * 获取默认排序的列
+ */
+export declare const getColumnByDefaultSortOrder: (columns: TableColumnItem[]) => TableColumnItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "4.9.2",
+  "version": "4.10.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",