Is there a way to group columns in MUI-dataTable? - reactjs

Question

I am using MUIDataTable in my React project. I just want to group columns by adding borders to the table. Please find the code below which I am using.
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
[customBodyRender: (value) => {
return (
<div style={{ borderRight: "solid 2px" }} >
{value}
</div>
)
}][1]
}
},
{
name: "company",
label: "Company",
options: {
filter: true,
sort: false,
}
},
{
name: "city",
label: "City",
options: {
filter: true,
sort: false,
customBodyRender: (value) => {
return (
<div style={{ borderRight: "solid 2px" }} >
{value}
</div>
)
}
}
},
{
name: "state",
label: "State",
options: {
filter: true,
sort: false,
}
},
];
const data = [
{ name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
{ name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
{ name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
{ name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
{ name: "", company: "", city: "Tampa", state: "" },
{ name: "", company: "", city: "", state: "" },
{ name: "", company: "", city: "Hartford", state: "" },
{ name: "", company: "", city: "", state: "" },
{ name: "", company: "", city: "", state: "" },
{ name: "", company: "", city: "", state: "" },
];
const options = {
filterType: 'checkbox',
};
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
This is not working as expected. Either the border height is not proper or in case of no data in the table row, there is no border at all.
I also want the borders to appear on the table headers.
I have attached the snapshot of the output for reference.
OutputImage
Is there a way to fix this?

Answer 1

there is a PR but it's in beta only https://github.com/gregnb/mui-datatables/pull/1441, not yet merged into the master branch