I'm currently tackling the challenge of creating a MaterialTable that includes an inline editable field with a dropdown feature. The hurdle I am facing appears to lie within the columns object. By utilizing the lookup attribute, it is possible to define key:value pairs as options for the dropdown list. However, my issue arises from the inability to dynamically iterate over a list and include the key-value pairs in the desired manner. It seems to only function properly when formatted like lookup:{ 1: "Test Value", 2: "Test Value 2" }. Could you please clarify if my interpretation is inaccurate.
<MaterialTable
title="Available Attributes"
icons={this.tableIcons}
data={availableAttributesList}
columns={[
{ title: 'Attribute', field: 'name' },
{
title: 'Data Type',
field: 'dataType',
lookup: { dataTypePayload.map((attribute, name) => ({
attribute.id : attribute.dataType
}))}
}
]}
options={{
actionsColumnIndex: -1
}}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
const data = editableAvailableAttributesList;
data.push(newData);
this.setState({ data }, () => resolve());
}
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
const data = editableAvailableAttributesList;
const index = data.indexOf(oldData);
data[index] = newData;
this.setState({ data }, () => resolve());
}
resolve();
}, 1000);
}),
onRowDelete: oldData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
let data = availableAttributesList;
const index = data.indexOf(oldData);
data.splice(index, 1);
this.setState({ data }, () => resolve());
}
resolve();
}, 1000);
})
}}
/>