Merge pull request #390 from yeyuqiudeng/master

table的列标题支持tpl渲染

scss/components/_table.scss

@@ -109,6 +109,17 @@
     @include clearfix();
     display: flex;
     padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;
+
+    .#{$ns}DropDown {
+      &-menuItem {
+        height: auto;
+
+        .#{$ns}Checkbox {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
   }
 
   &-header + &-toolbar {
@@ -211,6 +222,10 @@
         font-weight: $fontWeightNormal;
         white-space: nowrap;
 
+        .#{$ns}TableCell--title {
+          display: flex;
+          align-items: center;
+        }
         .#{$ns}Remark {
           margin-left: $gap-xs;
         }
@@ -455,6 +470,8 @@
     width: $TableCell-sortBtn-width;
     position: absolute;
     right: $TableCell-paddingX - $TableCell-sortBtn-width / 2;
+    top: 50%;
+    transform: translateY(-50%);
     color: $Table-thead-iconColor;
 
     &--up:before {
@@ -478,7 +495,7 @@
     &--up,
     &--down {
       display: none;
-      position: relative;
+      position: absolute;
       z-index: 2;
       font-style: normal;
 
@@ -489,12 +506,9 @@
 
     &--default {
       font-style: normal;
-      position: absolute;
       z-index: 1;
       display: inline-block;
       opacity: $TableCell-sortBtn--default-opacity;
-      top: 0;
-      left: 0;
 
       &.is-active {
         opacity: $TableCell-sortBtn--default-onActive-opacity;
@@ -507,6 +521,8 @@
     width: $TableCell-searchBtn-width;
     position: absolute;
     right: $TableCell-paddingX - $TableCell-searchBtn-width / 2;
+    top: 50%;
+    transform: translateY(-50%);
     color: $text--muted-color;
 
     &:hover {
@@ -529,6 +545,8 @@
     width: $TableCell-filterBtn-width;
     position: absolute;
     right: $TableCell-paddingX - $TableCell-filterBtn-width / 2;
+    top: 50%;
+    transform: translateY(-50%);
     color: $text--muted-color;
 
     &:hover {

src/renderers/Table.tsx

@@ -1077,15 +1077,21 @@ export default class Table extends React.Component<TableProps, object> {
           }
         )}
       >
-        {column.label}
-        {column.remark
-          ? render('remark', {
-              type: 'remark',
-              tooltip: column.remark,
-              container:
-                env && env.getModalContainer ? env.getModalContainer : undefined
-            })
-          : null}
+        <div className={cx(`${ns}TableCell--title`)}>
+          {render('tpl', column.label)}
+
+          {column.remark
+            ? render('remark', {
+                type: 'remark',
+                tooltip: column.remark,
+                container:
+                  env && env.getModalContainer
+                    ? env.getModalContainer
+                    : undefined
+              })
+            : null}
+        </div>
+
         {affix}
       </th>
     );
@@ -1196,7 +1202,7 @@ export default class Table extends React.Component<TableProps, object> {
   }
 
   renderAffixHeader(tableClassName: string) {
-    const {store, affixHeader, classnames: cx} = this.props;
+    const {store, affixHeader, render, classnames: cx} = this.props;
 
     return affixHeader ? (
       <div className={cx('Table-fixedTop')}>
@@ -1230,7 +1236,7 @@ export default class Table extends React.Component<TableProps, object> {
                       data-index={item.index}
                       colSpan={item.colSpan}
                     >
-                      {item.label}
+                      {render('tpl', item.label)}
                     </th>
                   ))}
                 </tr>
@@ -1282,7 +1288,7 @@ export default class Table extends React.Component<TableProps, object> {
             <tr>
               {store.columnGroup.map((item, index) => (
                 <th key={index} data-index={item.index} colSpan={item.colSpan}>
-                  {item.label}
+                  {render('tpl', item.label)}
                 </th>
               ))}
             </tr>
@@ -1320,6 +1326,7 @@ export default class Table extends React.Component<TableProps, object> {
                     )}
                     columns={columns}
                     renderCell={this.renderCell}
+                    render={render}
                     regionPrefix="fixed/"
                     onCheck={this.handleCheck}
                     onAction={onAction}
@@ -1359,6 +1366,8 @@ export default class Table extends React.Component<TableProps, object> {
   renderColumnsToggler(config?: any) {
     const {store, classPrefix: ns, classnames: cx, ...rest} = this.props;
 
+    const render = this.props.render;
+
     if (!store.columnsTogglable) {
       return null;
     }
@@ -1381,7 +1390,7 @@ export default class Table extends React.Component<TableProps, object> {
               checked={column.toggled}
               onChange={column.toggleToggle}
             >
-              {column.label}
+              {render('tpl', column.label)}
             </Checkbox>
           </li>
         ))}
@@ -1594,7 +1603,8 @@ export default class Table extends React.Component<TableProps, object> {
       buildItemProps,
       checkOnItemClick,
       classPrefix: ns,
-      classnames: cx
+      classnames: cx,
+      render
     } = this.props;
 
     return rows.map((item: IRow, rowIndex: number) => {
@@ -1620,6 +1630,7 @@ export default class Table extends React.Component<TableProps, object> {
           )}
           columns={store.filteredColumns}
           renderCell={this.renderCell}
+          render={render}
           onAction={onAction}
           onCheck={this.handleCheck}
           // todo 先注释 quickEditEnabled={item.depth === 1}
@@ -1645,6 +1656,7 @@ export default class Table extends React.Component<TableProps, object> {
                 )}
                 columns={store.footableColumns}
                 renderCell={this.renderCell}
+                render={render}
                 onAction={onAction}
                 onCheck={this.handleCheck}
                 footableMode
@@ -1738,7 +1750,7 @@ export default class Table extends React.Component<TableProps, object> {
                     data-index={item.index}
                     colSpan={item.colSpan}
                   >
-                    {item.label}
+                    {render('tpl', item.label)}
                   </th>
                 ))}
               </tr>
@@ -1828,7 +1840,7 @@ export default class Table extends React.Component<TableProps, object> {
   }
 }
 
-interface TableRowProps {
+interface TableRowProps extends Pick<RendererProps, 'render'> {
   onCheck: (item: IRow) => void;
   classPrefix: string;
   renderCell: (
@@ -1899,6 +1911,7 @@ class TableRow extends React.Component<TableRowProps> {
       regionPrefix,
       checkOnItemClick,
       classPrefix: ns,
+      render,
       ...rest
     } = this.props;
 
@@ -1922,7 +1935,14 @@ class TableRow extends React.Component<TableRowProps> {
               <tbody>
                 {columns.map(column => (
                   <tr key={column.index}>
-                    {column.label !== false ? <th>{column.label}</th> : null}
+                    {column.label !== false ? (
+                      <th>
+                        {render(
+                          `${regionPrefix}${itemIndex}/${column.index}/tpl`,
+                          column.label
+                        )}
+                      </th>
+                    ) : null}
 
                     {renderCell(
                       `${regionPrefix}${itemIndex}/${column.index}`,