Datatable with complex objects


Topic: Datatable with complex objects

mclark asked 6 years ago

Does MDBDataTable support complex objects?

data: { rows: [ { name: "Jim", address: { address1: "1 Main St." }, { name: "Jim", address: { address1: "1 Main St." }, ] }, columns: [ { label: "Person", field: "name", sort: "asc", width: 100 }, { label: "Address", field: "address.address1", sort: "asc", width: 100 } ]

Receiving this error: Objects are not valid as a React child (found: object with keys {address1})


Anna Morawska staff answered 6 years ago

Hi there, Yes, please check our documentation:https://mdbootstrap.com/docs/react/tables/datatables/#a-usage( Tab "API" -> Usage -> Object structure)

Best,Ania


mclark answered 6 years ago

Hi Anna,

Thanks for the response, but I must be missing something. I have an array of Person objects. Person has 2 properties--name and address. Address is an object. I'm trying to display a 2-column table with the person's name in the first column and street address in the second. When I try to use the field value of 'address.address1' to access the street address, I get the error above. Either MDBTable doesn't support complex objects or (more likely) I'm doing it wrong. How should I be specifying the address.address1 field? Or do I have to flatten the object in memory? Thanks


Anna Morawska staff answered 6 years ago

Hi there,

try something like this:

import React from 'react';import { MDBDataTable } from 'mdbreact';

    const DatatablePage = () => {


      const data = {
        rows: [{name: "Jim",  "address.address1": "1 Main St."}, {name: "Bob",  "address.address1": "2 Main St."}],
        columns: [ { label: "Person", field: "name", sort: "asc", width: 100 }, { label: "Address", field: "address.address1", sort: "asc", width: 100 } ]
      }

      return (
        <MDBDataTable
          striped
          bordered
          hover
          data={data}

        />
      )
    }

    export default DatatablePage;

mclark commented 6 years ago

Well, that works, but that's just flattening the object. The actual object structure from an api is { name: Jim, address: { address1: '1 main st.' } } To accomplish the structure in your example, I would have to map the object to the structure you suggest--right?


Anna Morawska staff commented 6 years ago

That's right, you have to adjust your data to match the object pattern which is described in the documentation.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags