CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
dionysus
dionysus

Reputation: 477

Inline MaterialTable Edit with DropDown

I'm attempting to create a MaterialTable with an inline editable field that has a dropdown. The problem seems to be in the columns object. With the lookup attribute, one can specify key:value pairs as dropdown list items. My dilemma seems to be that I am not able to iterate over a list and add the key-value pairs in the dynamic fashion below. It seems to only work when written like lookup:{ 1: "Test Value", 2: "Test Value 2" }. Please explain if my understanding is incorrect.

<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);
        })
    }}
  />

Upvotes: 0

Views: 577

Answers (1)

Erik
Erik

Reputation: 188

The map creates an array of objects, which you have then placed inside another object.

As you've noticed, this won't work. To get the desired format, try this:

<MaterialTable
  // ...other props
  columns={[
    { title: 'Attribute', field: 'name' },
    {
      title: 'Data Type',
      field: 'dataType',
      lookup: dataTypePayload.reduce((acc: any, attribute: any) => {
        acc[attribute.id] = attribute.dataType
        return acc
      }, {})
    }
  ]}
  // ...other props
/>

Hope that helps!

Upvotes: 1

Related Questions