score:0

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;


Related Query

More Query from same tag