so I am using React material Table in like 70 different components, so I've went and made my custom component that contains the material-table so the shared props are in one place and the different ones are passed as props through my customMaterialTable component
in my different components where I'm using the customMaterialTable comp. the columns prop look like this
columns={[{
title: 'Internal CODE',
field: 'mat_code',
render: (rowData) => (
<Tooltip title={'Internal CODE'}>
<p>{rowData.mat_code}</p>
</Tooltip>
),
},
{
title: 'External CODE',
field: 'external_mat_code',
editable: 'never',
},
{
title: 'ENGLISH DESCRIPTION',
field: 'descr_en',
}]}
and in my customMaterialComponent I'm passing the props to the original Mateiral-Table like this
columns={columns.map((column) => {
return {
...column,
cellStyle: {
backgroundColor:
column?.editable === 'never'
? 'rgba(235, 235, 228, 0.54)'
: 'inherit',
},
};
})}
and it is working great but what I want to do is give all the columns a toolTip like in the first one up there
render: (rowData) => (
<Tooltip title={'Internal CODE'}>
<p>{rowData.mat_code}</p>
</Tooltip>
),
the problem is if I do it that way, it means I have to do it like 300 times or so in 300 different places or more, I have access to the text that will be in the tooltip title, but I'm not sure how to render the return method:
return {
...column,
cellStyle: {
backgroundColor:
column?.editable === 'never'
? 'rgba(235, 235, 228, 0.54)'
: 'inherit',
},
};
}
inside of it when I console log each column all I found is something like this:
{
"title": "External CODE",
"field": "external_mat_code",
"editable": "never"
}
I think it's more react related than Material-table