React JS Bootstrap Table Component Example

Sep 06, 2022 . Admin

Hey Guys,

This extensive guide will teach you react js bootstrap table example. I would like to share with you react js bootstrap table component example. I’m going to show you about react bootstrap table not working. This article will give you a simple example of how to use bootstrap table in react.js. So, let us see in detail an example.

Bootstrap is a wold best design framework right now. Currently bootstrap 4 and bootstrap 5 version is running. Bootstrap provides alerts, buttons, badge, card, modal, forms, collapse, navs, pagination etc.

In this post, i will show you step by step how to use bootstrap table component in reactjs app. we will create new react js project and install "react-bootstrap and bootstrap" npm packages for bootstrap, then we will use bootstrap table and display user information. so let's follow below command:

Step 1: Create React JS App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app bootstrap-app

Step 2: Install React-Bootstrap

In this step, we will install bootstrap and react-bootstrap npm package for bootstrap design component. let's run below command:

npm install react-bootstrap bootstrap

Step 3: Import Bootstrap CSS File

In this step, we will import bootstrap css file in index.js file of react js app. so let's add it.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Step 4: Update App.js Component

Here, we will use bootstrap design class and button component for demo. so just update App.js file as the below:

src/App.js

import Table from 'react-bootstrap/Table';

function App() {

  let users = [
      {id: 1, name: "Hardik Savani", email: "hardik@gmail.com"},
      {id: 2, name: "Vimal Kashiyani", email: "vimal@gmail.com"},
      {id: 3, name: "Harshad Pathak", email: "harshad@gmail.com"},
  ];

  return (
    <div>
        <h1>React JS Bootstrap Table Component Example - MyWebtuts.com</h1>
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>

          {users.map((item, i) => (
              <tr>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.email}</td>
            </tr>
            ))}

          </tbody>
        </Table>
    </div>
  );
}

export default App;

Step 5: Run React JS App

All the required steps have been done, now you have to type the given below command and hit enter to run the React app: