react-bootstrap-table: dataField can't access subobject

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.

I’m using lodash’s _.get lib to achieve this.

import _ from 'lodash'

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

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}
    >{column.title}</TableHeaderColumn>
))

Working example with the required field is the key. Thanks to ferrwanz and nivek91.

import _ from 'lodash';

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

const columns = [
	{ path: "id", title: "ID", isKey:true },
	{ path: "animal.cat", title: "Cat" },
];

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

Then you need to add to the method render, next code:

render() {
	return(
		<BootstrapTable data={ transactionData }>
                     {tableColumn}   
		</BootstrapTable>
	);
}

I solved the issue without modification of the project 👍 <TableHeaderColumn dataField='Contact' dataFormat={ this.contactFormatter } >Contact</TableHeaderColumn>

and the function : contactFormatter(cell, row){ return ${cell.first} ${cell.last}; }

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

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

Note: need to ad ` around return values.

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>
))

@ferrwanz the key is missings in your code:

import _ from “lodash”;

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

const columns = [ { path: “CPA”, title: “cpa”, isKey: true }, { path: “entreCalles.calleA”, title: “entreCa” } ];

const tableColumn = _.map(columns, column => ( <TableHeaderColumn dataField={column.path} dataFormat={renderCustom} formatExtraData={column} isKey={column.isKey} key={column.path}

{column.title}

</TableHeaderColumn> ));

I was just about to add to this… Why can’t we simply make a PR that uses both the lodash _.get: https://lodash.com/docs/4.17.4#get and _.set: https://lodash.com/docs/4.17.4#set

When retrieving and setting values?

And this is quite common case if you are using graphql.However, you can easily hack it even without eval, google js flattern object you will get the answer.

You can use formatExtraData to hack

const column_meta = [
    {columnName: 'user_detail.phone_number', displayName: 'User Phone'},
];

function extraFormatter(cell, row, extra) {
  return eval(`row.${extra}`);
}

let columns = column_meta.map(i => {
    return <TableHeaderColumn dataField={i.columnName} dataFormat={extraFormatter} formatExtraData={i.columnName}>
        {i.displayName}</TableHeaderColumn>
      });

then add colunms to BootstrapTable.

I did have a look at the code and this seems complicated to implement the way it is made. I doubt this feature will be added in the futur.

using dataFormat to rewrite this cell .

Small workaround in the meantime is using the dataFormat.

Something like this works fine

function nameFormatter(data, cell) {
        return `<p>${cell[data]}</p>`;
}
<TableHeaderColumn width='150' dataField='<nested_object>' 
                   dataFormat={ nameFormatter.bind(this, <property_name>) }>Label</TableHeaderColumn>

Ok, all I can say is thanks for sharing the code. Wait & see

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 =)

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. 😃