Material-table: lookup on dynamic data

Created on 22 May 2019 · 5Comments · Source: mbrn/material-table

I'm trying to create an editable table that lets users edit and select an option from the dropdown.

I see that the examples use the lookup, but how can I use this if I'm retrieving the data from an API and I don't know all the lookup values it can use? For example, I want to get a list of all users from my API, then allow the user to edit and select a different user from the dropdown.

columns: [ { title: 'Account Name', field: 'accountName', lookup: { 34: '[email protected]', 63: '[email protected]' } } ]

help wanted

Source

samazadi

Most helpful comment

// Suppose you have the following array object from an end point:

const clients = [
    { id: 1, clientname: 'rohit', email: '[email protected]'},
    { id: 2, clientname: 'mohan', email: '[email protected]'}
]

// Now let us convert it to JavaScript Object with key and value pairs:

const clientOptions = {};
clients.map(client => {
    const { id, email } = client;
    clientOptions[ clientid ] = email
})

// Now look at the output by console.log(clientOptions) , we will get the following output:
// Output:
{ 1 : [email protected], 2 : [email protected] }

charantej-kandukuri on 20 Mar 2020

👍4

All 5 comments

Hi @samazadi

You can use editComponent feature. Please look at 3rd example.

mbrn on 25 May 2019

hii @mbrn @samazadi
where is the 3rd example?

linoyco on 30 Jan 2020

👍4

// Suppose you have the following array object from an end point:

const clients = [
    { id: 1, clientname: 'rohit', email: '[email protected]'},
    { id: 2, clientname: 'mohan', email: '[email protected]'}
]

// Now let us convert it to JavaScript Object with key and value pairs:

const clientOptions = {};
clients.map(client => {
    const { id, email } = client;
    clientOptions[ clientid ] = email
})

// Now look at the output by console.log(clientOptions) , we will get the following output:
// Output:
{ 1 : [email protected], 2 : [email protected] }

charantej-kandukuri on 20 Mar 2020

👍4