I am creating a table that can be exportable using React Material Table. I have one column with a material icon, but it doesn’t get displayed on export, so i resulted to conditional rendering, im hiding the column with the icon on export with export: true
and displaying the actual text in a different column to be displayed on export for export. I have used the property hidden: true
but the contents of my export do not get displayed. Do the properties hidden and export work together. Any advise on better approaches i can use will be appreciated. Thanks
Here is my code :
const columns = [
{
field: '',
title: 'Variance',
render: (list) => {
if(list.objectives.overallStatus === 'COMPLETE' || list.objectives.overallStatus === 'Complete') {
return (<FiberManualRecord style={{color : '#29A15B'}} />)
} else if(list.objectives.overallStatus === 'INCOMPLETE' || list.objectives.overallStatus === 'Incomplete' || list.objectives.overallStatus === null ) {
return (<FiberManualRecord style={{color : '#F44336'}}/>)
}
}
},
{
field: 'var',
title: 'Variance',
export: true,
hidden: true
}
]
<MaterialTable
title="Strategic Objective Reports."
data={items}
columns={columns}
options={{
search: true,
sorting: true,
pageSize: 10,
pageSizeOptions: [10,50,100 ],
exportButton: true
}}