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;
Source: stackoverflow.com
Related Query
- Cant use variable from React Context to access value of object
- Cant access second child object of an object api response in react
- Cant access object passed to component React
- Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development
- how to access history object in new React Router v4
- How to access the class name of a React object in this.props.children
- React Bootstrap Validation use validated input in sub component
- How to access Object array file into react component?
- How to edit react bootstrap table and save data after editing
- Usign react-router-dom, how can I access browserHistory object from outside a React component?
- can't access object's properties within object in react
- Can't access nested object properties in a single object from JSON call in REACT
- Access nested JSON in React table
- React access DOM element instead of object thru refs
- Access React Object from within page JS?
- Access a react child object key and value pair
- How to make only text of react bootstrap table header clickable
- Expand React Bootstrap Table for more granular data
- how add react-loading in react bootstrap table
- React Child component cant access the context API
- How to make a react table whose rows and columns come from a JSON object
- react bootstrap table button conflict with row clicking
- Dynamically access object with react components in typescript by key
- React setState() callback issue, cant access to output variable
- Date formatting within react bootstrap table
- Disable/Remove Pagination numbers from React Bootstrap Table
- Trouble with defaultSorted and React Bootstrap table Next
- How to make a column as clickable in a react bootstrap table and avoid showing it as text field in "Add Row"?
- React props: Unable to access key in object in array with index both passed with props
- How to access nested object in React js 0.13.3
More Query from same tag
- How do I bundle MUI theme with rollup
- Object.keys.map does't return the original keys
- Next.js saving id passed from next/Link
- How to preserve a component's instance while moving it to another parent component in react?
- Saving object in React.useState
- react fetch data on button click
- My react form is not submitting correctly
- Which method is called when the screen is displayed from the Navigation Stack in React Native
- Checkboxes are not working in todo in react js
- React custom colors chart
- Why need front end stores firebase token?
- Using react and react-bootstrap, stop components from moving to next row when window is resized to be smaller
- Adding margin to font awesome icon in React
- Set default className to an empty string then provide two conditions
- why is first letter dead in react-hook-form input
- NextJS/Ant-design styles and JS bundles delaying to load in staging
- ReactJS create element from an imported element
- Undo API call after component destroy
- React Table Multiple Div
- react fetch data from multiple apis with async await and hooks
- React Redux: 'X is not a function' after using mapDispatchToProps
- How to write test for the HTML element being passed as a prop to a component a and a function is being called from that
- Typescript: Extend type definitions for external package (deck.gl)
- react what is the esiest way to acces the locale
- React: How to conditionally render?
- React, Redux: Update state and re-render children
- TypeError: Cannot assign to read only property 'value' of object react after using the value of state in a function
- Postman works fine with App Script, React forms fail
- after refreshing page and adding new values old localstorage values get erased
- Redux toolkit combineReducers problem.:Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose