Column Header Cell Different Width & height

[nameis-NAVEEN]

In my case I am sizing my columns using size . But for few columns the height & widths are not working like the text is not wrapping. Due to this i am losing entire columns sizes. I am using layout mode: "grid" and enabled resizing, column filtering ,sorting . @KevinVandy help me to overcome this problem.

const columns = useMemo(() => {
let arr: any[] = [];
let columnVisibilityObj: any = {};
tableColsJson.viewMode.forEach((item: any) => {
let columnSetupObj: any = {};
if (item.type === "date") {
columnSetupObj = {
accessorFn: (row: any) =>
new Date(parseInt(row[item["field"]]?.replace(/\D/g, ""))),
accessorKey: item["field"],
header: item["name"],
Cell: ({ cell }: any) => getDateCell(cell, userDataObj["Datfm"]),
filterVariant: "date",
filterFn: getDateFilterFn,
muiFilterDatePickerProps: {
format: userDataObj["Datfm"],
},
size: 100,
...columnSetupObj,
};
} else if (item.type === "number") {
columnSetupObj = {
accessorKey: item.field,
header: item["name"],
muiTableBodyCellProps: {
align: "right",
},
muiTableFooterCellProps: {
align: "right",
},
Cell: (cell: any) =>
${currencyFormatter( parseFloat(cell.row.original[item["field"]] || "0.00").toString(), userDataObj["Dcpfm"], getDecimalLength(cell.row.original.Waers) )} ${cell.row.original.Waers},
AggregatedCell: ({ row }: any) => {
let totalCount: any = 0;
row.leafRows.forEach((i: any) => {
totalCount = totalCount + parseFloat(i.original[item.field]);
});
return (

{currencyFormatter(
parseFloat(totalCount)
.toFixed(props.decimalLength)
.toString() || "0.00",
userDataObj["Dcpfm"],
props.decimalLength
)}

);
},
...columnSetupObj,
size: 100,
};
} else if (item.field === "Pspid") {
columnSetupObj = {
accessorKey: item.field,
header: item["name"],
Cell: ({ row, cell }: any) => (
<Link
target="_blank"
href={${window.origin}${ HyperLinkData.viewModeMatter }${cell.getValue()}/${row.original.Vbeln}}
>
{cell.getValue()}

),
muiTableBodyCellProps: {
align: "center",
},
...columnSetupObj,
size: 100,
};
} else if (item.field === "info") {
columnSetupObj = {
accessorKey: item.field,
header: item["name"],
enableColumnFilter: false,
enableSorting: false,
size: 70,
muiTableBodyCellProps: {
align: "center",
},
...columnSetupObj,
};
} else {
columnSetupObj = {
accessorKey: item.field,
header: item["name"],
id: item.field,
...columnSetupObj,
size: item.size,
};
}
// columnSetupObj["enableHiding"] = !item.enablehiding
// ? item.enablehiding
// : true;
columnVisibilityObj[item.field] = item.defaultVisible;
arr.push(columnSetupObj);
});
arr = uniqBy(arr, "accessorKey");
setColumnVisibility(columnVisibilityObj);
return arr;
}, []);

columns=[ {
"name": "Client Pricing Group",
"field": "Zzclientpricinggroup",
"defaultVisible": false,
"size":100
},
{
"name": "Matter Pricing Group",
"field": "Zzmatterpricinggroup",
"defaultVisible": false,
"size":100
}, {
"name": "Billing Rules Status",
"field": "Iserror",
"defaultVisible": false,
"size":100
},]