Dfyjkt

I've developed the below ReactJS component as a template for a grid that can group similar data together:

Cars Data:

let cars = [
 
 brand: "Audi",
 color: "Red",
 year: "1993",
 miles: "1234"
 ,
 
 brand: "Audi",
 color: "Blue",
 year: "1992",
 miles: "1234"
 ,
 
 brand: "Audi",
 color: "White",
 year: "1992",
 miles: "1234"
 ,
 
 brand: "Audi",
 color: "Red",
 year: "1991",
 miles: "1234"
 ,
 
 brand: "Audi",
 color: "Black",
 year: "1995",
 miles: "1234"
 ,
 
 brand: "Mercedes",
 color: "Red",
 year: "1992",
 miles: "1234"
 ,
 
 brand: "Mercedes",
 color: "Red",
 year: "1993",
 miles: "1234"
 ,
 
 brand: "Mercedes",
 color: "Blue",
 year: "1994",
 miles: "1234"
 ,
 
 brand: "Mercedes",
 color: "Black",
 year: "1994",
 miles: "1234"
 ,
 
 brand: "Mercedes",
 color: "White",
 year: "1992",
 miles: "1234"
 ,
 
 brand: "BMW",
 color: "Red",
 year: "1995",
 miles: "1234"
 ,
 
 brand: "BMW",
 color: "Blue",
 year: "1992",
 miles: "1234"
 ,
 
 brand: "BMW",
 color: "Red",
 year: "1994",
 miles: "1234"
 ,
 
 brand: "BMW",
 color: "Black",
 year: "1992",
 miles: "1234"
 ,
 
 brand: "BMW",
 color: "White",
 year: "1993",
 miles: "1234"
 
];

Component:

const groupBy = (arr, fields) => 
 let field = fields[0];

 if (!field) return arr;

 let retArr = Object.values(
 arr.reduce((obj, current) => 
 let val = current[field];
 if (!obj[val]) obj[val] = rows: ;
 obj[val].rows.push(current);
 return obj;
 , )
 );

 if (fields.length) 
 retArr.forEach((obj, index) => 
 obj.rows = groupBy(obj.rows, fields.slice(1));
 );
 

 return retArr;
;

const getRowsFromGrouped = rows => 
 let ret = ;

 rows.map(row => 
 if (row.rows) 
 ret = ret.concat(getRowsFromGrouped(row.rows));
 else 
 ret.push(row);
 
 );

 return ret;
;

class App extends Component 
 state = 
 groups: 
 ;

 handleClick = key => 
 let groups = this.state.groups;

 let index = groups.findIndex(item => 
 return key === item;
 );

 if (index < 0) groups.push(key);
 else groups.splice(index, 1);

 this.setState(
 groups: groups
 );
 ;

 getHeader = row => 
 let data = Object.keys(row).map((col, index) => 
 return <td key="Head" + index>col</td>;
 );

 return (
 <thead>
 <tr>data</tr>
 </thead>
 );
 ;

 getColumns = row => 
 return Object.keys(row).map((col, index) => 
 return <td key="Col" + index>row[col]</td>;
 );
 ;

 getRows = rows => 
 let data = rows.map((row, index) => 
 return <tr key=index>this.getColumns(row)</tr>;
 );

 return <tbody>data</tbody>;
 ;

 renderGrid = rows => 
 return (
 <table>
 this.getHeader(rows[0])
 this.getRows(rows)
 </table>
 );
 ;

 renderGroupOptions = () => 
 return (
 <div>
 <p>
 <input
 type="checkbox"
 onClick=() => this.handleClick("brand")
 />
 Group By Brand
 </p>
 <p>
 <input
 type="checkbox"
 onClick=() => this.handleClick("color")
 />
 Group By Color
 </p>
 <p>
 <input
 type="checkbox"
 onClick=() => this.handleClick("year")
 />
 Group By Year
 </p>
 </div>
 );
 ;

 render = () => 
 let rows = cars;
 if (this.state.groups.length > 0) 
 let data = groupBy(cars, this.state.groups);
 rows = getRowsFromGrouped(data);
 

 return (
 <div>
 <h1>AUTO GRID</h1>
 this.renderGrid(rows)
 this.renderGroupOptions()
 </div>
 );
 ;

As developed, the grouping works pretty fine. Depending on the order that groups are choosen, the grid result is different, as groups are build above existing groups in an infinite structure.

All fine, but now I'm stuck finding a way to properly show in the grid grouped data as a single cell on table using the rowSpan attribute. Something like:

The cells grouping must following the groups, joining together grouped data in the order they are grouped in the data.

I'm stuck with this cell span issue without finding a logical way to render then together.