How to get and link nested value to field passing columns to Material Table

Question

I'm trying to create a table and I have nested data like this:

[{
  id: 24,
  name: "DANIEL TSUTOMU OBARA",
  number: "134",
  phone: "11111111111",
  rg: "4034092666",
  EmployeeStatus: {
    createdAt: "2019-08-07T14:38:52.576Z"
    description: "Documentos rejeitados"
    id: 3
    updatedAt: "2019-08-07T14:38:52.576Z"
  },
  Sector: {
    id: 2,
    name: "Controladoria"
  }
}]

And have this structure columns table:

columns: [
          { title: "Nome", field: "name" },
          { title: "CPF", field: "cpf" },
          { title: "Função", field: "FunctionId", lookup: {} },
          {
            title: "Setor",
            field: "SectorId",
            lookup: {}
          },
          {
            title: "Status",
            field: "EmployeeStatus", <------- I want to get description here
            editable: "never"
          }
        ],

Then, I need to pass these columns into my Material-table like this:

<MaterialTable
  columns={state.columns}
  data={state.data}
  title=""
  icons={tableIcons}
  editable={{
      onRowAdd: newData => createInstructor(newData),
      onRowUpdate: async (newData, oldData) =>
        updateInstructor(newData, oldData),
      onRowDelete: oldData => deleteInstructor(oldData)
    }}
  />

So, how I can do that access nested data into column field?

Thanks!

give a sample input, sample output. Paste code, not image – Dhananjai Pai Oct 10 '19 at 17:35 — Dhananjai Pai, Oct 10 '19 at 17:35

score 1 · Answer 1 · answered Oct 10 '19 at 18:18

Please find the below solution. I am expecting the data to have other objects too, so finding the first object with the key available.

let data = [{
  id: 24,
  name: "DANIEL TSUTOMU OBARA",
  number: "134",
  phone: "11111111111",
  rg: "4034092666",
  EmployeeStatus: {
    createdAt: "2019-08-07T14:38:52.576Z",
    description: "Documentos rejeitados",
    id: 3,
    updatedAt: "2019-08-07T14:38:52.576Z"
  },
  Sector: {
    id: 2,
    name: "Controladoria"
  }
}]

let columns = [
          { title: "Nome", field: "name" },
          { title: "CPF", field: "cpf" },
          { title: "Função", field: "FunctionId", lookup: {} },
          {
            title: "Setor",
            field: "SectorId",
            lookup: {}
          },
          {
            title: "Status",
            field: "EmployeeStatus",
            editable: "never"
          }
        ];
        
let columnToUpdate = columns.find(obj => obj.title==="Status"); //find the column in columns array

let desc = data.find(obj => Object.keys(obj).includes('EmployeeStatus')).EmployeeStatus.description; // get description

columnToUpdate.field = desc; // mutate the object

console.log(columns);

So.. is almost that but I need pass only the reference like a "description" to pass to table and then automatically the data is linked. — Daniel Obara, Oct 10 '19 at 19:30

score 0 · Accepted Answer · answered Oct 10 '19 at 20:42

I just decided to use lookup functionality and solve in this way for now.

const [state, setState] = useState({
 columns: [
  { title: "ID", field: "id", editable: "never" },
  { title: "Nome", field: "name" },
  { title: "CPF", field: "cpf" },
  { title: "Função", field: "FunctionId", lookup: {} }, // 3
  {
    title: "Setor",
    field: "SectorId",
    lookup: {}
  }, // 4
  {
    title: "Status",
    field: "EmployeeStatusId",
    lookup: {},
    editable: "never"
  }, // 5
]});
....
await api
  .get(`/employee-status`)
  .then(result => {
    status = formatSectors(state, result, 5);
  })
.....
const formatSectors = (state, result, position) => {
    let columns = state.columns;
    const indexColumnSector = 4;
    columns[position].lookup = result.data.rows.reduce(
      (accumulator, currentValue) => {
        accumulator[currentValue.id] =
          position === indexColumnSector
            ? currentValue.name
            : currentValue.description;
        return accumulator;
      },
      {}
    );
    return columns;
  };

How to get and link nested value to field passing columns to Material Table

2 Answers2