feat: split render and group render for clearer intent

material-table-core · Jan 5, 2023 · 7e1072f · 7e1072f
1 parent 0225a8e
commit 7e1072f
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 81 deletions.
diff --git a/src/components/MTableCell/cellUtils.js b/src/components/MTableCell/cellUtils.js
@@ -52,12 +52,17 @@ export function getRenderValue(props, icons) {
   ) {
     return getEmptyValue(props.columnDef.emptyValue, props);
   }
-  if (props.columnDef.render) {
-    if (props.rowData) {
-      return props.columnDef.render(props.rowData, 'row');
-    } else if (props.value) {
-      return props.columnDef.render(props.value, 'group');
+  if (props.render && props.rowData) {
+    return props.columnDef.render(props.rowData);
+  } else if ((props.groupRender || props.render) && props.value) {
+    let renderValue = props.columnDef.groupRender(props.value);
+    if (process.env.NODE_ENV === 'development' && renderValue === undefined) {
+      renderValue = props.columnDef.render(props.rowData, 'group');
+      console.warn(
+        'The group value function returned undefined. This will be deprecated in the future for the new column.groupRender to improve the parsing between cell and group rendering.'
+      );
     }
+    return renderValue;
   } else if (props.columnDef.type === 'boolean') {
     const style = { textAlign: 'left', verticalAlign: 'middle', width: 48 };
     if (props.value) {

diff --git a/src/components/MTableFilterRow/index.js b/src/components/MTableFilterRow/index.js
@@ -35,92 +35,87 @@ export function MTableFilterRow(props) {
     }
   }
 
-  function render() {
-    const columns = props.columns
-      .filter(
-        (columnDef) =>
-          !columnDef.hidden && !(columnDef.tableData.groupOrder > -1)
-      )
-      .sort((a, b) => a.tableData.columnOrder - b.tableData.columnOrder)
-      .map((columnDef) => (
-        <TableCell
-          key={columnDef.tableData.id}
-          style={{
-            ...options.filterCellStyle,
-            ...columnDef.filterCellStyle
-          }}
-        >
-          {getComponentForColumn(columnDef)}
-        </TableCell>
-      ));
+  const columns = props.columns
+    .filter(
+      (columnDef) => !columnDef.hidden && !(columnDef.tableData.groupOrder > -1)
+    )
+    .sort((a, b) => a.tableData.columnOrder - b.tableData.columnOrder)
+    .map((columnDef) => (
+      <TableCell
+        key={columnDef.tableData.id}
+        style={{
+          ...options.filterCellStyle,
+          ...columnDef.filterCellStyle
+        }}
+      >
+        {getComponentForColumn(columnDef)}
+      </TableCell>
+    ));
 
-    if (options.selection) {
-      columns.splice(
-        0,
-        0,
-        <TableCell padding="none" key="key-selection-column" />
-      );
-    }
+  if (options.selection) {
+    columns.splice(
+      0,
+      0,
+      <TableCell padding="none" key="key-selection-column" />
+    );
+  }
 
-    if (props.hasActions) {
-      if (options.actionsColumnIndex === -1) {
-        columns.push(<TableCell key="key-action-column" />);
-      } else {
-        let endPos = 0;
-        if (props.selection) {
-          endPos = 1;
-        }
-        columns.splice(
-          options.actionsColumnIndex + endPos,
-          0,
-          <TableCell key="key-action-column" />
-        );
+  if (props.hasActions) {
+    if (options.actionsColumnIndex === -1) {
+      columns.push(<TableCell key="key-action-column" />);
+    } else {
+      let endPos = 0;
+      if (props.selection) {
+        endPos = 1;
       }
-    }
-
-    if (props.hasDetailPanel && options.showDetailPanelIcon) {
-      const index =
-        options.detailPanelColumnAlignment === 'left' ? 0 : columns.length;
       columns.splice(
-        index,
+        options.actionsColumnIndex + endPos,
         0,
-        <TableCell padding="none" key="key-detail-panel-column" />
+        <TableCell key="key-action-column" />
       );
     }
+  }
 
-    if (props.isTreeData > 0) {
+  if (props.hasDetailPanel && options.showDetailPanelIcon) {
+    const index =
+      options.detailPanelColumnAlignment === 'left' ? 0 : columns.length;
+    columns.splice(
+      index,
+      0,
+      <TableCell padding="none" key="key-detail-panel-column" />
+    );
+  }
+
+  if (props.isTreeData > 0) {
+    columns.splice(
+      0,
+      0,
+      <TableCell padding="none" key={'key-tree-data-filter'} />
+    );
+  }
+
+  props.columns
+    .filter((columnDef) => columnDef.tableData.groupOrder > -1)
+    .forEach((columnDef) => {
       columns.splice(
         0,
         0,
-        <TableCell padding="none" key={'key-tree-data-filter'} />
+        <TableCell
+          padding="checkbox"
+          key={'key-group-filter' + columnDef.tableData.id}
+        />
       );
-    }
-
-    props.columns
-      .filter((columnDef) => columnDef.tableData.groupOrder > -1)
-      .forEach((columnDef) => {
-        columns.splice(
-          0,
-          0,
-          <TableCell
-            padding="checkbox"
-            key={'key-group-filter' + columnDef.tableData.id}
-          />
-        );
-      });
-
-    return (
-      <TableRow
-        id="m--table--filter--row"
-        ref={props.forwardedRef}
-        style={{ height: 10, ...options.filterRowStyle }}
-      >
-        {columns}
-      </TableRow>
-    );
-  }
+    });
 
-  return render();
+  return (
+    <TableRow
+      id="m--table--filter--row"
+      ref={props.forwardedRef}
+      style={{ height: 10, ...options.filterRowStyle }}
+    >
+      {columns}
+    </TableRow>
+  );
 }
 
 MTableFilterRow.defaultProps = {

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -258,9 +258,18 @@ export interface Column<RowData extends object> {
   validate?: (
     rowData: RowData
   ) => { isValid: boolean; helperText?: string } | string | boolean;
-  render?:
-    | ((data: RowData, type: 'row') => React.ReactNode) // The normal render of the table cell
-    | ((data: string, type: 'group') => React.ReactNode); // The render for the group wording
+  /**
+   * Overrides the display of the cell for the column. It passes the rowData and expects a react node to render
+   *
+   * @memberof Column
+   */
+  render?: (data: RowData) => React.ReactNode;
+  /**
+   * Overrides the display of the group title for the column. It passes the grouped key as string and expects a react node to render
+   *
+   * @memberof Column
+   */
+  groupRender?: (groupKey: string) => React.ReactNode;
   // A function to be called for each column during the csv export to manipulate the exported data
   exportTransformer?: (row: RowData) => unknown;
   searchable?: boolean;