dataField can't access subobject

I have an object which is like that

{
  "person_id": 1,
    "username": "UserTest",
    "created_at": "2015-09-10T21:13:56.000Z",
    "updated_at": "2015-09-10T21:13:56.000Z",
    "deleted_at": null,
    "Person": {
          "id": 1,
          "firstname": "UserTest",
          "lastname": "Obama",
          "note": "DevOps",
          "email": "iam@obama.com",
          "created_at": "2015-09-10T21:13:56.000Z",
          "updated_at": "2015-09-10T21:13:56.000Z",
          "deleted_at": null
    }
}

I can't access the subojbect using

<TableHeaderColumn dataField="Person.firstname">Firstname</TableHeaderColumn>

Is there any workaround not specified in the doc ?

@kopax

Hi @kopax, the nested object does not supported on newest version in this component, sorry for that. But I can add it in the future, but this is not in my plan, so I need more plan or thinking on this feature. :)

I have made a little modification in TableBody.js
I don't know if this is enough for the rest of the feature provided by your lib, could you check a quick look ?

/blob/master/lib/TableBody.js line 101 replaced by :

        var fieldValue = null;

        if( column.name.indexOf('.') != -1 ){
          var depth = column.name.split('.');
          while(depth.length > 0){
            fieldValue = fieldValue ? fieldValue[depth.shift()] : data[depth.shift()]
          }
        }
        else{
          fieldValue = data[column.name];
        }

What do you think ?
I think you should also handle errors.

Edit: I have just tried with filter field, doesn't work (input placeholder is "Person.firstname")

@kopax

Hi @kopax , it's a way to implement this feature and I think it will be OK. but there are a lots of feature in this component, include cell edit, filter ..etc. so I need to consider these part for design this feature, so it will take some time. Anyway, if you just want to "display" the nested data on component, I think your solution is ok :)

@AllenFang

Hi @AllenFang , I am really trying hard to implement subobject management but the problem is that some comments are missing in your code.
Could you provide me further runtime details ?

My idea would be to add a dataPath="Person" to TableHeaderColumn props

@kopax

Hi @kopax , did you folk my project? I cant find your repository. I thinks I can spend a little time to watch out your folk and help you debug :)

I didn't for some (stupid) reasons :

I have two table Person and User
User doesn't have a primaryKey, the indexKey in User is person_id

The current add/edit feature add new User instance to dataSet with wrong nested Object (created key is "Person.firstname", insteand of "Person": { "firstname": ... }

I think I can't use this feature so I will need to do a bunch of modification just for my needs

@kopax

Hi @kopax, you mean you want the add/edit feature work with nested object? If yes, I thinks it's a very very hard work. And you really cant solve the problem on your side, I can help you, but you need give me your folk first

This feature is definitely welcomed. the fact that it does not support nested objects make it feel rather rigid in design. I hope to see this implemented soon =)

@AllenFang

@AllenFang sorry for not replying. I really liked your table unfortunately I wasn't able to implement anything in your code.
I would also love to reuse react-bootstrap-table in the futur so +1 for adding the feature

that's ok, I know this feature is very important, but I'm busy and there are lot of things to do, so I prefer to fix bug first. If I've free time, I'll come back and support this features. Anyway, PR is welcome :)
Thanks

+1
Will try and have a look at this too!

+1

@logolevel

@logolevel does all the features works ?

kopax, yes.

@logolevel

@logolevel thanks so much for this example.

I am trying to aggregate data within one column like animal.firstname + animal.lastname into a path (yes I named my cat with a full name ;)).

Does any one have a solution for that?

@PraxentSupport

building on @PraxentSupport's response. I'm using:
function objectFormat(data, cell) { if(data.constructor===Array){ if(data[0]=='last'){ return ${cell[data.length-1][data[1]]} } return ${cell[data[0]][data[1]]} } return ${cell[data]}; }

dataFormat={ objectFormat.bind(this, [0,'address'])}
or
dataFormat={ objectFormat.bind(this, 'number')}

Note: need to ad ` around return values.

@StohlmanMatteo

@StohlmanMatteo
works fine for me, thanks. just a quick note for all the other coming from google. just hsow how to use `` :-)

Building off the above: (This is using lodash but can work out how to use if dont want to use lodash/underscore)

First create a method in your react component like this replacing 'datapropertywithnested.nestedpropertyname' this your specifics:

depthFormatter(cell, row)
    { 
        console.log("contactFormatter")
        console.log(row)
        console.log(cell)
        let val =  window._.get(row,'datapropertywithnested.nestedpropertyname');
        return <div>{val ? val : 'none found'}</div>;
    }

Then in your table:
<TableHeaderColumn dataField='anything' dataFormat={this.depthFormatter}> Custom </TableHeaderColumn>

However the above solution doesn't support filtering

As such I found the easiest solution is to modily your data before it enters the table to flatten it, such as through:

 let data = tableData;
        data = data.map((item,index) => {
            if(_.has(item,'contact_company.name')) {
                item.contact_company_name = item.contact_company.name;
            }
            return item;
        });

Table as regular:

<BootstrapTable data={data}>
<TableHeaderColumn filter={{ type: 'TextFilter', delay: 100 }} dataSort={true} dataField='contact_company_name'>
Company Contact Name
</TableHeaderColumn>
</BootstrapTable>

sorry guys, as I mention on README, I already decide to create react-bootstrap-table2, I trust it will be better than react-bootstrap-table. A good news is I'll support the nested data in react-bootstrap-table2 start from v0.0.1, bad news is I will not support the nested data in react-bootstrap-table.

Feel free to let me know your idea and any idea/issues is welcome on react-bootstrap-table2

Sorry for inconvenience.

Any updates?

To people finding this thread: Using lodash works well with displaying data but the data presented will not be searchable or sortable.

import _ from 'lodash'

const renderCustom = (cell, row, extra) => {
    const value = _.get(row, extra.path)
    return <div>{value}</div>
}

const filterValue = (cell, row) => {
        //Cells that are subobjects won't hit this metod
        debugger; 
 }

const columns = [
    {path: 'Person.firstname', title: 'Firstname'},
    {path: 'Person.lastname', title: 'Lastname'},
    {path: 'this.is.a.long.path.of.an.object', title: 'Long Path'},
]

const tableColumn = _.map(columns, (column) => (
    <TableHeaderColumn
        dataField={column.path}
        dataFormat={renderCustom}
        formatExtraData={column}
        filterValue={filterValue}
    >{column.title}</TableHeaderColumn>
))

@Ogglas

@Ogglas any idea about sorting the field? or any approach to dataSort and also dataFormat with formatExtraData?

Thanks.

To go furthher into nested fields, i'm passing string and then returning the key/value pair.

const nestedFields = (data, row, field) => {
  let nested_field = field.split(',');
  return data[nested_field[0]][nested_field[1]];
}

<TableHeaderColumn row='1' dataField="torque_sensor" formatExtraData="top_hits,process" dataFormat={nestedFields} dataSort>Process</TableHeaderColumn>

Or the simplest way:

tableDataFormat(cell, index){ 
    return (
    <React.Fragment>
        <span className="d-block">{index.name}</span> 
        <span className="d-block">{index.location}</span>
    </React.Fragment>)
}

<TableHeaderColumn dataSort={ true } dataFormat={this.tableDataFormat}>Name </TableHeaderColumn>

you need also dataField only if you are using isKey={ true } on element

Navigation Menu

Repository navigation

dataField can't access subobject #50

24 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

dataField can't access subobject #50

Description

Activity

AllenFang commented on Sep 12, 2015

kopax commented on Sep 12, 2015

AllenFang commented on Sep 13, 2015

kopax commented on Sep 15, 2015

AllenFang commented on Sep 15, 2015

kopax commented on Sep 15, 2015

AllenFang commented on Sep 15, 2015

lebeier commented on Jan 28, 2016

kopax commented on Jan 28, 2016

AllenFang commented on Jan 28, 2016

juancarlosfarah commented on Jan 29, 2016

ronsc commented on Feb 2, 2016

VenkataKotra commented on Feb 9, 2016

awlh commented on Jun 21, 2016

24 remaining items

kopax commented on Jun 22, 2017

logolevel commented on Jun 23, 2017

romainPellerin commented on Jun 27, 2017

StohlmanMatteo commented on Jul 12, 2017

janpauldahlke commented on Aug 1, 2017

georgewritescode commented on Aug 19, 2017

georgewritescode commented on Aug 19, 2017

AllenFang commented on Aug 20, 2017

maxpdx commented on Dec 12, 2017

Ogglas commented on Dec 25, 2017

AdnanBoota commented on Mar 15, 2019

AdnanBoota commented on Mar 29, 2019

mcmwhfy commented on Apr 10, 2019

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions