From 10e266a741cbaea1646953f981670e89ece6d24d Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 16 Dec 2020 11:59:50 +0530
Subject: [PATCH 01/17] Grouping for custom body cells

---
 package.json                              |  4 +-
 src/MUIDataTable.js                       | 68 ++++++++++++-----------
 src/components/TableBodyGroupHeaderRow.js |  1 -
 src/components/TableBodyGroups.js         |  2 +-
 src/components/TableBodyRows.js           |  2 +-
 5 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index f7619ae8c..3977072fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "mui-datatables",
-  "version": "3.5.0-beta.0",
+  "name": "mui-datatables-vg",
+  "version": "3.5.1-beta.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 6b562f78a..9252e3f9c 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -277,8 +277,8 @@ class MUIDataTable extends React.Component {
     this.draggableHeadCellRefs = {};
     this.resizeHeadCellRefs = {};
     this.timers = {};
-    this.setHeadResizeable = () => {};
-    this.updateDividers = () => {};
+    this.setHeadResizeable = () => { };
+    this.updateDividers = () => { };
 
     let defaultState = {
       activeColumn: null,
@@ -452,12 +452,12 @@ class MUIDataTable extends React.Component {
       ) {
         this.warnDep(
           this.options.responsive +
-            ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+          ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       } else {
         this.warnInfo(
           this.options.responsive +
-            ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+          ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       }
     }
@@ -676,19 +676,19 @@ class MUIDataTable extends React.Component {
 
     const transformedData = Array.isArray(data[0])
       ? data.map(row => {
-          let i = -1;
+        let i = -1;
 
-          return columns.map(col => {
-            if (!col.empty) i++;
-            return col.empty ? undefined : row[i];
-          });
-        })
+        return columns.map(col => {
+          if (!col.empty) i++;
+          return col.empty ? undefined : row[i];
+        });
+      })
       : data.map(row => columns.map(col => leaf(row, col.name)));
 
     return transformedData;
   };
 
-  setTableData(props, status, dataUpdated, callback = () => {}, fromConstructor = false) {
+  setTableData(props, status, dataUpdated, callback = () => { }, fromConstructor = false) {
     let tableData = [];
     let { columns, filterData, filterList, columnOrder } = this.buildColumns(
       props.columns,
@@ -997,8 +997,8 @@ class MUIDataTable extends React.Component {
           typeof funcResult === 'string' || !funcResult
             ? funcResult
             : funcResult.props && funcResult.props.value
-            ? funcResult.props.value
-            : columnValue;
+              ? funcResult.props.value
+              : columnValue;
 
         displayRow.push(columnDisplay);
       } else {
@@ -1226,18 +1226,20 @@ class MUIDataTable extends React.Component {
   }
 
   getGroupingData(displayData, grouping) {
-    if (!grouping) return null;
 
-    //console.log('getGroupingData');
-    //console.log(grouping);
+    displayData = displayData.map(row => {
+      let fRow = { ...row };
+      fRow.data = row.data.map(fRow => { return fRow && fRow.props && fRow.props.value ? fRow.props.value : fRow; });
+      return fRow;
+    });
+
+    if (!grouping) return null;
 
     let cols = grouping.columnIndexes;
 
     if (!cols || cols.length === 0) return null;
 
-    //console.dir(displayData);
     let groups = this.getGroups(grouping, cols, displayData, 1, []);
-    //console.dir(groups);
     return groups;
   }
 
@@ -2089,15 +2091,15 @@ class MUIDataTable extends React.Component {
         <div style={{ position: 'relative', ...tableHeightVal }} className={responsiveClass}>
           {(this.options.resizableColumns === true ||
             (this.options.resizableColumns && this.options.resizableColumns.enabled)) && (
-            <TableResizeComponent
-              key={rowCount}
-              columnOrder={columnOrder}
-              updateDividers={fn => (this.updateDividers = fn)}
-              setResizeable={fn => (this.setHeadResizeable = fn)}
-              options={this.props.options}
-              tableId={this.options.tableId}
-            />
-          )}
+              <TableResizeComponent
+                key={rowCount}
+                columnOrder={columnOrder}
+                updateDividers={fn => (this.updateDividers = fn)}
+                setResizeable={fn => (this.setHeadResizeable = fn)}
+                options={this.props.options}
+                tableId={this.options.tableId}
+              />
+            )}
           <DndProvider backend={HTML5Backend} {...dndProps}>
             <MuiTable
               ref={el => (this.tableRef = el)}
@@ -2152,12 +2154,12 @@ class MUIDataTable extends React.Component {
               />
               {this.options.customTableBodyFooterRender
                 ? this.options.customTableBodyFooterRender({
-                    data: displayData,
-                    count: rowCount,
-                    columns,
-                    selectedRows,
-                    selectableRows: this.options.selectableRows,
-                  })
+                  data: displayData,
+                  count: rowCount,
+                  columns,
+                  selectedRows,
+                  selectableRows: this.options.selectableRows,
+                })
                 : null}
             </MuiTable>
           </DndProvider>
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index 4649a607f..ccc333117 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -54,7 +54,6 @@ function TableBodyGroupHeaderRow(props) {
   };
 
   let bodyClasses = options.setRowProps ? options.setRowProps(row, null, null) || {} : {};
-  //console.dir(row);
   return (
     <TableRow
       {...bodyClasses}
diff --git a/src/components/TableBodyGroups.js b/src/components/TableBodyGroups.js
index fd4b3a662..8b41f31c1 100644
--- a/src/components/TableBodyGroups.js
+++ b/src/components/TableBodyGroups.js
@@ -47,7 +47,7 @@ class TableBody extends React.Component {
   };
 
   static defaultProps = {
-    toggleExpandRow: () => {},
+    toggleExpandRow: () => { },
   };
 
   flattenGroups(rows, rootGroup, columns, grouping, isGroupExpanded) {
diff --git a/src/components/TableBodyRows.js b/src/components/TableBodyRows.js
index 281ecc9c0..b5355dff8 100644
--- a/src/components/TableBodyRows.js
+++ b/src/components/TableBodyRows.js
@@ -304,7 +304,7 @@ class TableBodyRows extends React.Component {
               colIndex={0}
               rowIndex={0}>
               <Typography variant="body1" className={classes.emptyTitle} component={'div'}>
-                {options.textLabels ? options.textLabels.body.noMatch : ""}
+                {options.textLabels ? options.textLabels.body.noMatch : ''}
               </Typography>
             </TableBodyCell>
           </TableBodyRow>

From 78e31c1fc3df27168b3415e879278cfeec66870b Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 16 Dec 2020 12:12:46 +0530
Subject: [PATCH 02/17] updated package name

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3977072fd..fa6c9790b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "mui-datatables-vg",
+  "name": "mui-datatables",
   "version": "3.5.1-beta.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",

From 1019d950aa6f2a1db45376934919f8133dff03d2 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Thu, 24 Dec 2020 10:33:07 +0530
Subject: [PATCH 03/17] Made row level grouping header optional using
 rowHeaderVisible property in grouping

---
 examples/grouping/index.js                | 616 +++++++++++++++++++---
 src/MUIDataTable.js                       |   4 +
 src/components/TableBodyGroupHeaderRow.js |   6 +-
 src/components/TableBodyGroups.js         |   4 +-
 4 files changed, 548 insertions(+), 82 deletions(-)

diff --git a/examples/grouping/index.js b/examples/grouping/index.js
index f5712d4d1..dfb18963b 100644
--- a/examples/grouping/index.js
+++ b/examples/grouping/index.js
@@ -1,122 +1,586 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import MUIDataTable from '../../src/';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
 
 function Example() {
-  const [responsive, setResponsive] = useState('vertical');
-  const [tableBodyHeight, setTableBodyHeight] = useState('400px');
-  const [tableBodyMaxHeight, setTableBodyMaxHeight] = useState('');
 
   const columns = [
     {
-      name: 'name',
-      label: 'Name',
+      "label": "Name",
+      "name": "serviceName",
       options: {
         setCellHeaderProps: () => ({
           style: {
-            width: '25%'
+            width: '45%'
           }
         }),
       }
-    }, 
+    },
     {
-      name: 'title',
-      label: 'Title',
+      "label": "Region",
+      "name": "region",
       options: {
-        setCellHeaderProps: () => ({
-          style: {
-            width: '25%'
-          }
-        }),
+        display: false,
       }
-    }, 
+    },
     {
-      name: 'location',
-      label: 'Location',
+      "label": "Sub-Category",
+      "name": "subCat",
       options: {
-        setCellHeaderProps: () => ({
-          style: {
-            width: '25%'
-          }
-        }),
+        display: false,
       }
-    }, 
+    },
+    {
+      "label": "Quantity",
+      "name": "qty",
+      "display": true
+    },
+    {
+      "label": "Provider Rate",
+      "name": "pRate",
+      "display": true
+    },
     {
-      name: 'gender',
-      label: 'Gender'
+      "label": "Provider Cost",
+      "name": "pCost",
+      "display": true
+    },
+    {
+      "label": "Final Rate",
+      "name": "fRate",
+      "display": true
+    },
+    {
+      "label": "Final Cost",
+      "name": "fCost"
     }
   ];
 
   const options = {
-    filter: true,
+    filter: false,
     filterType: 'dropdown',
-    responsive,
+    selectableRows: false,
     pagination: false,
     draggableColumns: {
       enabled: true,
     },
     onTableChange: (action, state) => {
       console.log(action);
-      //console.dir(state);
     },
     onGroupExpansionChange: (group, expanded) => {
-      console.dir(group);
-      console.dir(expanded);
     },
     grouping: {
-      columnIndexes: [1, 3],
-      expanded: {
-        "Business Consultant": {
-          open: true
-        }
-      }
+      columnIndexes: [0,
+        1,
+        2],
+      rowHeaderVisible: false,
     }
   };
 
   const data = [
-    ['Gabby George', 'Business Analyst', 'Minneapolis', 'female'],
-    ['Aiden Lloyd', "Business Consultant", 'Dallas', 'male'],
-    ['Jaden Collins', 'Attorney', 'Santa Ana', 'male'],
-    ['Franky Rees', 'Business Analyst', 'St. Petersburg', 'male'],
-    ['Aaren Rose', null, 'Toledo', 'male'],
-    ['Johnny Jones', 'Business Analyst', 'St. Petersburg', 'male'],
-    ['Jimmy Johns', 'Business Analyst', 'Baltimore', 'male'],
-    ['Jack Jackson', 'Business Analyst', 'El Paso', 'male'],
-    ['Joe Jones', 'Computer Programmer', 'El Paso', 'male'],
-    ['Jacky Jackson', 'Business Consultant', 'Baltimore', 'female'],
-    ['Jo Jo', 'Software Developer', 'Washington DC', 'male'],
-    ['Donna Marie', 'Business Manager', 'Annapolis', 'female'],
-    ['Armin Tamzarian', 'Principal', 'Springfield', 'male'],
-    ['Gerald Strickland', 'Principal', 'Hill Valley', 'male'],
-    ['Doc Brown', 'Computer Programmer', 'Hill Valley', 'male'],
-    ['Angela Li', 'Principal', 'Lawndale', 'female'],
-    ['Jake Morgendorffer', 'Business Analyst', 'Lawndale', 'male'],
+    {
+      "serviceName": "Azure",
+      "region": "North",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 42,
+      "pCost": 0.88,
+      "fRate": 29,
+      "fCost": 75
+    },
+    {
+      "serviceName": "GCP",
+      "region": "US",
+      "subCat": "domain-132",
+      "qty": 1.0,
+      "pRate": 75,
+      "pCost": 0.18,
+      "fRate": 36,
+      "fCost": 71
+    },
+    {
+      "serviceName": "GCP",
+      "region": "US",
+      "subCat": "domain-132",
+      "qty": 1.0,
+      "pRate": 66,
+      "pCost": 0.86,
+      "fRate": 82,
+      "fCost": 57
+    },
+    {
+      "serviceName": "GCP",
+      "region": "US",
+      "subCat": "domain-123",
+      "qty": 1.0,
+      "pRate": 76,
+      "pCost": 0.83,
+      "fRate": 71,
+      "fCost": 77
+    },
+    {
+      "serviceName": "GCP",
+      "region": "Philippines",
+      "subCat": "domain-143",
+      "qty": 1.0,
+      "pRate": 75,
+      "pCost": 1.1,
+      "fRate": 3,
+      "fCost": 84
+    },
+    {
+      "serviceName": "GCP",
+      "region": "US",
+      "subCat": "domain-143",
+      "qty": 1.0,
+      "pRate": 82,
+      "pCost": 0.76,
+      "fRate": 55,
+      "fCost": 2
+    },
+    {
+      "serviceName": "AWS",
+      "region": "US",
+      "subCat": "domain-143",
+      "qty": 1.0,
+      "pRate": 38,
+      "pCost": 0.92,
+      "fRate": 86,
+      "fCost": 23
+    },
+    {
+      "serviceName": "GCP",
+      "region": "East",
+      "subCat": "domain-143",
+      "qty": 1.0,
+      "pRate": 10,
+      "pCost": 0.92,
+      "fRate": 84,
+      "fCost": 25
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "US",
+      "subCat": "domain-123",
+      "qty": 1.0,
+      "pRate": 61,
+      "pCost": 1.61,
+      "fRate": 12,
+      "fCost": 32
+    },
+    {
+      "serviceName": "AWS",
+      "region": "North",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 45,
+      "pCost": 1.51,
+      "fRate": 95,
+      "fCost": 23
+    },
+    {
+      "serviceName": "AWS",
+      "region": "West",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 2,
+      "pCost": 1.98,
+      "fRate": 6,
+      "fCost": 25
+    },
+    {
+      "serviceName": "AWS",
+      "region": "US",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 46,
+      "pCost": 1.42,
+      "fRate": 68,
+      "fCost": 6
+    },
+    {
+      "serviceName": "AWS",
+      "region": "East",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 79,
+      "pCost": 0.34,
+      "fRate": 98,
+      "fCost": 56
+    },
+    {
+      "serviceName": "AWS",
+      "region": "East",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 9,
+      "pCost": 0.94,
+      "fRate": 28,
+      "fCost": 89
+    },
+    {
+      "serviceName": "AWS",
+      "region": "East",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 27,
+      "pCost": 1.69,
+      "fRate": 84,
+      "fCost": 76
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "US",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 35,
+      "pCost": 1.08,
+      "fRate": 19,
+      "fCost": 10
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "Philippines",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 9,
+      "pCost": 0.93,
+      "fRate": 3,
+      "fCost": 23
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "US",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 60,
+      "pCost": 1.66,
+      "fRate": 75,
+      "fCost": 35
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "US",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 64,
+      "pCost": 1.12,
+      "fRate": 88,
+      "fCost": 29
+    },
+    {
+      "serviceName": "GCP",
+      "region": "Philippines",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 92,
+      "pCost": 0.09,
+      "fRate": 17,
+      "fCost": 44
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "US",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 87,
+      "pCost": 0.36,
+      "fRate": 82,
+      "fCost": 12
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "Philippines",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 73,
+      "pCost": 0.66,
+      "fRate": 33,
+      "fCost": 66
+    },
+    {
+      "serviceName": "AWS",
+      "region": "US",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 83,
+      "pCost": 1.13,
+      "fRate": 43,
+      "fCost": 50
+    },
+    {
+      "serviceName": "GCP",
+      "region": "Philippines",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 69,
+      "pCost": 1.24,
+      "fRate": 26,
+      "fCost": 31
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "West",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 95,
+      "pCost": 1.06,
+      "fRate": 85,
+      "fCost": 4
+    },
+    {
+      "serviceName": "AWS",
+      "region": "East",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 65,
+      "pCost": 0.86,
+      "fRate": 12,
+      "fCost": 93
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "Georgia",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 10,
+      "pCost": 0.0,
+      "fRate": 28,
+      "fCost": 65
+    },
+    {
+      "serviceName": "Azure",
+      "region": "France",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 1,
+      "pCost": 0.55,
+      "fRate": 92,
+      "fCost": 46
+    },
+    {
+      "serviceName": "Azure",
+      "region": "West",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 66,
+      "pCost": 0.21,
+      "fRate": 100,
+      "fCost": 32
+    },
+    {
+      "serviceName": "Azure",
+      "region": "India",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 71,
+      "pCost": 1.01,
+      "fRate": 13,
+      "fCost": 89
+    },
+    {
+      "serviceName": "AWS",
+      "region": "East",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 91,
+      "pCost": 0.16,
+      "fRate": 93,
+      "fCost": 92
+    },
+    {
+      "serviceName": "Azure",
+      "region": "East",
+      "subCat": "domain-144",
+      "qty": 1.0,
+      "pRate": 13,
+      "pCost": 0.43,
+      "fRate": 89,
+      "fCost": 85
+    },
+    {
+      "serviceName": "Azure",
+      "region": "Brazil",
+      "subCat": "domain-144",
+      "qty": 1.0,
+      "pRate": 71,
+      "pCost": 1.13,
+      "fRate": 9,
+      "fCost": 26
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "Philippines",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 91,
+      "pCost": 1.81,
+      "fRate": 5,
+      "fCost": 70
+    },
+    {
+      "serviceName": "AWS",
+      "region": "East",
+      "subCat": "domain-133",
+      "qty": 1.0,
+      "pRate": 94,
+      "pCost": 0.61,
+      "fRate": 41,
+      "fCost": 57
+    },
+    {
+      "serviceName": "Azure",
+      "region": "Brazil",
+      "subCat": "domain-133",
+      "qty": 1.0,
+      "pRate": 31,
+      "pCost": 0.02,
+      "fRate": 57,
+      "fCost": 52
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "East",
+      "subCat": "domain-166",
+      "qty": 1.0,
+      "pRate": 96,
+      "pCost": 0.97,
+      "fRate": 51,
+      "fCost": 66
+    },
+    {
+      "serviceName": "GCP",
+      "region": "India",
+      "subCat": "domain-166",
+      "qty": 1.0,
+      "pRate": 37,
+      "pCost": 0.85,
+      "fRate": 65,
+      "fCost": 84
+    },
+    {
+      "serviceName": "AWS",
+      "region": "East",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 16,
+      "pCost": 1.22,
+      "fRate": 3,
+      "fCost": 96
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "North",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 99,
+      "pCost": 0.22,
+      "fRate": 39,
+      "fCost": 17
+    },
+    {
+      "serviceName": "Azure",
+      "region": "France",
+      "subCat": "domain-166",
+      "qty": 1.0,
+      "pRate": 61,
+      "pCost": 0.7,
+      "fRate": 79,
+      "fCost": 64
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "East",
+      "subCat": "domain-166",
+      "qty": 1.0,
+      "pRate": 74,
+      "pCost": 1.9,
+      "fRate": 12,
+      "fCost": 38
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "North",
+      "subCat": "domain-133",
+      "qty": 1.0,
+      "pRate": 98,
+      "pCost": 1.69,
+      "fRate": 92,
+      "fCost": 74
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "North",
+      "subCat": "domain-133",
+      "qty": 1.0,
+      "pRate": 18,
+      "pCost": 1.24,
+      "fRate": 90,
+      "fCost": 86
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "Vietnam",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 83,
+      "pCost": 1.87,
+      "fRate": 47,
+      "fCost": 37
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "Japan",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 87,
+      "pCost": 0.31,
+      "fRate": 75,
+      "fCost": 94
+    },
+    {
+      "serviceName": "AWS",
+      "region": "Ukraine",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 24,
+      "pCost": 0.57,
+      "fRate": 29,
+      "fCost": 65
+    },
+    {
+      "serviceName": "Digital Ocean",
+      "region": "Peru",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 32,
+      "pCost": 1.79,
+      "fRate": 43,
+      "fCost": 6
+    },
+    {
+      "serviceName": "Azure",
+      "region": "Canada",
+      "subCat": "domain-1",
+      "qty": 1.0,
+      "pRate": 1,
+      "pCost": 1.63,
+      "fRate": 89,
+      "fCost": 35
+    },
+    {
+      "serviceName": "GCP",
+      "region": "Indonesia",
+      "subCat": "domain-133",
+      "qty": 1.0,
+      "pRate": 59,
+      "pCost": 1.81,
+      "fRate": 79,
+      "fCost": 58
+    }
   ];
 
   return (
     <React.Fragment>
-      <FormControl>
-        <InputLabel id="demo-simple-select-label">Responsive Option</InputLabel>
-        <Select
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
-          value={responsive}
-          style={{ width: '200px', marginBottom: '10px', marginRight: 10 }}
-          onChange={e => setResponsive(e.target.value)}>
-          <MenuItem value={'vertical'}>vertical</MenuItem>
-          <MenuItem value={'standard'}>standard</MenuItem>
-          <MenuItem value={'simple'}>simple</MenuItem>
-
-          <MenuItem value={'scroll'}>scroll (deprecated)</MenuItem>
-          <MenuItem value={'scrollMaxHeight'}>scrollMaxHeight (deprecated)</MenuItem>
-          <MenuItem value={'stacked'}>stacked (deprecated)</MenuItem>
-        </Select>
-      </FormControl>
       <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
     </React.Fragment>
   );
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 9252e3f9c..b78b7281b 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -914,6 +914,10 @@ class MUIDataTable extends React.Component {
       } else {
         grouping.expanded = {};
       }
+      if (this.options.grouping.rowHeaderVisible === undefined || this.options.grouping.rowHeaderVisible) {
+        grouping.rowHeaderVisible = true;
+      }
+
     } else if (this.state.grouping) {
       grouping = this.state.grouping;
     }
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index ccc333117..bc868041f 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -39,10 +39,10 @@ const useStyles = makeStyles(
 );
 
 function TableBodyGroupHeaderRow(props) {
-  const { columns, options, components = {}, tableId, row } = props;
+  const { columns, options, components = {}, tableId, row, grouping } = props;
   const classes = useStyles();
 
-  const onExpand = () => {};
+  const onExpand = () => { };
 
   const iconClass = clsx({
     [classes.icon]: true,
@@ -70,7 +70,7 @@ function TableBodyGroupHeaderRow(props) {
           onClick={row.onExpansionChange}>
           <KeyboardArrowRight id="expandable-button" className={iconClass} />
         </IconButton>
-        <div className={classes.columnName}>{row.columnLabel}:</div>
+        {grouping && grouping.rowHeaderVisible && <div className={classes.columnName}>{row.columnLabel}:</div>}
         <div className={classes.columnValue}>{row.columnValue}</div>
       </TableCell>
     </TableRow>
diff --git a/src/components/TableBodyGroups.js b/src/components/TableBodyGroups.js
index 8b41f31c1..fbf288fbb 100644
--- a/src/components/TableBodyGroups.js
+++ b/src/components/TableBodyGroups.js
@@ -108,9 +108,6 @@ class TableBody extends React.Component {
 
     let rows = this.buildRows(groupingData, columns, grouping, isGroupExpanded);
 
-    console.log('rows');
-    console.dir(rows);
-
     return (
       <MuiTableBody>
         {rows.map((data, rowIndex) => {
@@ -134,6 +131,7 @@ class TableBody extends React.Component {
               components={this.props.components}
               tableId={this.props.tableId}
               key={data.id}
+              grouping={grouping}
             />
           );
         })}

From 8cc19f7a901aab359d748b58456ddd673cefe97c Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Thu, 24 Dec 2020 10:46:36 +0530
Subject: [PATCH 04/17] liniting and publish script added

---
 package.json                              |  7 +--
 src/MUIDataTable.js                       | 62 +++++++++++------------
 src/components/TableBodyGroupHeaderRow.js |  2 +-
 src/components/TableBodyGroups.js         |  2 +-
 4 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index fa6c9790b..6fe9496f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "mui-datatables",
-  "version": "3.5.1-beta.0",
+  "name": "mui-datatables-vg",
+  "version": "3.5.1-beta.1",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
@@ -19,7 +19,8 @@
     "prettier": "find src/ docs/ test/ -type f -name \"*.js\" ! -path \"*/.next/*\" | xargs prettier --write",
     "lint": "eslint src",
     "build": "cross-env NODE_ENV=production npm run prettier && rollup -c",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "publish": "npm publish --access public"
   },
   "repository": {
     "type": "git",
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index b78b7281b..7fa8e767f 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -277,8 +277,8 @@ class MUIDataTable extends React.Component {
     this.draggableHeadCellRefs = {};
     this.resizeHeadCellRefs = {};
     this.timers = {};
-    this.setHeadResizeable = () => { };
-    this.updateDividers = () => { };
+    this.setHeadResizeable = () => {};
+    this.updateDividers = () => {};
 
     let defaultState = {
       activeColumn: null,
@@ -452,12 +452,12 @@ class MUIDataTable extends React.Component {
       ) {
         this.warnDep(
           this.options.responsive +
-          ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+            ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       } else {
         this.warnInfo(
           this.options.responsive +
-          ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+            ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       }
     }
@@ -676,19 +676,19 @@ class MUIDataTable extends React.Component {
 
     const transformedData = Array.isArray(data[0])
       ? data.map(row => {
-        let i = -1;
+          let i = -1;
 
-        return columns.map(col => {
-          if (!col.empty) i++;
-          return col.empty ? undefined : row[i];
-        });
-      })
+          return columns.map(col => {
+            if (!col.empty) i++;
+            return col.empty ? undefined : row[i];
+          });
+        })
       : data.map(row => columns.map(col => leaf(row, col.name)));
 
     return transformedData;
   };
 
-  setTableData(props, status, dataUpdated, callback = () => { }, fromConstructor = false) {
+  setTableData(props, status, dataUpdated, callback = () => {}, fromConstructor = false) {
     let tableData = [];
     let { columns, filterData, filterList, columnOrder } = this.buildColumns(
       props.columns,
@@ -917,7 +917,6 @@ class MUIDataTable extends React.Component {
       if (this.options.grouping.rowHeaderVisible === undefined || this.options.grouping.rowHeaderVisible) {
         grouping.rowHeaderVisible = true;
       }
-
     } else if (this.state.grouping) {
       grouping = this.state.grouping;
     }
@@ -1001,8 +1000,8 @@ class MUIDataTable extends React.Component {
           typeof funcResult === 'string' || !funcResult
             ? funcResult
             : funcResult.props && funcResult.props.value
-              ? funcResult.props.value
-              : columnValue;
+            ? funcResult.props.value
+            : columnValue;
 
         displayRow.push(columnDisplay);
       } else {
@@ -1230,10 +1229,11 @@ class MUIDataTable extends React.Component {
   }
 
   getGroupingData(displayData, grouping) {
-
     displayData = displayData.map(row => {
       let fRow = { ...row };
-      fRow.data = row.data.map(fRow => { return fRow && fRow.props && fRow.props.value ? fRow.props.value : fRow; });
+      fRow.data = row.data.map(fRow => {
+        return fRow && fRow.props && fRow.props.value ? fRow.props.value : fRow;
+      });
       return fRow;
     });
 
@@ -2095,15 +2095,15 @@ class MUIDataTable extends React.Component {
         <div style={{ position: 'relative', ...tableHeightVal }} className={responsiveClass}>
           {(this.options.resizableColumns === true ||
             (this.options.resizableColumns && this.options.resizableColumns.enabled)) && (
-              <TableResizeComponent
-                key={rowCount}
-                columnOrder={columnOrder}
-                updateDividers={fn => (this.updateDividers = fn)}
-                setResizeable={fn => (this.setHeadResizeable = fn)}
-                options={this.props.options}
-                tableId={this.options.tableId}
-              />
-            )}
+            <TableResizeComponent
+              key={rowCount}
+              columnOrder={columnOrder}
+              updateDividers={fn => (this.updateDividers = fn)}
+              setResizeable={fn => (this.setHeadResizeable = fn)}
+              options={this.props.options}
+              tableId={this.options.tableId}
+            />
+          )}
           <DndProvider backend={HTML5Backend} {...dndProps}>
             <MuiTable
               ref={el => (this.tableRef = el)}
@@ -2158,12 +2158,12 @@ class MUIDataTable extends React.Component {
               />
               {this.options.customTableBodyFooterRender
                 ? this.options.customTableBodyFooterRender({
-                  data: displayData,
-                  count: rowCount,
-                  columns,
-                  selectedRows,
-                  selectableRows: this.options.selectableRows,
-                })
+                    data: displayData,
+                    count: rowCount,
+                    columns,
+                    selectedRows,
+                    selectableRows: this.options.selectableRows,
+                  })
                 : null}
             </MuiTable>
           </DndProvider>
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index bc868041f..3a42a8a7b 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -42,7 +42,7 @@ function TableBodyGroupHeaderRow(props) {
   const { columns, options, components = {}, tableId, row, grouping } = props;
   const classes = useStyles();
 
-  const onExpand = () => { };
+  const onExpand = () => {};
 
   const iconClass = clsx({
     [classes.icon]: true,
diff --git a/src/components/TableBodyGroups.js b/src/components/TableBodyGroups.js
index fbf288fbb..ea4a89be7 100644
--- a/src/components/TableBodyGroups.js
+++ b/src/components/TableBodyGroups.js
@@ -47,7 +47,7 @@ class TableBody extends React.Component {
   };
 
   static defaultProps = {
-    toggleExpandRow: () => { },
+    toggleExpandRow: () => {},
   };
 
   flattenGroups(rows, rootGroup, columns, grouping, isGroupExpanded) {

From 6b1c6dbb228c27912070ec0f019f33cabe88adc1 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Mon, 28 Dec 2020 13:54:37 +0530
Subject: [PATCH 05/17] Added data aggergation props

---
 examples/grouping/index.js                | 70 ++++++++++++++++++++++-
 src/MUIDataTable.js                       | 58 ++++++++++---------
 src/components/TableBodyGroupHeaderRow.js | 19 +++++-
 src/components/TableBodyGroups.js         |  5 +-
 4 files changed, 118 insertions(+), 34 deletions(-)

diff --git a/examples/grouping/index.js b/examples/grouping/index.js
index dfb18963b..5538353a3 100644
--- a/examples/grouping/index.js
+++ b/examples/grouping/index.js
@@ -8,6 +8,7 @@ function Example() {
       "label": "Name",
       "name": "serviceName",
       options: {
+        "type": "prim-group",
         setCellHeaderProps: () => ({
           style: {
             width: '45%'
@@ -578,10 +579,77 @@ function Example() {
       "fCost": 58
     }
   ];
+  const aggData = [
+    {
+        "key": "Azure",
+        "data": {
+            "qty": 1.0,
+            "pRate": 42,
+            "pCost": 0.88,
+            "fRate": 29,
+            "fCost": 75
+        },
+        "childs": [
+            {
+                "key": "North",
+                "data": {
+                    "qty": 176.0,
+                    "pRate": 5467,
+                    "pCost": 0.45,
+                    "fRate": 343,
+                    "fCost": 11
+                },
+                "childs": [
+                    {
+                        "key": "domain-1",
+                        "data": {
+                            "qty": 1.0,
+                            "pRate": 75,
+                            "pCost": 1.1,
+                            "fRate": 3,
+                            "fCost": 84
+                        }
+                    },
+                    {
+                        "key": "domain-2",
+                        "data": {
+                            "qty": 1.0,
+                            "pRate": 9,
+                            "pCost": 0.94,
+                            "fRate": 28,
+                            "fCost": 89
+                        }
+                    }
+                ]
+            },
+            {
+                "key": "South",
+                "data": {
+                    "qty": 3.0,
+                    "pRate": 23,
+                    "pCost": 3.88,
+                    "fRate": 49,
+                    "fCost": 65
+                }
+            }
+        ]
+    },
+    {
+        "key": "AWS",
+        "data": {
+            "qty": 5.0,
+            "pRate": 77,
+            "pCost": 9.88,
+            "fRate": 33,
+            "fCost": 777
+        }
+    }
+];
+
 
   return (
     <React.Fragment>
-      <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />
+      <MUIDataTable title={'ACME Employee list'} data={data} aggData={aggData} columns={columns} options={options} />
     </React.Fragment>
   );
 }
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 7fa8e767f..dfd847225 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -277,8 +277,8 @@ class MUIDataTable extends React.Component {
     this.draggableHeadCellRefs = {};
     this.resizeHeadCellRefs = {};
     this.timers = {};
-    this.setHeadResizeable = () => {};
-    this.updateDividers = () => {};
+    this.setHeadResizeable = () => { };
+    this.updateDividers = () => { };
 
     let defaultState = {
       activeColumn: null,
@@ -452,12 +452,12 @@ class MUIDataTable extends React.Component {
       ) {
         this.warnDep(
           this.options.responsive +
-            ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+          ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       } else {
         this.warnInfo(
           this.options.responsive +
-            ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+          ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       }
     }
@@ -676,19 +676,19 @@ class MUIDataTable extends React.Component {
 
     const transformedData = Array.isArray(data[0])
       ? data.map(row => {
-          let i = -1;
+        let i = -1;
 
-          return columns.map(col => {
-            if (!col.empty) i++;
-            return col.empty ? undefined : row[i];
-          });
-        })
+        return columns.map(col => {
+          if (!col.empty) i++;
+          return col.empty ? undefined : row[i];
+        });
+      })
       : data.map(row => columns.map(col => leaf(row, col.name)));
 
     return transformedData;
   };
 
-  setTableData(props, status, dataUpdated, callback = () => {}, fromConstructor = false) {
+  setTableData(props, status, dataUpdated, callback = () => { }, fromConstructor = false) {
     let tableData = [];
     let { columns, filterData, filterList, columnOrder } = this.buildColumns(
       props.columns,
@@ -1000,8 +1000,8 @@ class MUIDataTable extends React.Component {
           typeof funcResult === 'string' || !funcResult
             ? funcResult
             : funcResult.props && funcResult.props.value
-            ? funcResult.props.value
-            : columnValue;
+              ? funcResult.props.value
+              : columnValue;
 
         displayRow.push(columnDisplay);
       } else {
@@ -1941,6 +1941,7 @@ class MUIDataTable extends React.Component {
       classes,
       className,
       title,
+      aggData,
       components: { TableBody, TableFilterList, TableFooter, TableHead, TableResize, TableToolbar, TableToolbarSelect },
     } = this.props;
     const {
@@ -2095,15 +2096,15 @@ class MUIDataTable extends React.Component {
         <div style={{ position: 'relative', ...tableHeightVal }} className={responsiveClass}>
           {(this.options.resizableColumns === true ||
             (this.options.resizableColumns && this.options.resizableColumns.enabled)) && (
-            <TableResizeComponent
-              key={rowCount}
-              columnOrder={columnOrder}
-              updateDividers={fn => (this.updateDividers = fn)}
-              setResizeable={fn => (this.setHeadResizeable = fn)}
-              options={this.props.options}
-              tableId={this.options.tableId}
-            />
-          )}
+              <TableResizeComponent
+                key={rowCount}
+                columnOrder={columnOrder}
+                updateDividers={fn => (this.updateDividers = fn)}
+                setResizeable={fn => (this.setHeadResizeable = fn)}
+                options={this.props.options}
+                tableId={this.options.tableId}
+              />
+            )}
           <DndProvider backend={HTML5Backend} {...dndProps}>
             <MuiTable
               ref={el => (this.tableRef = el)}
@@ -2155,15 +2156,16 @@ class MUIDataTable extends React.Component {
                 filterList={filterList}
                 components={this.props.components}
                 tableId={this.options.tableId}
+                aggData={aggData}
               />
               {this.options.customTableBodyFooterRender
                 ? this.options.customTableBodyFooterRender({
-                    data: displayData,
-                    count: rowCount,
-                    columns,
-                    selectedRows,
-                    selectableRows: this.options.selectableRows,
-                  })
+                  data: displayData,
+                  count: rowCount,
+                  columns,
+                  selectedRows,
+                  selectableRows: this.options.selectableRows,
+                })
                 : null}
             </MuiTable>
           </DndProvider>
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index 3a42a8a7b..f103178dc 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -38,11 +38,14 @@ const useStyles = makeStyles(
   { name: 'MUIDataTableBodyGroupHeaderRow' },
 );
 
+
+
 function TableBodyGroupHeaderRow(props) {
-  const { columns, options, components = {}, tableId, row, grouping } = props;
+  const { columns, options, components = {}, tableId, row, grouping, aggData } = props;
+
   const classes = useStyles();
 
-  const onExpand = () => {};
+  const onExpand = () => { };
 
   const iconClass = clsx({
     [classes.icon]: true,
@@ -61,7 +64,7 @@ function TableBodyGroupHeaderRow(props) {
         [bodyClasses.className]: bodyClasses.className,
         [classes.tableRow]: true,
       })}>
-      <TableCell className={classes.tableRow} colSpan={1000}>
+      <TableCell className={classes.tableRow} >
         <IconButton
           className={classes.expandButton}
           style={{
@@ -73,6 +76,16 @@ function TableBodyGroupHeaderRow(props) {
         {grouping && grouping.rowHeaderVisible && <div className={classes.columnName}>{row.columnLabel}:</div>}
         <div className={classes.columnValue}>{row.columnValue}</div>
       </TableCell>
+
+      {
+        columns.map(col => {
+          if (col.type !== 'prim-group' && col.display !== 'false') {
+            return <TableCell className={classes.tableRow} >
+              <div >{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
+            </TableCell>;
+          }
+        })
+      }
     </TableRow>
   );
 }
diff --git a/src/components/TableBodyGroups.js b/src/components/TableBodyGroups.js
index ea4a89be7..5af7f3ae0 100644
--- a/src/components/TableBodyGroups.js
+++ b/src/components/TableBodyGroups.js
@@ -47,7 +47,7 @@ class TableBody extends React.Component {
   };
 
   static defaultProps = {
-    toggleExpandRow: () => {},
+    toggleExpandRow: () => { },
   };
 
   flattenGroups(rows, rootGroup, columns, grouping, isGroupExpanded) {
@@ -103,7 +103,7 @@ class TableBody extends React.Component {
   }
 
   render() {
-    const { grouping, isGroupExpanded, classes, columns, groupingData } = this.props;
+    const { grouping, isGroupExpanded, classes, columns, groupingData, aggData } = this.props;
     let tableData = this.props.data;
 
     let rows = this.buildRows(groupingData, columns, grouping, isGroupExpanded);
@@ -132,6 +132,7 @@ class TableBody extends React.Component {
               tableId={this.props.tableId}
               key={data.id}
               grouping={grouping}
+              aggData={aggData}
             />
           );
         })}

From 2ed2546454c28337ff8b9be21da9ee7733ea1b40 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Mon, 28 Dec 2020 13:55:22 +0530
Subject: [PATCH 06/17] Updated semver

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6fe9496f7..1088f5e19 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.1",
+  "version": "3.5.1-beta.2",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

From a06c42a482cbe3a147c668ae114ac9e137e7e8d1 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Mon, 28 Dec 2020 15:28:25 +0530
Subject: [PATCH 07/17] Code formatting and build bump-up

---
 src/MUIDataTable.js                       | 56 +++++++++++------------
 src/components/TableBodyGroupHeaderRow.js | 24 +++++-----
 src/components/TableBodyGroups.js         |  2 +-
 3 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index dfd847225..59f1a7204 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -277,8 +277,8 @@ class MUIDataTable extends React.Component {
     this.draggableHeadCellRefs = {};
     this.resizeHeadCellRefs = {};
     this.timers = {};
-    this.setHeadResizeable = () => { };
-    this.updateDividers = () => { };
+    this.setHeadResizeable = () => {};
+    this.updateDividers = () => {};
 
     let defaultState = {
       activeColumn: null,
@@ -452,12 +452,12 @@ class MUIDataTable extends React.Component {
       ) {
         this.warnDep(
           this.options.responsive +
-          ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+            ' has been deprecated, but will still work in version 3.x. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       } else {
         this.warnInfo(
           this.options.responsive +
-          ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
+            ' is not recognized as a valid input for responsive option. Please use string option: standard | vertical | simple. More info: https://github.com/gregnb/mui-datatables/tree/master/docs/v2_to_v3_guide.md',
         );
       }
     }
@@ -676,19 +676,19 @@ class MUIDataTable extends React.Component {
 
     const transformedData = Array.isArray(data[0])
       ? data.map(row => {
-        let i = -1;
+          let i = -1;
 
-        return columns.map(col => {
-          if (!col.empty) i++;
-          return col.empty ? undefined : row[i];
-        });
-      })
+          return columns.map(col => {
+            if (!col.empty) i++;
+            return col.empty ? undefined : row[i];
+          });
+        })
       : data.map(row => columns.map(col => leaf(row, col.name)));
 
     return transformedData;
   };
 
-  setTableData(props, status, dataUpdated, callback = () => { }, fromConstructor = false) {
+  setTableData(props, status, dataUpdated, callback = () => {}, fromConstructor = false) {
     let tableData = [];
     let { columns, filterData, filterList, columnOrder } = this.buildColumns(
       props.columns,
@@ -1000,8 +1000,8 @@ class MUIDataTable extends React.Component {
           typeof funcResult === 'string' || !funcResult
             ? funcResult
             : funcResult.props && funcResult.props.value
-              ? funcResult.props.value
-              : columnValue;
+            ? funcResult.props.value
+            : columnValue;
 
         displayRow.push(columnDisplay);
       } else {
@@ -2096,15 +2096,15 @@ class MUIDataTable extends React.Component {
         <div style={{ position: 'relative', ...tableHeightVal }} className={responsiveClass}>
           {(this.options.resizableColumns === true ||
             (this.options.resizableColumns && this.options.resizableColumns.enabled)) && (
-              <TableResizeComponent
-                key={rowCount}
-                columnOrder={columnOrder}
-                updateDividers={fn => (this.updateDividers = fn)}
-                setResizeable={fn => (this.setHeadResizeable = fn)}
-                options={this.props.options}
-                tableId={this.options.tableId}
-              />
-            )}
+            <TableResizeComponent
+              key={rowCount}
+              columnOrder={columnOrder}
+              updateDividers={fn => (this.updateDividers = fn)}
+              setResizeable={fn => (this.setHeadResizeable = fn)}
+              options={this.props.options}
+              tableId={this.options.tableId}
+            />
+          )}
           <DndProvider backend={HTML5Backend} {...dndProps}>
             <MuiTable
               ref={el => (this.tableRef = el)}
@@ -2160,12 +2160,12 @@ class MUIDataTable extends React.Component {
               />
               {this.options.customTableBodyFooterRender
                 ? this.options.customTableBodyFooterRender({
-                  data: displayData,
-                  count: rowCount,
-                  columns,
-                  selectedRows,
-                  selectableRows: this.options.selectableRows,
-                })
+                    data: displayData,
+                    count: rowCount,
+                    columns,
+                    selectedRows,
+                    selectableRows: this.options.selectableRows,
+                  })
                 : null}
             </MuiTable>
           </DndProvider>
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index f103178dc..daca671db 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -38,14 +38,12 @@ const useStyles = makeStyles(
   { name: 'MUIDataTableBodyGroupHeaderRow' },
 );
 
-
-
 function TableBodyGroupHeaderRow(props) {
   const { columns, options, components = {}, tableId, row, grouping, aggData } = props;
 
   const classes = useStyles();
 
-  const onExpand = () => { };
+  const onExpand = () => {};
 
   const iconClass = clsx({
     [classes.icon]: true,
@@ -64,7 +62,7 @@ function TableBodyGroupHeaderRow(props) {
         [bodyClasses.className]: bodyClasses.className,
         [classes.tableRow]: true,
       })}>
-      <TableCell className={classes.tableRow} >
+      <TableCell className={classes.tableRow}>
         <IconButton
           className={classes.expandButton}
           style={{
@@ -77,15 +75,15 @@ function TableBodyGroupHeaderRow(props) {
         <div className={classes.columnValue}>{row.columnValue}</div>
       </TableCell>
 
-      {
-        columns.map(col => {
-          if (col.type !== 'prim-group' && col.display !== 'false') {
-            return <TableCell className={classes.tableRow} >
-              <div >{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
-            </TableCell>;
-          }
-        })
-      }
+      {columns.map(col => {
+        if (col.type !== 'prim-group' && col.display !== 'false') {
+          return (
+            <TableCell className={classes.tableRow}>
+              <div>{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
+            </TableCell>
+          );
+        }
+      })}
     </TableRow>
   );
 }
diff --git a/src/components/TableBodyGroups.js b/src/components/TableBodyGroups.js
index 5af7f3ae0..7598f2372 100644
--- a/src/components/TableBodyGroups.js
+++ b/src/components/TableBodyGroups.js
@@ -47,7 +47,7 @@ class TableBody extends React.Component {
   };
 
   static defaultProps = {
-    toggleExpandRow: () => { },
+    toggleExpandRow: () => {},
   };
 
   flattenGroups(rows, rootGroup, columns, grouping, isGroupExpanded) {

From 2f982a90c7fee86c7d2325ff18e35802c75c3988 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Mon, 28 Dec 2020 15:28:54 +0530
Subject: [PATCH 08/17] Code formatting and build bump-up

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1088f5e19..1d1a1c723 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.2",
+  "version": "3.5.1-beta.3",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

From 70eb1f48709a43142495485b56e5e87b885f6cd6 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 11:17:52 +0530
Subject: [PATCH 09/17] Added classname for column type

---
 package.json                              | 6 +-----
 src/components/TableBodyGroupHeaderRow.js | 4 ++--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 1d1a1c723..efe0e93a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.3",
+  "version": "3.5.1-beta.4",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
@@ -22,10 +22,6 @@
     "prepare": "npm run build",
     "publish": "npm publish --access public"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/gregnb/mui-datatables.git"
-  },
   "keywords": [
     "material-ui",
     "datatables",
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index daca671db..0d5c1a0b3 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -43,7 +43,7 @@ function TableBodyGroupHeaderRow(props) {
 
   const classes = useStyles();
 
-  const onExpand = () => {};
+  const onExpand = () => { };
 
   const iconClass = clsx({
     [classes.icon]: true,
@@ -79,7 +79,7 @@ function TableBodyGroupHeaderRow(props) {
         if (col.type !== 'prim-group' && col.display !== 'false') {
           return (
             <TableCell className={classes.tableRow}>
-              <div>{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
+              <div className={`${col.type}-cell`}>{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
             </TableCell>
           );
         }

From cefc0c46c48dde1eb223ce0427cf2ae8f12bd492 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 11:23:21 +0530
Subject: [PATCH 10/17] Added classname for column type

---
 src/components/TableBodyGroupHeaderRow.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index 0d5c1a0b3..a5d853f7f 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -43,8 +43,6 @@ function TableBodyGroupHeaderRow(props) {
 
   const classes = useStyles();
 
-  const onExpand = () => { };
-
   const iconClass = clsx({
     [classes.icon]: true,
     [classes.expanded]: row.expanded,
@@ -79,7 +77,7 @@ function TableBodyGroupHeaderRow(props) {
         if (col.type !== 'prim-group' && col.display !== 'false') {
           return (
             <TableCell className={classes.tableRow}>
-              <div className={`${col.type}-cell`}>{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
+              <div className={`${col.type}-column-cell`}>{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
             </TableCell>
           );
         }

From 6242591c4de28150785ffc936d8f857c364f13d8 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 14:46:46 +0530
Subject: [PATCH 11/17] custom class for column type

---
 package.json                              | 4 ++--
 src/components/TableBodyGroupDataRow.js   | 1 -
 src/components/TableBodyGroupHeaderRow.js | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index efe0e93a3..c7d7dca4e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.4",
+  "version": "3.5.1-beta.5",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
@@ -20,7 +20,7 @@
     "lint": "eslint src",
     "build": "cross-env NODE_ENV=production npm run prettier && rollup -c",
     "prepare": "npm run build",
-    "publish": "npm publish --access public"
+    "publish-command": "npm publish --access public"
   },
   "keywords": [
     "material-ui",
diff --git a/src/components/TableBodyGroupDataRow.js b/src/components/TableBodyGroupDataRow.js
index 8ae14015e..d8ebe5198 100644
--- a/src/components/TableBodyGroupDataRow.js
+++ b/src/components/TableBodyGroupDataRow.js
@@ -12,7 +12,6 @@ const defaultBodyStyles = theme => ({
 
 function TableBodyGroupDataRow(props) {
   const { row } = props;
-  console.dir(props);
   return (
     <TableBodyRows
       tableRows={row.data.data}
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index a5d853f7f..b8a545bfa 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -73,10 +73,10 @@ function TableBodyGroupHeaderRow(props) {
         <div className={classes.columnValue}>{row.columnValue}</div>
       </TableCell>
 
-      {columns.map(col => {
+      {columns.map((col, colIndex) => {
         if (col.type !== 'prim-group' && col.display !== 'false') {
           return (
-            <TableCell className={classes.tableRow}>
+            <TableCell key={colIndex} className={classes.tableRow}>
               <div className={`${col.type}-column-cell`}>{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
             </TableCell>
           );

From e2eaae4850d1c93014dfd8d8ebbe5fc4b2bfca2c Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 16:55:50 +0530
Subject: [PATCH 12/17] custom body render changes for agg data

---
 examples/grouping/index.js | 126 +++++++++++++++++++------------------
 package.json               |   2 +-
 src/MUIDataTable.js        |   1 +
 3 files changed, 68 insertions(+), 61 deletions(-)

diff --git a/examples/grouping/index.js b/examples/grouping/index.js
index 5538353a3..1c743a8da 100644
--- a/examples/grouping/index.js
+++ b/examples/grouping/index.js
@@ -13,7 +13,7 @@ function Example() {
           style: {
             width: '45%'
           }
-        }),
+        })
       }
     },
     {
@@ -33,12 +33,18 @@ function Example() {
     {
       "label": "Quantity",
       "name": "qty",
-      "display": true
+      "display": true,
+      customBodyRender: (value, tableMeta, updateValue) => (
+        <div >{`#### ${value}`}</div>
+      )
     },
     {
       "label": "Provider Rate",
       "name": "pRate",
-      "display": true
+      "display": true,
+      customBodyRender: (value, tableMeta, updateValue) => (
+        <div >{`#### ${value}`}</div>
+      )
     },
     {
       "label": "Provider Cost",
@@ -581,70 +587,70 @@ function Example() {
   ];
   const aggData = [
     {
-        "key": "Azure",
-        "data": {
-            "qty": 1.0,
-            "pRate": 42,
-            "pCost": 0.88,
-            "fRate": 29,
-            "fCost": 75
-        },
-        "childs": [
+      "key": "Azure",
+      "data": {
+        "qty": 1.0,
+        "pRate": 42,
+        "pCost": 0.88,
+        "fRate": 29,
+        "fCost": 75
+      },
+      "childs": [
+        {
+          "key": "North",
+          "data": {
+            "qty": 176.0,
+            "pRate": 5467,
+            "pCost": 0.45,
+            "fRate": 343,
+            "fCost": 11
+          },
+          "childs": [
             {
-                "key": "North",
-                "data": {
-                    "qty": 176.0,
-                    "pRate": 5467,
-                    "pCost": 0.45,
-                    "fRate": 343,
-                    "fCost": 11
-                },
-                "childs": [
-                    {
-                        "key": "domain-1",
-                        "data": {
-                            "qty": 1.0,
-                            "pRate": 75,
-                            "pCost": 1.1,
-                            "fRate": 3,
-                            "fCost": 84
-                        }
-                    },
-                    {
-                        "key": "domain-2",
-                        "data": {
-                            "qty": 1.0,
-                            "pRate": 9,
-                            "pCost": 0.94,
-                            "fRate": 28,
-                            "fCost": 89
-                        }
-                    }
-                ]
+              "key": "domain-1",
+              "data": {
+                "qty": 1.0,
+                "pRate": 75,
+                "pCost": 1.1,
+                "fRate": 3,
+                "fCost": 84
+              }
             },
             {
-                "key": "South",
-                "data": {
-                    "qty": 3.0,
-                    "pRate": 23,
-                    "pCost": 3.88,
-                    "fRate": 49,
-                    "fCost": 65
-                }
+              "key": "domain-2",
+              "data": {
+                "qty": 1.0,
+                "pRate": 9,
+                "pCost": 0.94,
+                "fRate": 28,
+                "fCost": 89
+              }
             }
-        ]
+          ]
+        },
+        {
+          "key": "South",
+          "data": {
+            "qty": 3.0,
+            "pRate": 23,
+            "pCost": 3.88,
+            "fRate": 49,
+            "fCost": 65
+          }
+        }
+      ]
     },
     {
-        "key": "AWS",
-        "data": {
-            "qty": 5.0,
-            "pRate": 77,
-            "pCost": 9.88,
-            "fRate": 33,
-            "fCost": 777
-        }
+      "key": "AWS",
+      "data": {
+        "qty": 5.0,
+        "pRate": 77,
+        "pCost": 9.88,
+        "fRate": 33,
+        "fCost": 777
+      }
     }
-];
+  ];
 
 
   return (
diff --git a/package.json b/package.json
index c7d7dca4e..781ce1ccc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.5",
+  "version": "3.5.1-beta.6",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 59f1a7204..37171372f 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -603,6 +603,7 @@ class MUIDataTable extends React.Component {
         sortCompare: null,
         sortThirdClickReset: false,
         sortDescFirst: false,
+        customBodyRender: column.customBodyRender,
       };
 
       columnOrder.push(colIndex);

From c81eb0ff8f9f50f7445c9e812d34e008be8baa9c Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 17:16:51 +0530
Subject: [PATCH 13/17] Added feature for custom data aggregation

---
 examples/grouping/index.js                | 615 ++++------------------
 src/MUIDataTable.js                       |   2 +
 src/components/TableBodyGroupHeaderRow.js |   7 +-
 src/components/TableBodyGroups.js         |   5 +-
 4 files changed, 114 insertions(+), 515 deletions(-)

diff --git a/examples/grouping/index.js b/examples/grouping/index.js
index 1c743a8da..59e892868 100644
--- a/examples/grouping/index.js
+++ b/examples/grouping/index.js
@@ -84,521 +84,22 @@ function Example() {
   };
 
   const data = [
-    {
-      "serviceName": "Azure",
-      "region": "North",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 42,
-      "pCost": 0.88,
-      "fRate": 29,
-      "fCost": 75
-    },
-    {
-      "serviceName": "GCP",
-      "region": "US",
-      "subCat": "domain-132",
-      "qty": 1.0,
-      "pRate": 75,
-      "pCost": 0.18,
-      "fRate": 36,
-      "fCost": 71
-    },
-    {
-      "serviceName": "GCP",
-      "region": "US",
-      "subCat": "domain-132",
-      "qty": 1.0,
-      "pRate": 66,
-      "pCost": 0.86,
-      "fRate": 82,
-      "fCost": 57
-    },
-    {
-      "serviceName": "GCP",
-      "region": "US",
-      "subCat": "domain-123",
-      "qty": 1.0,
-      "pRate": 76,
-      "pCost": 0.83,
-      "fRate": 71,
-      "fCost": 77
-    },
-    {
-      "serviceName": "GCP",
-      "region": "Philippines",
-      "subCat": "domain-143",
-      "qty": 1.0,
-      "pRate": 75,
-      "pCost": 1.1,
-      "fRate": 3,
-      "fCost": 84
-    },
-    {
-      "serviceName": "GCP",
-      "region": "US",
-      "subCat": "domain-143",
-      "qty": 1.0,
-      "pRate": 82,
-      "pCost": 0.76,
-      "fRate": 55,
-      "fCost": 2
-    },
-    {
-      "serviceName": "AWS",
-      "region": "US",
-      "subCat": "domain-143",
-      "qty": 1.0,
-      "pRate": 38,
-      "pCost": 0.92,
-      "fRate": 86,
-      "fCost": 23
-    },
-    {
-      "serviceName": "GCP",
-      "region": "East",
-      "subCat": "domain-143",
-      "qty": 1.0,
-      "pRate": 10,
-      "pCost": 0.92,
-      "fRate": 84,
-      "fCost": 25
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "US",
-      "subCat": "domain-123",
-      "qty": 1.0,
-      "pRate": 61,
-      "pCost": 1.61,
-      "fRate": 12,
-      "fCost": 32
-    },
-    {
-      "serviceName": "AWS",
-      "region": "North",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 45,
-      "pCost": 1.51,
-      "fRate": 95,
-      "fCost": 23
-    },
-    {
-      "serviceName": "AWS",
-      "region": "West",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 2,
-      "pCost": 1.98,
-      "fRate": 6,
-      "fCost": 25
-    },
-    {
-      "serviceName": "AWS",
-      "region": "US",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 46,
-      "pCost": 1.42,
-      "fRate": 68,
-      "fCost": 6
-    },
-    {
-      "serviceName": "AWS",
-      "region": "East",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 79,
-      "pCost": 0.34,
-      "fRate": 98,
-      "fCost": 56
-    },
-    {
-      "serviceName": "AWS",
-      "region": "East",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 9,
-      "pCost": 0.94,
-      "fRate": 28,
-      "fCost": 89
-    },
-    {
-      "serviceName": "AWS",
-      "region": "East",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 27,
-      "pCost": 1.69,
-      "fRate": 84,
-      "fCost": 76
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "US",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 35,
-      "pCost": 1.08,
-      "fRate": 19,
-      "fCost": 10
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "Philippines",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 9,
-      "pCost": 0.93,
-      "fRate": 3,
-      "fCost": 23
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "US",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 60,
-      "pCost": 1.66,
-      "fRate": 75,
-      "fCost": 35
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "US",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 64,
-      "pCost": 1.12,
-      "fRate": 88,
-      "fCost": 29
-    },
-    {
-      "serviceName": "GCP",
-      "region": "Philippines",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 92,
-      "pCost": 0.09,
-      "fRate": 17,
-      "fCost": 44
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "US",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 87,
-      "pCost": 0.36,
-      "fRate": 82,
-      "fCost": 12
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "Philippines",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 73,
-      "pCost": 0.66,
-      "fRate": 33,
-      "fCost": 66
-    },
-    {
-      "serviceName": "AWS",
-      "region": "US",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 83,
-      "pCost": 1.13,
-      "fRate": 43,
-      "fCost": 50
-    },
-    {
-      "serviceName": "GCP",
-      "region": "Philippines",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 69,
-      "pCost": 1.24,
-      "fRate": 26,
-      "fCost": 31
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "West",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 95,
-      "pCost": 1.06,
-      "fRate": 85,
-      "fCost": 4
-    },
-    {
-      "serviceName": "AWS",
-      "region": "East",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 65,
-      "pCost": 0.86,
-      "fRate": 12,
-      "fCost": 93
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "Georgia",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 10,
-      "pCost": 0.0,
-      "fRate": 28,
-      "fCost": 65
-    },
-    {
-      "serviceName": "Azure",
-      "region": "France",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 1,
-      "pCost": 0.55,
-      "fRate": 92,
-      "fCost": 46
-    },
-    {
-      "serviceName": "Azure",
-      "region": "West",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 66,
-      "pCost": 0.21,
-      "fRate": 100,
-      "fCost": 32
-    },
-    {
-      "serviceName": "Azure",
-      "region": "India",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 71,
-      "pCost": 1.01,
-      "fRate": 13,
-      "fCost": 89
-    },
-    {
-      "serviceName": "AWS",
-      "region": "East",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 91,
-      "pCost": 0.16,
-      "fRate": 93,
-      "fCost": 92
-    },
-    {
-      "serviceName": "Azure",
-      "region": "East",
-      "subCat": "domain-144",
-      "qty": 1.0,
-      "pRate": 13,
-      "pCost": 0.43,
-      "fRate": 89,
-      "fCost": 85
-    },
-    {
-      "serviceName": "Azure",
-      "region": "Brazil",
-      "subCat": "domain-144",
-      "qty": 1.0,
-      "pRate": 71,
-      "pCost": 1.13,
-      "fRate": 9,
-      "fCost": 26
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "Philippines",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 91,
-      "pCost": 1.81,
-      "fRate": 5,
-      "fCost": 70
-    },
-    {
-      "serviceName": "AWS",
-      "region": "East",
-      "subCat": "domain-133",
-      "qty": 1.0,
-      "pRate": 94,
-      "pCost": 0.61,
-      "fRate": 41,
-      "fCost": 57
-    },
-    {
-      "serviceName": "Azure",
-      "region": "Brazil",
-      "subCat": "domain-133",
-      "qty": 1.0,
-      "pRate": 31,
-      "pCost": 0.02,
-      "fRate": 57,
-      "fCost": 52
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "East",
-      "subCat": "domain-166",
-      "qty": 1.0,
-      "pRate": 96,
-      "pCost": 0.97,
-      "fRate": 51,
-      "fCost": 66
-    },
-    {
-      "serviceName": "GCP",
-      "region": "India",
-      "subCat": "domain-166",
-      "qty": 1.0,
-      "pRate": 37,
-      "pCost": 0.85,
-      "fRate": 65,
-      "fCost": 84
-    },
-    {
-      "serviceName": "AWS",
-      "region": "East",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 16,
-      "pCost": 1.22,
-      "fRate": 3,
-      "fCost": 96
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "North",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 99,
-      "pCost": 0.22,
-      "fRate": 39,
-      "fCost": 17
-    },
-    {
-      "serviceName": "Azure",
-      "region": "France",
-      "subCat": "domain-166",
-      "qty": 1.0,
-      "pRate": 61,
-      "pCost": 0.7,
-      "fRate": 79,
-      "fCost": 64
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "East",
-      "subCat": "domain-166",
-      "qty": 1.0,
-      "pRate": 74,
-      "pCost": 1.9,
-      "fRate": 12,
-      "fCost": 38
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "North",
-      "subCat": "domain-133",
-      "qty": 1.0,
-      "pRate": 98,
-      "pCost": 1.69,
-      "fRate": 92,
-      "fCost": 74
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "North",
-      "subCat": "domain-133",
-      "qty": 1.0,
-      "pRate": 18,
-      "pCost": 1.24,
-      "fRate": 90,
-      "fCost": 86
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "Vietnam",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 83,
-      "pCost": 1.87,
-      "fRate": 47,
-      "fCost": 37
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "Japan",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 87,
-      "pCost": 0.31,
-      "fRate": 75,
-      "fCost": 94
-    },
-    {
-      "serviceName": "AWS",
-      "region": "Ukraine",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 24,
-      "pCost": 0.57,
-      "fRate": 29,
-      "fCost": 65
-    },
-    {
-      "serviceName": "Digital Ocean",
-      "region": "Peru",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 32,
-      "pCost": 1.79,
-      "fRate": 43,
-      "fCost": 6
-    },
-    {
-      "serviceName": "Azure",
-      "region": "Canada",
-      "subCat": "domain-1",
-      "qty": 1.0,
-      "pRate": 1,
-      "pCost": 1.63,
-      "fRate": 89,
-      "fCost": 35
-    },
-    {
-      "serviceName": "GCP",
-      "region": "Indonesia",
-      "subCat": "domain-133",
-      "qty": 1.0,
-      "pRate": 59,
-      "pCost": 1.81,
-      "fRate": 79,
-      "fCost": 58
-    }
-  ];
-  const aggData = [
     {
       "key": "Azure",
       "data": {
-        "qty": 1.0,
-        "pRate": 42,
-        "pCost": 0.88,
-        "fRate": 29,
-        "fCost": 75
+        "serviceName": "Azure",
+        "qty": 1232,
+        "pRate": 422332.67,
+        "pCost": 4343.88,
+        "fRate": 29343433,
+        "fCost": 7434435
       },
       "childs": [
         {
           "key": "North",
           "data": {
+            "serviceName": "Azure",
+            "region": "North",
             "qty": 176.0,
             "pRate": 5467,
             "pCost": 0.45,
@@ -614,7 +115,23 @@ function Example() {
                 "pCost": 1.1,
                 "fRate": 3,
                 "fCost": 84
-              }
+              },
+              "childs": [
+                {
+                  "isLeaf": true,
+                  "data": {
+                    "serviceName": "Azure",
+                    "region": "North",
+                    "subCat": "domain-1",
+                    "qty": 5.4,
+                    "pRate": 45,
+                    "pCost": 67.1,
+                    "fRate": 300,
+                    "fCost": 8004,
+                    "currency": "USD"
+                  }
+                }
+              ]
             },
             {
               "key": "domain-2",
@@ -631,12 +148,54 @@ function Example() {
         {
           "key": "South",
           "data": {
-            "qty": 3.0,
+            "qty": 3008756,
             "pRate": 23,
             "pCost": 3.88,
             "fRate": 49,
             "fCost": 65
-          }
+          },
+          "childs": [
+            {
+              "key": "domain-1",
+              "data": {
+                "qty": 14,
+                "pRate": 75,
+                "pCost": 5.1,
+                "fRate": 66,
+                "fCost": 88
+              },
+              "childs": [
+                {
+                  "isLeaf": true,
+                  "data": {
+                    "serviceName": "Azure",
+                    "region": "South",
+                    "subCat": "domain-1",
+                    "qty": 73008756,
+                    "pRate": 77,
+                    "pCost": 77.1,
+                    "fRate": 770,
+                    "fCost": 7004,
+                    "currency": "USD"
+                  }
+                },
+                {
+                  "isLeaf": true,
+                  "data": {
+                    "serviceName": "Azure",
+                    "region": "South",
+                    "subCat": "domain-1",
+                    "qty": -5,
+                    "pRate": 66,
+                    "pCost": 888.1,
+                    "fRate": 8656,
+                    "fCost": 6574.43,
+                    "currency": "EUR"
+                  }
+                }
+              ]
+            }
+          ]
         }
       ]
     },
@@ -653,9 +212,43 @@ function Example() {
   ];
 
 
+
+  function formAggDataForDataGrid(data, parent) {
+    let fData = {};
+
+    data.forEach(row => {
+      let key = parent ? `${parent}___GROUPJOIN___${row.key}` : row.key;
+      fData[key] = row.data;
+      if (Array.isArray(row.childs)) {
+        fData = { ...formAggDataForDataGrid(row.childs, key), ...fData };
+      }
+    });
+    return fData;
+  }
+
+  function formRootLevelDataForDataGrid(data, acc = []) {
+
+    data.forEach(row => {
+      if (row.isLeaf) {
+        acc = acc.concat(row.data);
+      } else if (Array.isArray(row.childs)) {
+        acc = formRootLevelDataForDataGrid(row.childs, acc);
+      }
+    });
+
+    return acc;
+  }
+
+  function customAggDataRender(value) {
+    return `custom-${value}`;
+  }
+
+
   return (
     <React.Fragment>
-      <MUIDataTable title={'ACME Employee list'} data={data} aggData={aggData} columns={columns} options={options} />
+      <MUIDataTable title={'ACME Employee list'} data={formRootLevelDataForDataGrid(data)} aggData={formAggDataForDataGrid(data)} columns={columns} options={options}
+        customAggDataRender={customAggDataRender}
+      />
     </React.Fragment>
   );
 }
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 37171372f..dce135cf1 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -142,6 +142,7 @@ class MUIDataTable extends React.Component {
             ]),
             filterType: PropTypes.oneOf(['dropdown', 'checkbox', 'multiselect', 'textField', 'custom']),
             customHeadRender: PropTypes.func,
+            customAggDataRender: PropTypes.func,
             customBodyRender: PropTypes.func,
             customBodyRenderLite: PropTypes.func,
             customHeadLabelRender: PropTypes.func,
@@ -2158,6 +2159,7 @@ class MUIDataTable extends React.Component {
                 components={this.props.components}
                 tableId={this.options.tableId}
                 aggData={aggData}
+                customAggDataRender={this.props.customAggDataRender}
               />
               {this.options.customTableBodyFooterRender
                 ? this.options.customTableBodyFooterRender({
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index b8a545bfa..642518402 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -39,7 +39,7 @@ const useStyles = makeStyles(
 );
 
 function TableBodyGroupHeaderRow(props) {
-  const { columns, options, components = {}, tableId, row, grouping, aggData } = props;
+  const { columns, options, components = {}, tableId, row, grouping, aggData, customAggDataRender } = props;
 
   const classes = useStyles();
 
@@ -75,9 +75,12 @@ function TableBodyGroupHeaderRow(props) {
 
       {columns.map((col, colIndex) => {
         if (col.type !== 'prim-group' && col.display !== 'false') {
+
+          const value = aggData[row.id] ? (customAggDataRender ? customAggDataRender(aggData[row.id][col.name]) : aggData[row.id][col.name]) : '';
+
           return (
             <TableCell key={colIndex} className={classes.tableRow}>
-              <div className={`${col.type}-column-cell`}>{aggData[row.id] ? aggData[row.id][col.name] : ''}</div>
+              <div className={`${col.type}-column-cell`}>{value}</div>
             </TableCell>
           );
         }
diff --git a/src/components/TableBodyGroups.js b/src/components/TableBodyGroups.js
index 7598f2372..9b8215f08 100644
--- a/src/components/TableBodyGroups.js
+++ b/src/components/TableBodyGroups.js
@@ -47,7 +47,7 @@ class TableBody extends React.Component {
   };
 
   static defaultProps = {
-    toggleExpandRow: () => {},
+    toggleExpandRow: () => { },
   };
 
   flattenGroups(rows, rootGroup, columns, grouping, isGroupExpanded) {
@@ -103,7 +103,7 @@ class TableBody extends React.Component {
   }
 
   render() {
-    const { grouping, isGroupExpanded, classes, columns, groupingData, aggData } = this.props;
+    const { grouping, isGroupExpanded, classes, columns, groupingData, aggData, customAggDataRender } = this.props;
     let tableData = this.props.data;
 
     let rows = this.buildRows(groupingData, columns, grouping, isGroupExpanded);
@@ -133,6 +133,7 @@ class TableBody extends React.Component {
               key={data.id}
               grouping={grouping}
               aggData={aggData}
+              customAggDataRender={customAggDataRender}
             />
           );
         })}

From be4a334477b83ea07148df2bd69107fe99b07848 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 17:17:20 +0530
Subject: [PATCH 14/17] updated semver

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 781ce1ccc..fcda933ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.6",
+  "version": "3.5.1-beta.7",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

From 94afd9e622d3b2a8feeea49ce6f4c75e78679ce9 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 17:21:27 +0530
Subject: [PATCH 15/17] added type param

---
 src/components/TableBodyGroupHeaderRow.js | 7 +++++--
 src/components/TableBodyGroups.js         | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index 642518402..792af0862 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -75,8 +75,11 @@ function TableBodyGroupHeaderRow(props) {
 
       {columns.map((col, colIndex) => {
         if (col.type !== 'prim-group' && col.display !== 'false') {
-
-          const value = aggData[row.id] ? (customAggDataRender ? customAggDataRender(aggData[row.id][col.name]) : aggData[row.id][col.name]) : '';
+          const value = aggData[row.id]
+            ? customAggDataRender
+              ? customAggDataRender(aggData[row.id][col.name], col)
+              : aggData[row.id][col.name]
+            : '';
 
           return (
             <TableCell key={colIndex} className={classes.tableRow}>
diff --git a/src/components/TableBodyGroups.js b/src/components/TableBodyGroups.js
index 9b8215f08..52c2059f0 100644
--- a/src/components/TableBodyGroups.js
+++ b/src/components/TableBodyGroups.js
@@ -47,7 +47,7 @@ class TableBody extends React.Component {
   };
 
   static defaultProps = {
-    toggleExpandRow: () => { },
+    toggleExpandRow: () => {},
   };
 
   flattenGroups(rows, rootGroup, columns, grouping, isGroupExpanded) {

From 90f5fda2d17e24c11f8e1189611d21025d021c7b Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Wed, 30 Dec 2020 17:42:04 +0530
Subject: [PATCH 16/17] Custom aggregation func

---
 package.json                              | 2 +-
 src/components/TableBodyGroupHeaderRow.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index fcda933ac..05c9f9dac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.7",
+  "version": "3.5.1-beta.9",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index 792af0862..5788a4c79 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -77,7 +77,7 @@ function TableBodyGroupHeaderRow(props) {
         if (col.type !== 'prim-group' && col.display !== 'false') {
           const value = aggData[row.id]
             ? customAggDataRender
-              ? customAggDataRender(aggData[row.id][col.name], col)
+              ? customAggDataRender(aggData[row.id], col)
               : aggData[row.id][col.name]
             : '';
 

From c49e196e2d7949bab08f32be934cc81889fe7f46 Mon Sep 17 00:00:00 2001
From: Shubham Kale <ShubhamKale54@gmail.com>
Date: Sun, 3 Jan 2021 02:24:38 +0530
Subject: [PATCH 17/17] row aggregation Open custom row set

---
 package.json                              | 2 +-
 src/MUIDataTable.js                       | 1 +
 src/components/TableBodyGroupHeaderRow.js | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 05c9f9dac..b3825772e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables-vg",
-  "version": "3.5.1-beta.9",
+  "version": "3.5.1-beta.10",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index dce135cf1..f54a4b3f5 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -239,6 +239,7 @@ class MUIDataTable extends React.Component {
       searchText: PropTypes.string,
       setFilterChipProps: PropTypes.func,
       setRowProps: PropTypes.func,
+      setAggDataRowProps: PropTypes.func,
       selectToolbarPlacement: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.oneOf([STP.REPLACE, STP.ABOVE, STP.NONE]),
diff --git a/src/components/TableBodyGroupHeaderRow.js b/src/components/TableBodyGroupHeaderRow.js
index 5788a4c79..947f01bf3 100644
--- a/src/components/TableBodyGroupHeaderRow.js
+++ b/src/components/TableBodyGroupHeaderRow.js
@@ -53,6 +53,8 @@ function TableBodyGroupHeaderRow(props) {
   };
 
   let bodyClasses = options.setRowProps ? options.setRowProps(row, null, null) || {} : {};
+  bodyClasses = options.setAggDataRowProps ? options.setAggDataRowProps(aggData[row.id]) || {} : {};
+
   return (
     <TableRow
       {...bodyClasses}