React Bootstrap Table Example Tutorial

In this tutorial, we will show you how to create a table component using Bootstrap in react js applications.

How to Create Table using Bootstrap in React

Here are steps to implement the bootstrap table:

Step 1 – Create React App

Run the following command on your cmd to create a new react app:

npx create-react-app my-react-app

Run the following command on your cmd:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install and Import React Bootstrap Component

Run the following command on cmd to install React Bootstrap and its dependencies:

npm install bootstrap --save

npm install react-bootstrap bootstrap

Import bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Add Bootstrap table in React</h2>
    </div>
  );
}
export default App;

Step 3 – Create Bootstrap Table Component

Create BootstrapTable.js file in src directory, and create a table component in it:

import React from 'react'
import { Table } from 'react-bootstrap'
class BootstrapTable extends React.Component{
    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-8 offset-md-2">
                        <br /><br />
                        <h3>Bootstrap Table Example</h3><br />
                        <Table striped bordered hover responsive="md">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Product</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Shirt</td>
                                    <td>2</td>
                                    <td>$200</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>T-shirt</td>
                                    <td>1</td>
                                    <td>$100</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Pant</td>
                                    <td>1</td>
                                    <td>$300</td>
                                </tr>
                                <tr>
                                    <td colSpan="3">Total Price</td>
                                    <td>$600</td>
                                </tr>
                            </tbody>
                        </Table>
                    </div>
                </div>
            </div>
        )
    }
}
export default BootstrapTable;

Step 4 – Import Bootstrap Table Component in App.js

In this step, you need to import BootstrapTable.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import BootstrapTable from './BootstrapTable'
function App() {

  return (
    <div className="App">
      <BootstrapTable />
    </div>
  );
}
export default App;

Conclusion

That’s it, you have learned how to implement a bootstrap table in react js apps.

Recommended React JS Posts