feat: table 的总结行增加 affixRowClassNameExpr prefixRowClassNameExpr 属性 (#3990)

docs/zh-CN/components/table.md

@@ -1434,6 +1434,45 @@ popOver 的其它配置请参考 [popover](./popover)
 }
 ```
 
+> 1.8.1 及以上版本
+
+新增 `affixRowClassNameExpr`、`affixRowClassName`、`prefixRowClassNameExpr`、`prefixRowClassName` 来控制总结行样式，比如下面的例子
+
+```schema: scope="body"
+{
+    "type": "service",
+    "api": "/api/mock2/sample?perPage=10",
+    "body": [
+        {
+            "type": "table",
+            "source": "$rows",
+            "columns": [
+                {
+                    "name": "browser",
+                    "label": "Browser"
+                },
+
+                {
+                    "name": "version",
+                    "label": "Version"
+                }
+            ],
+            "affixRowClassNameExpr": "${SUM(ARRAYMAP(rows, item => item.version)) > 30 ? 'text-success' : ''}",
+            "affixRow":[
+                {
+                    "type": "text",
+                    "text": "总计"
+                },
+                {
+                    "type": "tpl",
+                    "tpl": "${rows|pick:version|sum}"
+                }
+            ]
+        }
+    ]
+}
+```
+
 ### 配置合并单元格
 
 可以配置 `colSpan` 来设置一列所合并的列数，例如

package.json

@@ -43,7 +43,7 @@
     ]
   },
   "dependencies": {
-    "amis-formula": "^1.3.12",
+    "amis-formula": "^1.3.13",
     "ansi-to-react": "^6.1.6",
     "async": "2.6.0",
     "attr-accept": "2.2.2",

scss/components/_table.scss

@@ -417,9 +417,7 @@
       }
 
       &.is-summary {
-        background: var(--Table-thead-bg);
-        color: var(--Table-thead-color);
-        font-weight: var(--fontWeightNormal);
+        // font-weight: var(--fontWeightNormal);
       }
 
       &.bg-light {

src/renderers/Table/TableBody.tsx

@@ -39,6 +39,8 @@ export interface TableBodyProps extends LocaleProps {
   onAction?: (e: React.UIEvent<any>, action: Action, ctx: object) => void;
   rowClassNameExpr?: string;
   rowClassName?: string;
+  affixRowClassName?: string;
+  prefixRowClassName?: string;
   data?: any;
   prefixRow?: Array<any>;
   affixRow?: Array<any>;
@@ -147,7 +149,15 @@ export class TableBody extends React.Component<TableBodyProps> {
     items?: Array<any>,
     rowIndex?: number
   ) {
-    const {columns, render, data, classnames: cx, rows} = this.props;
+    const {
+      columns,
+      render,
+      data,
+      classnames: cx,
+      rows,
+      prefixRowClassName,
+      affixRowClassName
+    } = this.props;
 
     if (!(Array.isArray(items) && items.length)) {
       return null;
@@ -188,7 +198,12 @@ export class TableBody extends React.Component<TableBodyProps> {
 
     return (
       <tr
-        className={cx('Table-tr', 'is-summary')}
+        className={cx(
+          'Table-tr',
+          'is-summary',
+          position === 'prefix' ? prefixRowClassName : '',
+          position === 'affix' ? affixRowClassName : ''
+        )}
         key={`summary-${position}-${rowIndex || 0}`}
       >
         {result.map((item, index) => {

src/renderers/Table/TableContent.tsx

@@ -46,6 +46,8 @@ export interface TableContentProps extends LocaleProps {
   buildItemProps?: (item: IRow, index: number) => any;
   onAction?: (e: React.UIEvent<any>, action: Action, ctx: object) => void;
   rowClassNameExpr?: string;
+  affixRowClassName?: string;
+  prefixRowClassName?: string;
   rowClassName?: string;
   data?: any;
   prefixRow?: Array<any>;
@@ -113,6 +115,8 @@ export class TableContent extends React.Component<TableContentProps> {
       buildItemProps,
       onAction,
       rowClassNameExpr,
+      affixRowClassName,
+      prefixRowClassName,
       data,
       prefixRow,
       locale,
@@ -186,6 +190,8 @@ export class TableContent extends React.Component<TableContentProps> {
               onAction={onAction}
               rowClassNameExpr={rowClassNameExpr}
               rowClassName={rowClassName}
+              prefixRowClassName={prefixRowClassName}
+              affixRowClassName={affixRowClassName}
               rows={rows}
               columns={columns}
               locale={locale}

src/renderers/Table/index.tsx

@@ -413,6 +413,8 @@ export default class Table extends React.Component<TableProps, object> {
     'saveImmediately',
     'rowClassName',
     'rowClassNameExpr',
+    'affixRowClassNameExpr',
+    'prefixRowClassNameExpr',
     'popOverContainer',
     'headerToolbarClassName',
     'toolbarClassName',
@@ -2504,6 +2506,10 @@ export default class Table extends React.Component<TableProps, object> {
       tableContentClassName,
       translate,
       itemAction,
+      affixRowClassNameExpr,
+      affixRowClassName,
+      prefixRowClassNameExpr,
+      prefixRowClassName,
       autoFillHeight,
       itemActions
     } = this.props;
@@ -2546,6 +2552,8 @@ export default class Table extends React.Component<TableProps, object> {
         data={store.data}
         prefixRow={prefixRow}
         affixRow={affixRow}
+        prefixRowClassName={prefixRowClassName}
+        affixRowClassName={affixRowClassName}
         locale={locale}
         translate={translate}
       />