Different size array properties inside json entries

[VagnerDomingues]

I have the folowing data formaters:

function returnWinnings(cell, row) {
  return row.winnings;
}
function returnUsed(cell, row) {
  return row.used;
}
function returnTotal(cell, row) {
  return row.total;
}
function returnDate(cell, row) {
  return row.date;
}

when i running the cell returns null, but the row returns the properties i need like this:
{date: isodate, winnings: x, used: y, total:z}

so i assume i'm returning the correct values...
the thing is, service1 has a lower number of elements than service2, and service2 lower than service3 so on, could it be a limitation of the package? it should always return the same ammount of data to fill the table properly...?

also i could be making some mistake so please please check the...

rest of the code:

<BootstrapTable data={this.props.tableData} striped hover condensed height='600' scrollTop={'Top'}>

          <TableHeaderColumn row='0' rowSpan='2' isKey={true} dataField='service1' dataFormat={returnDate} headerAlign='left' dataAlign='left'>Date</TableHeaderColumn>

          <TableHeaderColumn row='0' colSpan='3'>service1</TableHeaderColumn>
          <TableHeaderColumn row='0' colSpan='3'>service2</TableHeaderColumn>
          <TableHeaderColumn row='0' colSpan='3'>service3</TableHeaderColumn>
          <TableHeaderColumn row='0' colSpan='3'>service4</TableHeaderColumn>

          <TableHeaderColumn row='1' dataField='service1' headerAlign='right' dataAlign='right' width='120' dataFormat={returnTotal} columnClassName={formatTotal.bind(this)} className='th-total'>Total</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service1' headerAlign='right' dataAlign='right' width='120' dataFormat={returnUsed} columnClassName={formatUsed.bind(this)} className='th-used'>Used</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service1' headerAlign='right' dataAlign='right' width='120' dataFormat={returnWinnings} columnClassName={formatWinnings.bind(this)} className='th-winnings'>Winnings</TableHeaderColumn>

          <TableHeaderColumn row='1' dataField='service2' headerAlign='right' dataAlign='right' width='120' dataFormat={returnTotal} columnClassName={formatTotal.bind(this)} className='th-total'>Total</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service2' headerAlign='right' dataAlign='right' width='120' dataFormat={returnUsed} columnClassName={formatUsed.bind(this)} className='th-used'>Used</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service2' headerAlign='right' dataAlign='right' width='120' dataFormat={returnWinnings} columnClassName={formatWinnings.bind(this)} className='th-winnings'>Winnings</TableHeaderColumn>

          <TableHeaderColumn row='1' dataField='service3' headerAlign='right' dataAlign='right' width='120' dataFormat={returnTotal} columnClassName={formatTotal.bind(this)} className='th-total'>Total</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service3' headerAlign='right' dataAlign='right' width='120' dataFormat={returnUsed} columnClassName={formatUsed.bind(this)} className='th-used'>Used</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service3' headerAlign='right' dataAlign='right' width='120' dataFormat={returnWinnings} columnClassName={formatWinnings.bind(this)} className='th-winnings'>Winnings</TableHeaderColumn>

          <TableHeaderColumn row='1' dataField='service4' headerAlign='right' dataAlign='right' width='120' dataFormat={returnTotal} olumnClassName={formatTotal.bind(this)} className='th-total'>Total</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service4' headerAlign='right' dataAlign='right' width='120' dataFormat={returnUsed} columnClassName={formatUsed.bind(this)} className='th-used'>Used</TableHeaderColumn>
          <TableHeaderColumn row='1' dataField='service4' headerAlign='right' dataAlign='right' width='120' dataFormat={returnWinnings} columnClassName={formatWinnings.bind(this)} className='th-winnings'>Winnings</TableHeaderColumn>
</BootstrapTable>

and the error i'm getting:

Uncaught (in promise) TypeError: n.props.data.slice is not a function
at new t (BootstrapTable.js:158)
at d._constructComponentWithoutOwner (ReactCompositeComponent.js:298)
at d._constructComponent (ReactCompositeComponent.js:285)
at d.mountComponent (ReactCompositeComponent.js:188)
at Object.mountComponent (ReactReconciler.js:46)
at h.mountChildren (ReactMultiChild.js:238)
at h._createInitialChildren (ReactDOMComponent.js:697)
at h.mountComponent (ReactDOMComponent.js:516)
at Object.mountComponent (ReactReconciler.js:46)
at d.performInitialMount (ReactCompositeComponent.js:371)
at d.mountComponent (ReactCompositeComponent.js:258)

[VagnerDomingues]

i have managed to manipulate my multidimensional array into a flat, using .concat from native array and merging with groupBy() from loodash, a hell of work.. but now it's running...

[AllenFang]

sorry for lately reply and it's bust on this month, react-bootstrap-table only accept an array of source data and we dont support the nest object currently, but I'll consider to add it in the future. Let me know if you have any questions.

[hielfx]

@VagnerDomingues you can use lodash _.get as it was suggested here. I'm currently using it and i am very happy with the results; just create a format function and pass it to the dataFormat prop:

const formatPlate = (cell, row, extra) => (<div>{_.get(row, 'car.plate')}</div>);

NOTE: in my code, the row is the full object, not only the object with the shown properties. Also I'm using react, that's why the curly brackets