MaterialTable Dynamic Lookup

Question

I am using:

import MaterialTable from "material-table"

I am trying to make the 'lookup' for an editable table dynamic. When I edit the table I want there to be a drop-down with my edit options, not the default blank space. Here are my columns:

let columns = [
    { title: "Country", field: "country", lookup: formatData(props.crmStore.countries)},
    { title: "Employee", field: "owner" , lookup: formatData(props.crmStore.owners) },
    { title: "Email Type", field: "email_type" , lookup: formatData(props.crmStore.emailTypes)},
]

I am storing my data and functions using mobx. The 'formatData' function arranges my data to the correct format:

{1: "Afghanistan",
2: "Albania",
3: "Algeria",
4: "American Samoa",
5: "Andorra",
6: "Angola",
7: "Anguilla",
8: "Antarctica",
9: "Antigua and Barbuda"...}

When the table loads, the data in the columns do not show up, but when I press the edit button in the table there is a select drop-down with the values I want.

If I do not use the 'lookup' and just have the'title' and 'field', the columns renders fine with the data I want. This is my table:

<div className="client-table">
        <Grid>
            <MaterialTable
                title="User data from remote source"
                columns={columns}
                data={props.crmStore.clients}
                options={{
                }}
                icons={tableIcons}
                editable={{
                    onRowUpdate: (newData, oldData) => {
                    },
                    onRowDelete: (oldData) =>
                        new Promise((resolve) => {
                            props.crmStore.deleteClient(oldData, resolve)
                        }),
                }}
            />
    </Grid>
</div>

Can you share how your data looks like? – Domino987 Aug 30 '20 at 19:00 — Domino987, Aug 30 '20 at 19:00

score 0 · Answer 1 · answered Aug 31 '20 at 13:34

You have to make sure updates to the mobx store trigger a react update. I'm suspecting your current code doesn't do this, or does it incorrectly.

Are you using https://github.com/mobxjs/mobx-react ?

In that case you can either use the annotation

@observer
class YourComponent extends ... {
    ....
}

Or you can wrap your class using

const YourWrappedComponent = observer(
    class YourComponent extends React.Component {
        ...
    }
)

MaterialTable Dynamic Lookup

1 Answers1