Topic: Datatable with complex objects
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.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- 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