How to use bootstrap table in react js?

December 11, 2024

Hi Friends 👋,

Welcome To aHoisting!

To use bootstrap table, you have to import Table from react-bootstrap then use it, that’s how you can use bootstrap table.

Today, I am going to show you, how to use bootstrap table in react js.

Installation

Install the following packages to use react-bootstrap in react js.

npm

npm install react-bootstrap bootstrap

yarn

yarn add react-bootstrap bootstrap

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';

Step 3: Create a Component.

You can use <Table striped bordered hover> to use bootstrap table in react js.

<Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colSpan={2}>Larry the Bird</td>
          <td>@twitter</td>
        </tr>
  </tbody>
</Table>

Use bootstrap table example.

The below code is an example of a React. import Table from react-bootstrap to use bootstrap table in react js.

App.js

import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colSpan={2}>Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </Table>
  );
}

export default App;

In the above code example, I have used the <Table> to use bootstrap table in react js.

Check the output of the above code.

All the best 👍