What is Bootstrap Table | Learn Bootstrap

In this article, I will guide you about BootstrapTable.

While developing a web application we use HTML tables to bind data(show data), in which we also want to do data sorting, data search, data export, responsive table, etc. What if we get everything under one? So, let's discuss Bootstrap table.

What is Bootstrap Table

An extended table of the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation).

How to use Bootstrap Table.

I have created one simple HTML page and javascript file using VS Code.

Step 1

Open HTML page

Add CSS on Head section

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

Add Scripts

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="employee.js" type="text/javascript"></script>

Now, Lets breakdown what we have taken,

In CSS

1. bootstrap.min.css
2. bootstrap-table.min.css - Boostrap Table CSS

In Scripts

1. jquery.min.js
2. bootstrap.bundle.min.js
3. tableExport.min.js - Its export HTML tables to xlsx, xls, cvs, and txt file.
4. jspdf.min.js - It generate pdf at client side
5. jspdf.plugin.autotable.js - Download data in PDF file
6. bootstrap-table.min.js - Bootstrap table JS file
7. bootstrap-table-export.min.js - Bootstrap table extension for export.

Step 2

Now, create table tag inside body

<table id="tblEmployee" class="table table-striped"></table>

Note: I have added bootstrap table classes in table.

1. .table - Basic table
2. table-striped - to add zebra-striping to any table row within the <tbody>.

Now lets see our complete HTML Code

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Bootstrap Table</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
    <section class="content">
        <div class="container-md">
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Employee List</h3>
                </div>
                <div class="table-responsive">
                    <table id="tblEmployee" class="table table-striped"></table>
                </div>
            </div>
        </div>
    </section>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="employee.js" type="text/javascript"></script>
</html>

Step 3

Add our employee.js file reference in HTML.

Now, open employee.js file

Create a sample JSON data

var jsonData = [
    {
        employeeName: 'Vishal Yelve',
        designation: 'Architect',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    }, {
        employeeName: 'Kunal Samant',
        designation: 'Senior Manager',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    },
    {
        employeeName: 'Nitish Pardiwala',
        designation: 'Sr. Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'India'
    },
    {
        employeeName: 'Julia Semigodova',
        designation: 'Finance Manager',
        phoneNumber: '9000000000',
        departmentName: 'Finance',
        country: 'USA'
    },
    {
        employeeName: 'Jessica Densmore',
        designation: 'Human Resource Lead',
        phoneNumber: '9000000000',
        departmentName: 'HR',
        country: 'UK'
    },
    {
        employeeName: 'Nikolay Hais',
        designation: 'Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
    {
        employeeName: 'Teymur Asadov',
        designation: 'Technical Lead',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
    {
        employeeName: 'Edgars Eizvertins',
        designation: 'Sr. Developer',
        phoneNumber: '9000000000',
        departmentName: 'IT',
        country: 'Riga'
    },
];