React Bootstrap Table Example With colSpan

Mar 16, 2020

Hello Guys,

Now, let's see post of react js bootstrap table component. we will help you to give example of react bootstrap table responsive. In this article, we will implement a react bootstrap table colSpan. you will learn react bootstrap table horizontal scroll. Follow bellow tutorial step of react bootstrap table hover color.

If you have to use bootstrap table first install react bootstrap using following npm command. then first import "Table" from "react-bootstrap". after you have to use collspan, rowspan or class etc.. then you have to write in camel case.

Install Bootstrap Command

npm install react-bootstrap bootstrap

then import bootstrap in index.js "bootstrap/dist/css/bootstrap.min.css".

/src/BootstrapTable.js file

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;