react-bootstrap-table can't access sub object

Question

How can I access sub object in react-bootstrap-table

I am trying to use react-bootstrap-table in my project. My data object looks something like below-

const features = [
  {
    id:1,
    name:'Name 1',
    manufacturer: {
      id:1,
      name:'Vendor 1',
      type:'Type 1'
    }
  },
  {
    id:2,
    name:'Name 2',
    manufacturer: {
      id:9,
      name:'Vendor 9',
      type:'Type 1'
    }
  },
  {
    id:3,
    name:'Name 3',
    manufacturer: {
      id:6,
      name:'Vendor 6',
      type:'Type 3'
    }
  }
]

When I try to access property {manufacturer.name} in my table data field, it doesn't show anything on the screen.

<BootstrapTable data={features} striped hover condensed>
     <TableHeaderColumn dataField={item.id} isKey>ID</TableHeaderColumn>
     <TableHeaderColumn dataField='name'>NAME</TableHeaderColumn>
     <TableHeaderColumn dataField={manufacturere.name}>MANUFACTURER</TableHeaderColumn>
</BootstrapTable>

Haresh Samnani · Accepted Answer · 2022-06-17 12:54:07Z

I figured it out. You have to use custom dataFormat as a prop in TableHeaderColumn for passing the object in a function and then return the respective key field you want. Below is the full code.

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

function App() {
  const features = [
    {
      id: 1,
      name: 'Name 1',
      manufacturer: {
        id: 1,
        name: 'Vendor 1',
        type: 'Type 1',
      },
    },
    {
      id: 2,
      name: 'Name 2',
      manufacturer: {
        id: 9,
        name: 'Vendor 9',
        type: 'Type 1',
      },
    },
    {
      id: 3,
      name: 'Name 3',
      manufacturer: {
        id: 6,
        name: 'Vendor 6',
        type: 'Type 3',
      },
    },
  ];

  const showManufacturer = (data) => {
    return data.id;
  };

  return (
    <div className="App">
      <BootstrapTable data={features} striped={true} hover={true}>
        <TableHeaderColumn dataField="id" isKey={true}>
          ID
        </TableHeaderColumn>
        <TableHeaderColumn dataField="name" dataSort={true}>
          Name
        </TableHeaderColumn>
        <TableHeaderColumn
          dataField="manufacturer"
          dataSort={true}
          dataFormat={showManufacturer}
        >
          Manufacturer
        </TableHeaderColumn>
      </BootstrapTable>
    </div>
  );
}

export default App;

Collectives™ on Stack Overflow

react-bootstrap-table can't access sub object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related