Dynamic Row Span in react mantine tablle - reactjs

Question

import { Table } from "#mantine/core";
import React from "react";
interface TableProps {
columns: ColumnProps[];
data: {
[key: string]: string | number | null;
}[];
groupBy: string;
groupedColumn: string;
}
interface ColumnProps {
key: string;
label: string;
actions?: React.ReactNode;
}
type modifiedType = { [key: string]: string | number | (string | number)[] | null };
export const RowGrouping = ({ columns, data, groupBy, groupedColumn }: TableProps) => {
const transformData = data.reduce<modifiedType[]>((modifiedObj: modifiedType[], dataObj) => {
const similar: modifiedType | undefined = modifiedObj.find((e) => e[groupBy] == dataObj[groupBy]);
const groupedKey = Object.keys(dataObj).find((key) => key.includes(groupedColumn)) ?? "";
return (
similar
? (similar[groupedKey] as (string | number | null)[]).push(dataObj[groupedKey])
: modifiedObj.push({
...dataObj,
[groupedKey]: [dataObj[groupedKey]] as (string | number)[],
}),
modifiedObj
);
}, []);
const tableHead = () => {
return (
<tr>
{columns.map((c, index) => (
<th key={index}>{c.label}</th>
))}
</tr>
);
};
const tableData = () => {
return (
<>
{transformData.map((c, index) => (
<>
<tr key={index}>
<td rowSpan={(c[groupedColumn] as string).length + 1}>{c[groupBy]}</td>
</tr>
{(c[groupedColumn] as (string | number | null)[]).map((a: string | number | null) => (
<tr key={a}>{a?.toString().trim() == "" || a?.toString().trim() == null ? <td> </td> : <td>{a}</td>}</tr>
))}
</>
))}
</>
);
};
return (
<div>
<Table withBorder withColumnBorders>
<thead>{tableHead()}</thead>
<tbody>{tableData()}</tbody>
</Table>
</div>
);
};
Following is the Input data to the above code
columns = [
{
key: "state_name",
label: "State",
},
{
key: "district",
label: "District",
},
];
data = [
{
state_name: "Karnataka",
district: "Banglore",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Banglore",
gender: "Girls",
},
{
state_name: "Telangana",
district: null,
gender: "Boys",
},
{
state_name: "Telangana",
district: "Hyderabad",
gender: "Boys",
},
{
state_name: "Karnataka",
district: "Mysore",
gender: "Girls",
},
{
state_name: "Karnataka",
district: " ",
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",
},
{
state_name: "kerala",
district: "pollachi",
gender: "Boys",
},
];
groupBy = "state_name";
groupedColumn = "district";
below is the output for this code
this code is perfectly okay when there are only two columns but i want to continue to group the remaining columns also here for example gender and again if columns are added it should group them as well... im unable to do it please help and i want to do it without hardcodes. so by removing grouped column and just by giving groupby it should group all columns without altering the props but i can transform the data

Answer 1

Taking the rowspan and colspan values ​​in the header will tire the system less. this way you won't need to do any grouping.
columns = [
{
key: "state_name",
label: "State",
colspan:2
},
{
key: "district",
label: "District",
colspan:3
},
];
Example : `const tableData = () => data?.map((item) => (
<tr>
{columns?.map(({key,colspan,...other}) => (
<td colSpan={colspan}>
item?.[key]
</td>
))}
</tr>
))`