How to Access Nested Fields in React-Bootstrap-table ?
React-Bootstrap-Table provides a set of components and utilities that make it easy to create tables with features like sorting, filtering, pagination, and more. To access nested fields in React-Bootstrap-Table, you can use the dataField property of your column definitions to specify the path to the nested field in your data.
Steps to Create React Application And Installing Module:
- Step 1: Create a React Application using the below command
npx create-react-app <foldername>
- Step 2: After creating your project folder i.e. <foldername>, move to it using the below command.
cd foldername
- Step 3: After creating the ReactJS application, Install the required modules using the below command.
npm i react-bootstrap-table-next
- Step 4: Add the required imports for the react-bootstrap-table
import BootstrapTable from 'react-bootstrap-table-next';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
Project Structure:
Example: Now write down the following code in the App.js file. Here, in the App.js file we will import and render the <MyTable/> Component. Lets see the code for MyTable.jsx file.
Javascript
import React from 'react' ; import BootstrapTable from 'react-bootstrap-table-next' ; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css' ; const columns = [ { dataField: 'id' , // Top-level field text: 'ID' , }, { // Access the nested 'name' field of // the 'geek' object dataField: 'geek.name' , text: 'Name' , }, { // Access the nested 'age' field of the 'geek' object dataField: 'geek.age' , text: 'Age' , }, ]; const MyTable = ({ data }) => { return <BootstrapTable keyField= "id" data={data} columns={columns} />; }; export default MyTable; |
- Now, lets import the MyTable.jsx component in the App.js file.
Javascript
import './App.css' ; import MyTable from './MyTable' ; function App() { const data = [ { id: 1, geek: { name: 'Mahesh' , age: 30, }, }, { id: 2, geek: { name: 'Ramesh' , age: 25, }, }, { id: 3, geek: { name: 'Suresh' , age: 20, }, }, ]; return ( <div className= "App" > <MyTable data={data} /> </div> ); } export default App; |
Step to Run Application:
- Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Contact Us