Using rowSpan, how to properly show as a single cell recursive grouped data on HTML table?
up vote
2
down vote
favorite
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.
javascript html reactjs
edited Nov 10 at 19:20
halfer
14.2k757106
asked Oct 29 at 23:49
Mendes
4,357956131
add a comment |
up vote
2
down vote
favorite
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.
javascript html reactjs
edited Nov 10 at 19:20
halfer
14.2k757106
asked Oct 29 at 23:49
Mendes
4,357956131
What should happen if you select multiple groupby's?
– Shyam Babu
Oct 30 at 5:54
All grouped cells should be rendered as a single cell.
– Mendes
Oct 30 at 7:59
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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.
javascript html reactjs
edited Nov 10 at 19:20
halfer
14.2k757106
asked Oct 29 at 23:49
Mendes
4,357956131
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.
javascript html reactjs
javascript html reactjs
edited Nov 10 at 19:20
halfer
14.2k757106
asked Oct 29 at 23:49
Mendes
4,357956131
edited Nov 10 at 19:20
halfer
14.2k757106
asked Oct 29 at 23:49
Mendes
4,357956131
edited Nov 10 at 19:20
halfer
14.2k757106
edited Nov 10 at 19:20
halfer
14.2k757106
edited Nov 10 at 19:20
halfer
14.2k757106
14.2k757106
asked Oct 29 at 23:49
Mendes
4,357956131
asked Oct 29 at 23:49
Mendes
4,357956131
asked Oct 29 at 23:49
Mendes
4,357956131
4,357956131
What should happen if you select multiple groupby's?
– Shyam Babu
Oct 30 at 5:54
All grouped cells should be rendered as a single cell.
– Mendes
Oct 30 at 7:59
add a comment |
What should happen if you select multiple groupby's?
– Shyam Babu
Oct 30 at 5:54
All grouped cells should be rendered as a single cell.
– Mendes
Oct 30 at 7:59
What should happen if you select multiple groupby's?
– Shyam Babu
Oct 30 at 5:54
What should happen if you select multiple groupby's?
– Shyam Babu
Oct 30 at 5:54
All grouped cells should be rendered as a single cell.
– Mendes
Oct 30 at 7:59
All grouped cells should be rendered as a single cell.
– Mendes
Oct 30 at 7:59
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53055481%2fusing-rowspan-how-to-properly-show-as-a-single-cell-recursive-grouped-data-on-h%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What should happen if you select multiple groupby's?
– Shyam Babu
Oct 30 at 5:54
All grouped cells should be rendered as a single cell.
– Mendes
Oct 30 at 7:59