From 81dafa50a44ab49940140fd9914887ec4d4683d6 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 12 Sep 2024 16:35:01 +0800
Subject: [PATCH 1/7] feat(table): add class to identify expanded and folded
 row when expandRowKeys is defined

---
 src/table/BaseTable.tsx                   |  2 ++
 src/table/PrimaryTable.tsx                | 12 ++++++---
 src/table/TR.tsx                          | 20 ++++++++++----
 src/table/defaultProps.ts                 |  2 +-
 src/table/hooks/useClassName.ts           |  2 ++
 src/table/hooks/useRowExpand.tsx          |  4 +++
 src/table/interface.ts                    |  4 +++
 test/snap/__snapshots__/csr.test.jsx.snap | 32 +++++++++++------------
 test/snap/__snapshots__/ssr.test.jsx.snap |  2 +-
 9 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
index 712749f988..18f0f5e726 100644
--- a/src/table/BaseTable.tsx
+++ b/src/table/BaseTable.tsx
@@ -55,6 +55,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     resizable,
     lazyLoad,
     pagination,
+    expandedRowKeys,
   } = props;
   const tableRef = useRef<HTMLDivElement>();
   const tableElmRef = useRef<HTMLTableElement>();
@@ -470,6 +471,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     renderExpandedRow: props.renderExpandedRow,
     ...pick(props, extendTableProps),
     pagination: innerPagination,
+    expandedRowKeys,
   };
 
   const translate = `translate(0, ${virtualConfig.scrollHeight}px)`;
diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx
index a62b8f0348..d08d03a3d1 100644
--- a/src/table/PrimaryTable.tsx
+++ b/src/table/PrimaryTable.tsx
@@ -36,8 +36,14 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
   // 自定义列配置功能
   const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce });
   // 展开/收起行功能
-  const { showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick } =
-    useRowExpand(props);
+  const {
+    innerExpandedRowKeys,
+    showExpandedRow,
+    showExpandIconColumn,
+    getExpandColumn,
+    renderExpandedRow,
+    onInnerExpandRowClick,
+  } = useRowExpand(props);
   // 排序功能
   const { renderSortIcon } = useSorter(props);
   // 行选中功能
@@ -264,7 +270,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
   if (props.expandOnRowClick || props.selectOnRowClick) {
     baseTableProps.onRowClick = onInnerRowClick;
   }
-
   return (
     <BaseTable
       ref={primaryTableRef}
@@ -272,6 +277,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
       className={classNames(primaryTableClasses, className)}
       style={style}
       onLeafColumnsChange={setDragSortColumns}
+      expandedRowKeys={innerExpandedRowKeys}
     />
   );
 });
diff --git a/src/table/TR.tsx b/src/table/TR.tsx
index 111dac27e9..bf01f03a06 100644
--- a/src/table/TR.tsx
+++ b/src/table/TR.tsx
@@ -5,7 +5,7 @@ import { formatRowAttributes, formatRowClassNames } from './utils';
 import { getRowFixedStyles } from './hooks/useFixed';
 import { RowAndColFixedPosition } from './interface';
 import useClassName from './hooks/useClassName';
-import { TableRowData, RowspanColspan, TdBaseTableProps } from './type';
+import { TableRowData, RowspanColspan } from './type';
 import useLazyLoad from './hooks/useLazyLoad';
 import { getCellKey, SkipSpansValue } from './hooks/useRowspanAndColspan';
 import Cell from './Cell';
@@ -13,7 +13,9 @@ import { PaginationProps } from '../pagination';
 import { VirtualScrollConfig } from '../hooks/useVirtualScroll';
 import { InfinityScroll } from '../common';
 
-export type TrCommonProps = Pick<TdBaseTableProps, TrPropsKeys>;
+import type { BaseTableProps } from './interface';
+
+export type TrCommonProps = Pick<BaseTableProps, TrPropsKeys>;
 
 export const TABLE_PROPS = [
   'rowKey',
@@ -33,6 +35,7 @@ export const TABLE_PROPS = [
   'onRowMouseenter',
   'onRowMouseleave',
   'onRowMouseup',
+  'expandedRowKeys',
 ] as const;
 
 export type TrPropsKeys = (typeof TABLE_PROPS)[number];
@@ -76,6 +79,7 @@ export default function TR(props: TrProps) {
     rowAndColFixedPosition,
     virtualConfig,
     onRowMounted,
+    expandedRowKeys,
   } = props;
 
   const trRef = useRef<HTMLTableRowElement>();
@@ -96,10 +100,17 @@ export default function TR(props: TrProps) {
     [row, rowAttributes, rowIndex],
   );
 
+  const currentRowKey = useMemo(() => get(row, rowKey || 'id'), [row, rowKey]);
+
   const classes = useMemo(() => {
     const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id');
-    return [trStyles?.classes, customClasses];
-  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
+    if (!expandedRowKeys) return [trStyles?.classes, customClasses];
+    return [
+      trStyles?.classes,
+      classNames.tableExpandClasses[expandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'],
+      customClasses,
+    ];
+  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes, currentRowKey, classNames, expandedRowKeys]);
 
   const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]);
   const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentRef.current, trRef, useLazyLoadParams);
@@ -113,7 +124,6 @@ export default function TR(props: TrProps) {
     }
     // eslint-disable-next-line
   }, [virtualConfig.isVirtualScroll, trRef, row]);
-
   const columnVNodeList = props.columns?.map((col, colIndex) => {
     const cellSpans: RowspanColspan = {};
     const params = {
diff --git a/src/table/defaultProps.ts b/src/table/defaultProps.ts
index 3e0343bd79..82a2ec0abd 100644
--- a/src/table/defaultProps.ts
+++ b/src/table/defaultProps.ts
@@ -40,7 +40,7 @@ export const primaryTableDefaultProps: Pick<
   columnControllerVisible: undefined,
   columns: [],
   expandIcon: true,
-  defaultExpandedRowKeys: [],
+  defaultExpandedRowKeys: undefined,
   multipleSort: false,
   reserveSelectedRowOnPaginate: true,
   defaultSelectedRowKeys: [],
diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts
index 353d89d83c..5506a41f7d 100644
--- a/src/table/hooks/useClassName.ts
+++ b/src/table/hooks/useClassName.ts
@@ -108,6 +108,8 @@ export default function useClassName() {
       tableExpandClasses: {
         iconBox: `${classPrefix}-table__expand-box`,
         iconCell: `${classPrefix}-table__expandable-icon-cell`,
+        rowExpanded: `${classPrefix}-table__row--expanded`,
+        rowFolded: `${classPrefix}-table__row--folded`,
         row: `${classPrefix}-table__expanded-row`,
         rowInner: `${classPrefix}-table__expanded-row-inner`,
         expanded: `${classPrefix}-table__row--expanded`,
diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx
index 65a0a3a1e4..4dec03ad67 100644
--- a/src/table/hooks/useRowExpand.tsx
+++ b/src/table/hooks/useRowExpand.tsx
@@ -29,6 +29,9 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     defaultExpandedRowKeys: props.defaultExpandedRowKeys || [],
   });
 
+  // 用于在可展开收起的场景给各行添加类名使用,如果没有配置则不加相关类名
+  const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined;
+
   const showExpandedRow = Boolean(expandedRow);
 
   const showExpandIconColumn = props.expandIcon !== false && showExpandedRow;
@@ -117,5 +120,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
+    innerExpandedRowKeys,
   };
 }
diff --git a/src/table/interface.ts b/src/table/interface.ts
index af8fccb475..e7828394e3 100644
--- a/src/table/interface.ts
+++ b/src/table/interface.ts
@@ -27,6 +27,10 @@ export interface BaseTableProps<T extends TableRowData = TableRowData> extends T
    * 表头是否可拖拽。非公开属性,请勿在业务中使用
    */
   thDraggable?: boolean;
+  /**
+   * 当前展开行的 key 的数组。非公开属性,请勿在业务中使用
+   */
+  expandedRowKeys?: (string | number)[];
 }
 
 /**
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 5d0786d1fb..b80363eade 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -93711,7 +93711,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = `
               class="t-table__body"
             >
               <tr
-                class=""
+                class="t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -93780,7 +93780,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class=""
+                class="t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -93849,7 +93849,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class=""
+                class="t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -93918,7 +93918,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class=""
+                class="t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -93987,7 +93987,7 @@ exports[`csr snapshot test > csr test src/table/_example/expandable.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class=""
+                class="t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -112837,7 +112837,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
               style="transform: translateY(0px);"
             >
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -112927,7 +112927,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113017,7 +113017,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113107,7 +113107,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113197,7 +113197,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113287,7 +113287,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113377,7 +113377,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113467,7 +113467,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113557,7 +113557,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113647,7 +113647,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table-tr--level-0"
+                class="t-table__row--folded t-table-tr--level-0"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -134505,7 +134505,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/ellipsis.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/table/_example/empty.tsx 1`] = `"<div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\">Empty Data</div></td></tr></tbody></table></div></div><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\"><span style=\\"display:flex;align-items:center;justify-content:center;height:100px\\">😄 it is empty. 😁</span></div></td></tr></tbody></table></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;true&#x27;\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;false&#x27;\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;custom&#x27;\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;true&#x27;\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;false&#x27;\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;custom&#x27;\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/table/_example/filter-controlled.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">清空已筛选</span></button></div><div class=\\"t-space-item\\"><span>已选筛选条件:<!-- -->{&quot;lastName&quot;:[]}</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>申请状态</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>签署方式</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"email\\" class=\\"t-table__th-email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Email</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--sortable t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Date</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__cell--sort-trigger t-table__double-icons\\"><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-asc t-negative-rotate-180\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-desc\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span></div><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">p.cumx@rampblpa.ru</td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-01-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 0 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\" spellcheck=\\"false\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number t-is-current\\">1</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\" spellcheck=\\"false\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 1 </span></span></div></div></div></div></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index ede6996953..c4d3d7d792 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -964,7 +964,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/ellipsis.tsx 1`] = `"<d
 
 exports[`ssr snapshot test > ssr test src/table/_example/empty.tsx 1`] = `"<div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\">Empty Data</div></td></tr></tbody></table></div></div><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:150px\\"/><col style=\\"width:300px\\"/><col style=\\"width:150px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"project\\" class=\\"t-table__th-project\\"><div class=\\"t-table__th-cell-inner\\">项目名称</div></th><th data-colkey=\\"member\\" class=\\"t-table__th-member\\"><div class=\\"t-table__th-cell-inner\\">管理员</div></th><th data-colkey=\\"company\\" class=\\"t-table__th-company\\"><div class=\\"t-table__th-cell-inner\\">所属公司</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__empty-row\\"><td colSpan=\\"3\\"><div class=\\"t-table__empty\\"><span style=\\"display:flex;align-items:center;justify-content:center;height:100px\\">😄 it is empty. 😁</span></div></td></tr></tbody></table></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;true&#x27;\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;false&#x27;\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;custom&#x27;\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/table/_example/expandable.tsx 1`] = `"<div style=\\"width:100%;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;true&#x27;\\" checked=\\"\\" value=\\"true\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 显示展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;false&#x27;\\" value=\\"false\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 隐藏展开图标 </span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;custom&#x27;\\" value=\\"custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\"> 自由控制展开图标 </span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div><div class=\\"t-space-item\\"><div><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">允许点击行之后展开/收起</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">固定列</span></label><label tabindex=\\"0\\" class=\\"t-checkbox\\" style=\\"margin-left:32px\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">空数据</span></label></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\" style=\\"width:1200px\\"><colgroup><col style=\\"width:46px\\"/><col style=\\"width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"__EXPAND_ROW_ICON_COLUMN__\\" class=\\"t-table__expandable-icon-cell t-table__th-__EXPAND_ROW_ICON_COLUMN__\\"><div class=\\"t-table__th-cell-inner\\"></div></th><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th><th data-colkey=\\"operation\\" class=\\"t-table__th-operation\\"><div class=\\"t-table__th-cell-inner\\">操作</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">查看详情</a></td></tr><tr class=\\"t-table__row--folded\\"><td class=\\"t-table__expandable-icon-cell\\"><span class=\\"t-table__expand-box t-table__row--collapsed\\"></span></td><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td><td class=\\"\\"><a class=\\"t-link t-link--theme-primary t-link--hover-color\\">再次申请</a></td></tr></tbody></table></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/table/_example/filter-controlled.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">清空已筛选</span></button></div><div class=\\"t-space-item\\"><span>已选筛选条件:<!-- -->{&quot;lastName&quot;:[]}</span></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>申请状态</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>签署方式</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"email\\" class=\\"t-table__th-email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Email</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__cell--sortable t-table__cell--filterable\\"><div class=\\"t-table__cell--title\\"><div>Date</div><div class=\\"t-table__filter-icon-wrap\\"><div class=\\"t-table__cell--sort-trigger t-table__double-icons\\"><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-asc t-negative-rotate-180\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span><span class=\\"t-icon-sort--default t-table__sort-icon t-table-sort-desc\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-caret-down-small\\" style=\\"font-size:18px\\"><path fill=\\"currentColor\\" d=\\"M12 16.5l7-7H5l7 7z\\"></path></svg></span></div><div class=\\"t-table__filter-icon\\"><div><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-filter\\"><path fill=\\"currentColor\\" d=\\"M2.57 3h18.86l-6.93 9.82V21h-5v-8.18L2.57 3zm3.86 2l5.07 7.18V19h1v-6.82L17.57 5H6.43z\\"></path></svg></div></div></div></div></div></div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">p.cumx@rampblpa.ru</td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"\\">w.cezkdudy@lhll.au</td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"\\">r.nmgw@peurezgn.sl</td><td class=\\"\\">2022-01-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 0 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\" spellcheck=\\"false\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number t-is-current\\">1</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next t-is-disabled\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\" spellcheck=\\"false\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 1 </span></span></div></div></div></div></div></div></div></div>"`;
 

From bd469b985156ca2f97eecaf24c14eb0516f3b0fe Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 19 Sep 2024 15:48:48 +0800
Subject: [PATCH 2/7] chore: optimize

---
 src/table/PrimaryTable.tsx       |  3 ++-
 src/table/TR.tsx                 | 12 ++----------
 src/table/hooks/useRowExpand.tsx | 14 +++++++++++++-
 src/table/utils.ts               |  2 +-
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx
index d08d03a3d1..9716e1cfd8 100644
--- a/src/table/PrimaryTable.tsx
+++ b/src/table/PrimaryTable.tsx
@@ -43,6 +43,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
+    getExpandedRowClass,
   } = useRowExpand(props);
   // 排序功能
   const { renderSortIcon } = useSorter(props);
@@ -81,7 +82,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
 
   // 如果想给 TR 添加类名,请在这里补充,不要透传更多额外 Props 到 BaseTable
   const tRowClassNames = (() => {
-    const tClassNames = [props.rowClassName, selectedRowClassNames];
+    const tClassNames = [props.rowClassName, selectedRowClassNames, getExpandedRowClass];
     return tClassNames.filter((v) => v);
   })();
 
diff --git a/src/table/TR.tsx b/src/table/TR.tsx
index bf01f03a06..1e31f863c5 100644
--- a/src/table/TR.tsx
+++ b/src/table/TR.tsx
@@ -79,7 +79,6 @@ export default function TR(props: TrProps) {
     rowAndColFixedPosition,
     virtualConfig,
     onRowMounted,
-    expandedRowKeys,
   } = props;
 
   const trRef = useRef<HTMLTableRowElement>();
@@ -100,17 +99,10 @@ export default function TR(props: TrProps) {
     [row, rowAttributes, rowIndex],
   );
 
-  const currentRowKey = useMemo(() => get(row, rowKey || 'id'), [row, rowKey]);
-
   const classes = useMemo(() => {
     const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id');
-    if (!expandedRowKeys) return [trStyles?.classes, customClasses];
-    return [
-      trStyles?.classes,
-      classNames.tableExpandClasses[expandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'],
-      customClasses,
-    ];
-  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes, currentRowKey, classNames, expandedRowKeys]);
+    return [trStyles?.classes, customClasses];
+  }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
 
   const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]);
   const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentRef.current, trRef, useLazyLoadParams);
diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx
index 4dec03ad67..eaca0a899a 100644
--- a/src/table/hooks/useRowExpand.tsx
+++ b/src/table/hooks/useRowExpand.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, useCallback } from 'react';
 import { ChevronRightCircleIcon as TdChevronRightCircleIcon } from 'tdesign-icons-react';
 import get from 'lodash/get';
 import isFunction from 'lodash/isFunction';
@@ -32,6 +32,17 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
   // 用于在可展开收起的场景给各行添加类名使用,如果没有配置则不加相关类名
   const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined;
 
+  const getExpandedRowClass = useCallback(
+    (params) => {
+      if (!innerExpandedRowKeys) return null;
+      const { row } = params;
+      const { rowKey } = row;
+      const currentRowKey = get(row, rowKey || 'id');
+      return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'];
+    },
+    [tExpandedRowKeys, innerExpandedRowKeys, tableExpandClasses],
+  );
+
   const showExpandedRow = Boolean(expandedRow);
 
   const showExpandIconColumn = props.expandIcon !== false && showExpandedRow;
@@ -121,5 +132,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     renderExpandedRow,
     onInnerExpandRowClick,
     innerExpandedRowKeys,
+    getExpandedRowClass,
   };
 }
diff --git a/src/table/utils.ts b/src/table/utils.ts
index 32fb09024d..3cb0c42c94 100644
--- a/src/table/utils.ts
+++ b/src/table/utils.ts
@@ -61,7 +61,7 @@ export function formatRowClassNames(
   let customClasses: ClassName = [];
   for (let i = 0, len = rowClassList.length; i < len; i++) {
     const rName = rowClassList[i];
-    let tClass = isFunction(rName) ? rName(params) : rName;
+    let tClass = isFunction(rName) ? rName({ ...params, row: { ...params.row, rowKey } }) : rName;
     if (isObject(tClass) && !(tClass instanceof Array)) {
       // 根据下标设置行类名
       tClass[rowIndex] && (tClass = tClass[rowIndex]);

From ba1c5abc4c133fbc35a14cbc27cc53490eae9647 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 19 Sep 2024 15:55:54 +0800
Subject: [PATCH 3/7] chore: remove depreacted

---
 src/table/BaseTable.tsx    | 2 --
 src/table/PrimaryTable.tsx | 2 --
 src/table/TR.tsx           | 7 ++-----
 src/table/interface.ts     | 4 ----
 4 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
index 18f0f5e726..712749f988 100644
--- a/src/table/BaseTable.tsx
+++ b/src/table/BaseTable.tsx
@@ -55,7 +55,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     resizable,
     lazyLoad,
     pagination,
-    expandedRowKeys,
   } = props;
   const tableRef = useRef<HTMLDivElement>();
   const tableElmRef = useRef<HTMLTableElement>();
@@ -471,7 +470,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     renderExpandedRow: props.renderExpandedRow,
     ...pick(props, extendTableProps),
     pagination: innerPagination,
-    expandedRowKeys,
   };
 
   const translate = `translate(0, ${virtualConfig.scrollHeight}px)`;
diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx
index 9716e1cfd8..259faa4b38 100644
--- a/src/table/PrimaryTable.tsx
+++ b/src/table/PrimaryTable.tsx
@@ -37,7 +37,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
   const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce });
   // 展开/收起行功能
   const {
-    innerExpandedRowKeys,
     showExpandedRow,
     showExpandIconColumn,
     getExpandColumn,
@@ -278,7 +277,6 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((originalPr
       className={classNames(primaryTableClasses, className)}
       style={style}
       onLeafColumnsChange={setDragSortColumns}
-      expandedRowKeys={innerExpandedRowKeys}
     />
   );
 });
diff --git a/src/table/TR.tsx b/src/table/TR.tsx
index 1e31f863c5..8ac8b2430d 100644
--- a/src/table/TR.tsx
+++ b/src/table/TR.tsx
@@ -5,7 +5,7 @@ import { formatRowAttributes, formatRowClassNames } from './utils';
 import { getRowFixedStyles } from './hooks/useFixed';
 import { RowAndColFixedPosition } from './interface';
 import useClassName from './hooks/useClassName';
-import { TableRowData, RowspanColspan } from './type';
+import { TableRowData, RowspanColspan, TdBaseTableProps } from './type';
 import useLazyLoad from './hooks/useLazyLoad';
 import { getCellKey, SkipSpansValue } from './hooks/useRowspanAndColspan';
 import Cell from './Cell';
@@ -13,9 +13,7 @@ import { PaginationProps } from '../pagination';
 import { VirtualScrollConfig } from '../hooks/useVirtualScroll';
 import { InfinityScroll } from '../common';
 
-import type { BaseTableProps } from './interface';
-
-export type TrCommonProps = Pick<BaseTableProps, TrPropsKeys>;
+export type TrCommonProps = Pick<TdBaseTableProps, TrPropsKeys>;
 
 export const TABLE_PROPS = [
   'rowKey',
@@ -35,7 +33,6 @@ export const TABLE_PROPS = [
   'onRowMouseenter',
   'onRowMouseleave',
   'onRowMouseup',
-  'expandedRowKeys',
 ] as const;
 
 export type TrPropsKeys = (typeof TABLE_PROPS)[number];
diff --git a/src/table/interface.ts b/src/table/interface.ts
index e7828394e3..af8fccb475 100644
--- a/src/table/interface.ts
+++ b/src/table/interface.ts
@@ -27,10 +27,6 @@ export interface BaseTableProps<T extends TableRowData = TableRowData> extends T
    * 表头是否可拖拽。非公开属性,请勿在业务中使用
    */
   thDraggable?: boolean;
-  /**
-   * 当前展开行的 key 的数组。非公开属性,请勿在业务中使用
-   */
-  expandedRowKeys?: (string | number)[];
 }
 
 /**

From a0279f9f79be08a1277d834d8d92b7ad970f0638 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 19 Sep 2024 15:58:30 +0800
Subject: [PATCH 4/7] chore: lint

---
 src/table/TR.tsx                 |  1 +
 src/table/defaultProps.ts        |  2 +-
 src/table/hooks/useRowExpand.tsx | 14 ++++++--------
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/table/TR.tsx b/src/table/TR.tsx
index 8ac8b2430d..111dac27e9 100644
--- a/src/table/TR.tsx
+++ b/src/table/TR.tsx
@@ -113,6 +113,7 @@ export default function TR(props: TrProps) {
     }
     // eslint-disable-next-line
   }, [virtualConfig.isVirtualScroll, trRef, row]);
+
   const columnVNodeList = props.columns?.map((col, colIndex) => {
     const cellSpans: RowspanColspan = {};
     const params = {
diff --git a/src/table/defaultProps.ts b/src/table/defaultProps.ts
index 82a2ec0abd..3e0343bd79 100644
--- a/src/table/defaultProps.ts
+++ b/src/table/defaultProps.ts
@@ -40,7 +40,7 @@ export const primaryTableDefaultProps: Pick<
   columnControllerVisible: undefined,
   columns: [],
   expandIcon: true,
-  defaultExpandedRowKeys: undefined,
+  defaultExpandedRowKeys: [],
   multipleSort: false,
   reserveSelectedRowOnPaginate: true,
   defaultSelectedRowKeys: [],
diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx
index eaca0a899a..4aaadf2787 100644
--- a/src/table/hooks/useRowExpand.tsx
+++ b/src/table/hooks/useRowExpand.tsx
@@ -10,6 +10,7 @@ import {
   PrimaryTableCellParams,
   TableExpandedRowParams,
   RowEventContext,
+  RowClassNameParams,
 } from '../type';
 import useClassName from './useClassName';
 import useControlled from '../../hooks/useControlled';
@@ -29,22 +30,20 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     defaultExpandedRowKeys: props.defaultExpandedRowKeys || [],
   });
 
-  // 用于在可展开收起的场景给各行添加类名使用,如果没有配置则不加相关类名
-  const innerExpandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys ? tExpandedRowKeys : undefined;
+  const showExpandedRow = Boolean(expandedRow);
 
   const getExpandedRowClass = useCallback(
-    (params) => {
-      if (!innerExpandedRowKeys) return null;
+    (params: RowClassNameParams<TableRowData>) => {
+      // 如果没有配置展开行,则不需要增加展开收起相关的类名
+      if (!showExpandedRow) return null;
       const { row } = params;
       const { rowKey } = row;
       const currentRowKey = get(row, rowKey || 'id');
       return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'];
     },
-    [tExpandedRowKeys, innerExpandedRowKeys, tableExpandClasses],
+    [tExpandedRowKeys, tableExpandClasses, showExpandedRow],
   );
 
-  const showExpandedRow = Boolean(expandedRow);
-
   const showExpandIconColumn = props.expandIcon !== false && showExpandedRow;
 
   const isFirstColumnFixed = props.columns?.[0]?.fixed === 'left';
@@ -131,7 +130,6 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     getExpandColumn,
     renderExpandedRow,
     onInnerExpandRowClick,
-    innerExpandedRowKeys,
     getExpandedRowClass,
   };
 }

From 14446b37ed95dfc85bbbc263df0a6b5115ce8f69 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 19 Sep 2024 16:15:02 +0800
Subject: [PATCH 5/7] chore: update snapshot

---
 test/snap/__snapshots__/csr.test.jsx.snap | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index b80363eade..0b6bd3dde1 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -112837,7 +112837,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
               style="transform: translateY(0px);"
             >
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -112927,7 +112927,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113017,7 +113017,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113107,7 +113107,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113197,7 +113197,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113287,7 +113287,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113377,7 +113377,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113467,7 +113467,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113557,7 +113557,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"
@@ -113647,7 +113647,7 @@ exports[`csr snapshot test > csr test src/table/_example/tree-select.tsx 1`] = `
                 </td>
               </tr>
               <tr
-                class="t-table__row--folded t-table-tr--level-0"
+                class="t-table-tr--level-0 t-table__row--folded"
               >
                 <td
                   class="t-table__expandable-icon-cell"

From c0b03a2d10bc0cb980539ae343efd569e88dbea9 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Sat, 21 Sep 2024 16:42:05 +0800
Subject: [PATCH 6/7] chore: optimize

---
 src/table/hooks/useRowExpand.tsx | 3 +--
 src/table/type.ts                | 1 +
 src/table/utils.ts               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/table/hooks/useRowExpand.tsx b/src/table/hooks/useRowExpand.tsx
index 4aaadf2787..2aa8b61fb9 100644
--- a/src/table/hooks/useRowExpand.tsx
+++ b/src/table/hooks/useRowExpand.tsx
@@ -36,8 +36,7 @@ export default function useRowExpand(props: TdPrimaryTableProps) {
     (params: RowClassNameParams<TableRowData>) => {
       // 如果没有配置展开行,则不需要增加展开收起相关的类名
       if (!showExpandedRow) return null;
-      const { row } = params;
-      const { rowKey } = row;
+      const { row, rowKey } = params;
       const currentRowKey = get(row, rowKey || 'id');
       return tableExpandClasses[tExpandedRowKeys?.includes(currentRowKey) ? 'rowExpanded' : 'rowFolded'];
     },
diff --git a/src/table/type.ts b/src/table/type.ts
index ad8fc49bae..363c9223c2 100644
--- a/src/table/type.ts
+++ b/src/table/type.ts
@@ -963,6 +963,7 @@ export type TableRowAttributes<T> =
 export interface RowClassNameParams<T> {
   row: T;
   rowIndex: number;
+  rowKey: string;
   type?: 'body' | 'foot';
 }
 
diff --git a/src/table/utils.ts b/src/table/utils.ts
index 3cb0c42c94..250f41fa20 100644
--- a/src/table/utils.ts
+++ b/src/table/utils.ts
@@ -61,7 +61,7 @@ export function formatRowClassNames(
   let customClasses: ClassName = [];
   for (let i = 0, len = rowClassList.length; i < len; i++) {
     const rName = rowClassList[i];
-    let tClass = isFunction(rName) ? rName({ ...params, row: { ...params.row, rowKey } }) : rName;
+    let tClass = isFunction(rName) ? rName({ ...params, rowKey }) : rName;
     if (isObject(tClass) && !(tClass instanceof Array)) {
       // 根据下标设置行类名
       tClass[rowIndex] && (tClass = tClass[rowIndex]);

From a2f7a034d7792df84bfb02fac147d1411b39fe6d Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Sat, 21 Sep 2024 16:45:46 +0800
Subject: [PATCH 7/7] chore: optimize

---
 src/table/TR.tsx   | 2 +-
 src/table/type.ts  | 2 +-
 src/table/utils.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/table/TR.tsx b/src/table/TR.tsx
index 111dac27e9..cf4ae5dbe3 100644
--- a/src/table/TR.tsx
+++ b/src/table/TR.tsx
@@ -97,7 +97,7 @@ export default function TR(props: TrProps) {
   );
 
   const classes = useMemo(() => {
-    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, type: 'body' }, rowKey || 'id');
+    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, rowKey, type: 'body' }, rowKey || 'id');
     return [trStyles?.classes, customClasses];
   }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
 
diff --git a/src/table/type.ts b/src/table/type.ts
index 363c9223c2..055bda1b2e 100644
--- a/src/table/type.ts
+++ b/src/table/type.ts
@@ -963,7 +963,7 @@ export type TableRowAttributes<T> =
 export interface RowClassNameParams<T> {
   row: T;
   rowIndex: number;
-  rowKey: string;
+  rowKey?: string;
   type?: 'body' | 'foot';
 }
 
diff --git a/src/table/utils.ts b/src/table/utils.ts
index 250f41fa20..32fb09024d 100644
--- a/src/table/utils.ts
+++ b/src/table/utils.ts
@@ -61,7 +61,7 @@ export function formatRowClassNames(
   let customClasses: ClassName = [];
   for (let i = 0, len = rowClassList.length; i < len; i++) {
     const rName = rowClassList[i];
-    let tClass = isFunction(rName) ? rName({ ...params, rowKey }) : rName;
+    let tClass = isFunction(rName) ? rName(params) : rName;
     if (isObject(tClass) && !(tClass instanceof Array)) {
       // 根据下标设置行类名
       tClass[rowIndex] && (tClass = tClass[rowIndex]);