Im trying to add data dynamically to lookup property in Material-Table component, and I'm seeing issues.

The lookup is an object, and its definition you can find here in the first example

But if you tried to create that object outside and after that assign it to lookup you will get an error.

So, is there a way to assign an array of object to this lookup property ?

Thanks in advance for your time, any guidance will be appreciated.

Best Regards

Im trying to add data dynamically to lookup property in Material-Table component, and I'm seeing issues.

The lookup is an object, and its definition you can find here in the first example https://mbrn.github.io/material-table/#/docz-examples-06-example-filtering

But if you tried to create that object outside and after that assign it to lookup you will get an error.

So, is there a way to assign an array of object to this lookup property ?

Thanks in advance for your time, any guidance will be appreciated.

Best Regards

• javascript
• reactjs
• material-table

3 Answers 3

I found the way, it using Reduce, and it work perfectly: supposing that you have this array of object:

  const dinamicObject = [
  { id: 4, name: "name" },
  { id: 2, name: "Mehmet" },
  { id: 3, name: "middle" }
  ];

  var obj = dinamicObject.reduce(function(acc, cur, i) {
  acc[cur.id] = cur.name;
  return acc;
  }, {});

And then you assign that to your lookup property in Material-Table component

Check this for more clarification https://codesandbox.io/s/vq2lj0krkl

I hope this help to others

Best regards

Create an object outside of the table.

import React from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
import FilterList from "@material-ui/icons/FilterList";
import Clear from "@material-ui/icons/Clear";
import "./styles.css";

function App() {

  const dynamicLookupObject = { 34: "test1", 63: "test2" }

  // TODO: const createDynamicObject = () => {
       // change object
       // return dynamicLookupObject
     })

  return (
    <div className="App">
      <MaterialTable
        icons={{
          Filter: () => <FilterList />,
          ResetSearch: () => <Clear />
        }}
        columns={[
          { title: "Name", field: "name", defaultFilter: "Meh" },
          { title: "Surname", field: "surname" },
          { title: "Birth Year", field: "birthYear", type: "numeric" },
          {
            title: "Birth Place",
            field: "birthCity",
            lookup: dynamicLookupObject,
            defaultFilter: ["63"], // For numeric,
            emptyValue: () => <div>"dfsdf"</div>
          }
        ]}
        data={[
          { name: "Mehmet", surname: "Baran", birthYear: null, birthCity: 63 },
          {
            name: "Zerya Betül",
            surname: "Baran",
            birthYear: 2017,
            birthCity: 34
          }
        ]}
        title="Filtering Example"
        options={{
          filtering: true,
          maxBodyHeight: 300,
          rowStyle: data =>
            data.surname === "Baran"
              ? { background: "red" }
              : { background: "green" }
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// 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] }