MUI-Datatables columns config conversion - reactjs

Question

I can't work out how to merge data differently based on what data is passed. Here is the prop data....
columns={[
{
name: "Fund Name", //Title
width: "40%", //Colum Width
options: {[
customBodyRender: (value, tableMeta, updateValue) => {
var splitValue = value.split("//");
return (
<div className="fundName">{splitValue[0]}<p>{splitValue[1]}</p></div>
);
}
]}
}, {
name: "Review Date",
width: "20%"
}, {
name: "Company Debt",
width: "20%"
}, {
name: "Alerts",
width: "10%",
options: {[
simpleBodyRender: <Options />
]}
}
}
So if it using customBodyRender I want it to do one thing and if it's doing simpleBodyRender I want it to do it slightly differently.
Here is the merging
let columns = this.props.columns.map(item => {
item.options
? ({ ...item, options: eval(item.options) })
: item
});
Basically I want it to look more like this...
let columns = this.props.columns.map(item => {
if(item.options == "customBodyRenderer"){
item.options
? ({ ...item, options: eval(item.options) })
: item
});
} else if(item.options == "simpleBodyRenderer"){
item.options
? ({ ...item, options: customBodyRender: (value, tableMeta, updateValue) => { eval(item.options) }})
: item
});
}
});
So if it's customBodyRenderer it prints everything but if it's simpleBodyRenderer it fills in the customBodyRender: (value, tableMeta, updateValue) => { for the user.
I hope that makes sense.
Thanks

Answer 1

Storing components in state and other structures is not a good idea at all. Doable but not recommended.
Just forget about eval ... you can only use functions that returns functions ... you can use components as parameters, render it inside other components, HOC, compose ... if you know how (more advanced react knowledge required) ... now KISS.
You can (?) use simple strings as source:
options: {
simpleBodyRender: "options"
}
... and transform it using '.map` into required format (function returning components):
let columns = this.props.columns.map(item => {
if(item.options && item.options.simpleBodyRender){
swith( item.options.simpleBodyRender ) {
case "options":
return { ...item,
options: {
customBodyRender: (value, tableMeta, updateValue) => <Options data={value} />
}
}
case "other options":
return { ...item,
options: {
customBodyRender: (value, tableMeta, updateValue) => <OtherOptions data={value} />
}
}
default: return { ...item,
options: {
customBodyRender: (value, tableMeta, updateValue) => <NotSupportedSimpleBodyRenderer />
}
}
}
}
}
}
Notece: options: { <<< single bracket, object, not {[

Answer 2

You can do it easily by modifying a bit your input data (columns), as follows :
const data = myInput.map((el) => { return { item: el }; });
Then you pass data as the input to your mui-datatable as follows :
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable data={data} columns={columns} options={options} />
</MuiThemeProvider>
In your column definition, 'name' is 'item'
So columns may look like this :
const columns = [
{
label: 'myLabel',
name: 'item',
options: {
display: true,
customBodyRender: (value) => {
return <p>{value.myData}</p>;
},
},
},
//other labels here
];