feat: table add transformCellText for custom render cell #2109

Author: tangjinzhou

components/config-provider/index.jsx

@@ -26,6 +26,7 @@ const ConfigProvider = {
     autoInsertSpaceInButton: PropTypes.bool,
     locale: PropTypes.object,
     pageHeader: PropTypes.object,
+    transformCellText: PropTypes.func,
   },
   provide() {
     const _self = this;
@@ -43,7 +44,14 @@ const ConfigProvider = {
     };
   },
   watch: {
-    ...getWatch(['prefixCls', 'csp', 'autoInsertSpaceInButton', 'locale', 'pageHeader']),
+    ...getWatch([
+      'prefixCls',
+      'csp',
+      'autoInsertSpaceInButton',
+      'locale',
+      'pageHeader',
+      'transformCellText',
+    ]),
   },
   methods: {
     renderEmptyComponent(h, name) {

components/table/Table.jsx

@@ -1164,6 +1164,7 @@ export default {
       dropdownPrefixCls,
       contextLocale,
       getPopupContainer: contextGetPopupContainer,
+      transformCellText,
     }) {
       const { showHeader, locale, getPopupContainer, ...restProps } = getOptionProps(this);
       const data = this.getCurrentPageData();
@@ -1220,6 +1221,7 @@ export default {
           expandIconColumnIndex,
           expandIconAsCell,
           emptyText: mergedLocale.emptyText,
+          transformCellText,
         },
         on: getListeners(this),
         class: classString,
@@ -1230,10 +1232,18 @@ export default {
   },
 
   render() {
-    const { prefixCls: customizePrefixCls, dropdownPrefixCls: customizeDropdownPrefixCls } = this;
+    const {
+      prefixCls: customizePrefixCls,
+      dropdownPrefixCls: customizeDropdownPrefixCls,
+      transformCellText: customizeTransformCellText,
+    } = this;
     const data = this.getCurrentPageData();
-    const { getPopupContainer: getContextPopupContainer } = this.configProvider;
+    const {
+      getPopupContainer: getContextPopupContainer,
+      transformCellText: tct,
+    } = this.configProvider;
     const getPopupContainer = this.getPopupContainer || getContextPopupContainer;
+    const transformCellText = customizeTransformCellText || tct;
     let loading = this.loading;
     if (typeof loading === 'boolean') {
       loading = {
@@ -1263,6 +1273,7 @@ export default {
             dropdownPrefixCls,
             contextLocale: locale,
             getPopupContainer,
+            transformCellText,
           })
         }
       />

components/table/interface.js

@@ -135,6 +135,7 @@ export const TableProps = {
   tableLayout: PropTypes.string,
   getPopupContainer: PropTypes.func,
   expandIcon: PropTypes.func,
+  transformCellText: PropTypes.func,
   // className?: PropTypes.string,
   // style?: React.CSSProperties;
   // children?: React.ReactNode;

components/vc-table/src/Table.jsx

@@ -67,6 +67,7 @@ export default {
       expandRowByClick: PropTypes.bool,
       expandIcon: PropTypes.func,
       tableLayout: PropTypes.string,
+      transformCellText: PropTypes.func,
     },
     {
       data: [],

components/vc-table/src/TableCell.jsx

@@ -21,6 +21,9 @@ export default {
     expandIcon: PropTypes.any,
     component: PropTypes.any,
   },
+  inject: {
+    table: { default: () => ({}) },
+  },
   methods: {
     handleClick(e) {
       const {
@@ -45,6 +48,7 @@ export default {
       component: BodyCell,
     } = this;
     const { dataIndex, customRender, className = '' } = column;
+    const { transformCellText } = this.table;
     // We should return undefined if no dataIndex is specified, but in order to
     // be compatible with object-path's behavior, we return the record object instead.
     let text;
@@ -87,6 +91,10 @@ export default {
       text = null;
     }
 
+    if (transformCellText) {
+      text = transformCellText({ text, column, record, index });
+    }
+
     const indentText = expandIcon ? (
       <span
         style={{ paddingLeft: `${indentSize * indent}px` }}

types/config-provider.d.ts

@@ -13,4 +13,5 @@ export declare class ConfigProvider extends AntdComponent {
   renderEmpty: Function;
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
+  transformCellText?: Function;
 }

types/table/table.d.ts

@@ -300,4 +300,5 @@ export declare class Table extends AntdComponent {
     style: object;
     nativeOn: object;
   };
+  transformCellText: Function;
 }