Open In App

How to group elements in first table column with bootstrap-table ?

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a front-end framework that is used for developing responsive and mobile-first websites. It is an open-source collection of tools that includes HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as JavaScript plugins for transitions, modals, and other interactive features. Bootstrap is widely used by web developers and designers to create responsive, mobile-friendly sites quickly and easily.

Bootstrap does not have a built-in property for grouping the column elements. However, you can use JavaScript or jQuery libraries such as table sorter, and data tables, to add grouping functionality to your table.

Let us understand how the grouping of elements based on columns works in Bootstrap:

Let us consider the following table which is not grouped currently.

Table before grouping

After applying the grouping property on the first column of the table the table will be sorted based on the first column. Grouping will sort the data of the table in ascending or descending order based on the selected column’s data.

Table after grouping

CDN links: In order to use Bootstrap in your HTML file add the following links inside the head tag of your required HTML file.

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD” crossorigin=”anonymous”>

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN” crossorigin=”anonymous”></script>

Note: Make sure to copy the link correctly otherwise the functionalities of Bootstrap will not work.

Method 1: Grouping elements using the DataTable() method: DataTable() is a function from the DataTable library, which is a powerful jQuery plugin for creating table listings and adding interactions to them. It provides searching, sorting, pagination, and many other features without any configuration.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Group table using DataTable()</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href=
    <script src=
    <script src=
    </script>
</head>
  
<body>
    <div class="container" style="width:40%" ;>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2 >Group first column with bootstrap table</h2>
        <table id="example" class="table table-striped 
            table-bordered" 
            style="width:100%; color:green;">
              
            <thead>
                <tr>
                    <th>Age</th>
                    <th>Name</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>50</td>
                    <td>Elon</td>
                    <td>50000</td>
                </tr>
                <tr>
                    <td>30</td>
                    <td>Garry</td>
                    <td>40000</td>
                </tr>
                <tr>
                    <td>60</td>
                    <td>Bill</td>
                    <td>60000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        $(document).ready(function() {
            $('#example').DataTable();
        });
    </script>
</body>
</html>


       

Output:

 

     

Method 2: Grouping elements using the SortTable() method:

The sortable() function is a custom JavaScript function that can be used to group the rows of an HTML table based on the values in a specific column. The basic idea is to add an event listener to the table header cells so that when a user clicks on a header cell, the table is sorted based on the values in the corresponding column.

The function typically works by comparing the values in each row of the specified column and switching the rows if the values are out of order. The function also toggles the sort order (ascending or descending) each time the user clicks on the header cell.
 

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title> bootstrap Sort Table </title>
  
    <link href=
        rel="stylesheet" integrity=
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
        crossorigin="anonymous">
    <script src=
            integrity=
"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
            crossorigin="anonymous">
    </script>
</head>
  
<body class="m-3">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2 >Group first column with bootstrap table</h2>
    <p><button onclick="mysortTable()">Group Data</button></p>
    <table class="table table-striped table-bordered" 
        id="sortingTable" style="color:green;">
        <thead>
            <tr>
                <th>Age</th>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>77</td>
                <td>Ron</td>
                <td>7777</td>
            </tr>
            <tr>
                <td>73</td>
                <td>Leo</td>
                <td>4321</td>
            </tr>
            <tr>
                <td>44</td>
                <td>Jim</td>
                <td>1234</td>
            </tr>
        </tbody>
    </table>
    <script>
        function mysortTable() {
            var tables, rows, sorting, c, a, b, tblsort;
            tables = document.getElementById("sortingTable");
            sorting = true;
            while (sorting) {
                sorting = false;
                rows = tables.rows;
                for (c = 1; c < (rows.length - 1); c++) {
                    tblsort = false;
                    a = rows.getElementsByTagName("TD")[0];
                    b = rows.getElementsByTagName("TD")[0];
                    if (a.innerHTML.toLowerCase() > 
                        b.innerHTML.toLowerCase()) {
                        tblsort = true;
                        break;
                    }
                }
                if (tblsort) {
                    rows.parentNode.insertBefore(rows, rows);
                    sorting = true;
                }
            }
        }
    </script>
</body>
</html>


Output:

Grouping table using SortTable()

Note: Among the two methods, use SortTable() when you want to group the whole table irrespective of the column whereas if you want to group the elements of the table column-wise, use the DataTable() method.



Last Updated : 28 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads