How to group elements in first table column with bootstrap-table ?
Last Updated :
29 Jul, 2024
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 groupingAfter 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 groupingCDN 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<script src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src=
"https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js">
</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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
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[c].getElementsByTagName("TD")[0];
b = rows[c + 1].getElementsByTagName("TD")[0];
if (a.innerHTML.toLowerCase() >
b.innerHTML.toLowerCase()) {
tblsort = true;
break;
}
}
if (tblsort) {
rows[c].parentNode.insertBefore(rows[c + 1], rows[c]);
sorting = true;
}
}
}
</script>
</body>
</html>
Output:
Similar Reads
How to change the Width of a Column in Bootstrap Table ?
In Bootstrap, the table is an important component used for organizing and displaying data in rows and columns. Below are the approaches to change the width of a column in the Bootstrap table: Table of Content Using Bootstrap Grid ClassesUsing width AttributeUsing Bootstrap Grid ClassesIn this approa
2 min read
How to add table footers with react-bootstrap-table?
In this article we are going to learn about table footers with react-bootstrap-table.Table footers in React-Bootstrap-Table enable custom content at the bottom of a table. They're created either by defining footer content within column definitions or by rendering a separate footer element outside th
3 min read
How to Create a Four-Column Layout with Bootstrap ?
In Bootstrap, creating a column layout is important for organizing content into a structured grid system. A four-column layout allows for efficient arrangement of content, such as displaying courses, products, or services, with flexibility in responsiveness for various screen sizes. Below are the ap
2 min read
How to make Bootstrap table with sticky table head?
A Bootstrap table with a sticky table head is a table layout where the header row remains fixed at the top of the viewport while scrolling through the table's content. This ensures continuous visibility of column headers, improving data readability and navigation within the table.Syntax:In the CSS f
3 min read
How to make a Row with 7 Equal Columns in Bootstrap ?
Bootstrap is the styling framework to make the web application more attractive. To create a row with 7 equal columns in Bootstrap, you can use the grid system by dividing the row into 12 columns and assigning each column a class such as col-1 for each of the 7 columns. This way, each column will occ
2 min read
How to Apply Bootstrap Grid for Inline Elements ?
The Bootstrap Grid System is a flexible and responsive layout system that allows developers to create complex and responsive web layouts. The grid system uses a series of classes and CSS styles to create rows and columns. The grid system is built using the flexbox layout model, which allows elements
4 min read
How to use Bootstrap to align labels with content into 4 columns ?
The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class "row" and "col" are used to create a grid which can be represented by a number of rows and columns.
2 min read
How to Create a Multi-Column Footer in Bootstrap ?
Bootstrap offers a range of classes that can be employed to design web pages and apply diverse styles. Footers are a crucial element of web design, as they provide users with valuable information and navigation options. With Bootstrap, creating a multi-column footer that is visually appealing and re
3 min read
How to place table text into center using Bootstrap?
Centering table text using Bootstrap involves aligning the content of table cells to the center horizontally, enhancing the presentation and readability of data. This is achieved by using Bootstrap’s built-in classes like text-center, which apply CSS styles for quick and responsive text alignment wi
2 min read
How to set one column control over height in Bootstrap ?
Creating an HTML document using Bootstrap and make more than one column. The task is to set the control to a column over the height using Bootstrap. The way to do this is by utilizing another div interior in the left column. The inward div ought to be position: absolute. Example: HTML <!DOCTYPE h
2 min read