merging the rows and displaying it in mantine table in react - reactjs

Question

import { Table } from "#mantine/core";
import React from "react";
interface TableProps {
columns: ColumnProps[];
data: {
[key: string]: string | number;
}[];
group: string[];
}
interface ColumnProps {
key: string;
label: string;
actions?: React.ReactNode;
}
export const RowGrouping = ({ columns, data, group }: TableProps) => {
columns = [
{
key: "state_name",
label: "State",
},
{
key: "district",
label: "District",
},
{
key: "gender",
label: "Gender",
},
];
data = [
{
state_name: "Karnataka",
district: "Banglore",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Banglore",
gender: "girls",
},
{
state_name: "Telangana",
district: "Hyderabad",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Mysore",
gender: "Girls",
},
{
state_name: "Karnataka",
district: "Mysore",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Manglore",
gender: "Transgender",
},
{
state_name: "Goa",
district: "North",
gender: "Girls",
},
{
state_name: "Andhra Pradesh",
district: "Chittor",
gender: "Boys",
},
{
state_name: "Andhra Pradesh",
district: "Chittor",
gender: "Girls",
},
{
state_name: "Goa",
district: "South",
gender: "Transgender",
},
{
state_name: "Andhra Pradesh",
district: "Vizag",
gender: "Boys",
},
];
group = ["state_name", "district"];
const mergeData = data.reduce((a, b) => {
const similar = a.find((e) => e.state_name == b.state_name);
return similar ? similar.district.push(b.district) : a.push({ ...b, district: [b.district] }), a;
}, []);
const tableHead = () => {
return (
<tr>
{columns.map((c, index) => (
<th key={index}>{c.label}</th>
))}
</tr>
);
};
const tableData = () => {
return (
<>
{mergeData.map((c, index) => (
<tr key={index}>
<td>{c.state_name}</td>
{c.district.map((d, i) => (
<tr key={i}>
<tr>
<td>{d}</td>
</tr>
</tr>
))}
</tr>
))}
</>
);
};
return (
<div>
<Table withBorder withColumnBorders style={{ width: "50%", margin: "0 auto", marginTop: "50px" }}>
<thead>{tableHead()}</thead>
<tbody>{tableData()}</tbody>
</Table>
</div>
);
};
Here in this example, what I'm trying to do is that I have three columns - state, district and gender, and I'm trying to group the rows and display it in table. but I'm able to group only one column that is state but I'm unable to group district wise, and I don't know how to generalize this without hardcode means data columns should be grouped for any data by column name and displayed in table.[ this is the output I'm getting but i want the districts to be displayed properly means inside karnataka rowspan there should be only banglore, mysore and manglore and inside banglore rowspan there should be boys and girls and same for mysore and chittor as well without hardcoded. please help...

Answer 1

You could adjust your merge fn so that it only pushes the district if it's not already in the district array.
const mergeData = data.reduce((a, b) => {
const similar = a.find((e) => e.state_name == b.state_name);
return (
similar
? !similar.district.includes(b.district) &&
similar.district.push(b.district)
: a.push({
...b,
district: [b.district],
}),
a
);
}, []);
Output :
[
{
district: ["Banglore", "Mysore", "Manglore"],
gender: "Boys",
state_name: "Karnataka",
},
{
district: ["Hyderabad"],
gender: "Boys",
state_name: "Telangana",
},
{
district: ["North", "South"],
gender: "Girls",
state_name: "Goa",
},
{
district: ["Chittor", "Vizag"],
gender: "Boys",
state_name: "Andhra Pradesh",
},
];
Fiddle : https://jsfiddle.net/RyanZee/bnh6u7mx/4/
As for the gender being displayed, you're not returning it in your map:
{
mergeData.map((c, index) => (
<tr key={index}>
<td>{c.state_name}</td>
{c.district.map((d, i) => (
<tr key={i}>
<tr>
<td>{d}</td>
</tr>
</tr>
))}
<td>{c.gender}</td>
</tr>
));
}