Creating a Sticky HTML Table Column with JavaScript
In this Javascript tutorial, we will explore a JavaScript code that make the selected html table column sticky.
The fixed column table allows you to keep certain columns visible while scrolling through a large dataset, improving the readability and usability of the table.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Column</title>
<style>
body{ background-color: #f2f2f2; font-family: Helvetica, sans-serif }
th{ cursor: pointer; }
th,td{ border: 1px solid #000; padding: 20px 50px;}
.sticky{ position: sticky; background-color: #f1c40f; color: #fff; }
.sticky-header{ position: sticky; background-color: #333; color: #fff; }
.sticky-right{ right: 0; }
.sticky-left{ left: 0; }
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 21</th>
<th>Header 22</th>
<th>Header 23</th>
<th>Header 24</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
<td>Cell 17</td>
<td>Cell 18</td>
<td>Cell 19</td>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
<td>Cell 23</td>
<td>Cell 24</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
<td>Cell 17</td>
<td>Cell 18</td>
<td>Cell 19</td>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
<td>Cell 23</td>
<td>Cell 24</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
<td>Cell 17</td>
<td>Cell 18</td>
<td>Cell 19</td>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
<td>Cell 23</td>
<td>Cell 24</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
<td>Cell 17</td>
<td>Cell 18</td>
<td>Cell 19</td>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
<td>Cell 23</td>
<td>Cell 24</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
<td>Cell 17</td>
<td>Cell 18</td>
<td>Cell 19</td>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
<td>Cell 23</td>
<td>Cell 24</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
<td>Cell 13</td>
<td>Cell 14</td>
<td>Cell 15</td>
<td>Cell 16</td>
<td>Cell 17</td>
<td>Cell 18</td>
<td>Cell 19</td>
<td>Cell 20</td>
<td>Cell 21</td>
<td>Cell 22</td>
<td>Cell 23</td>
<td>Cell 24</td>
</tr>
</tbody>
</table>
<script>
// Get all table header cells
const headerCells = document.querySelectorAll("#myTable th");
// For each header cell, add a click event listener that calls
// makeColumnSticky function
headerCells.forEach(function(headerCell,index){
headerCell.addEventListener("click", function(){
makeColumnSticky(index);
});
});
// This function adds "sticky" class to all cells in a clicked column
// and removes it from all other cells
function makeColumnSticky(columnIndex){
const table = document.getElementById("myTable");
const cells = table.querySelectorAll("td");
// Remove "sticky" class from all cells in same column
cells.forEach(cell => {
cell.classList.remove("sticky");
cell.classList.remove("sticky-right");
cell.classList.remove("sticky-left");
});
// Remove "sticky-header" class from all header cells
headerCells.forEach(hcell => {
hcell.classList.remove("sticky-header");
});
// Add "sticky-header" class to the clicked header cell
headerCells[columnIndex].classList.add("sticky-header");
// Add "sticky" class to all cells in clicked column
cells.forEach(function(cell, index){
if(columnIndex >= headerCells.length/2){
// Add "sticky-right" class to the right half of the table
headerCells[columnIndex].classList.add("sticky-right");
if(index % headerCells.length === columnIndex){
// Add "sticky" and "sticky-right"
// classes to the cell in the clicked column
cell.classList.add("sticky");
cell.classList.add("sticky-right");
}
}
else{
// Add "sticky-left" class to the left half of the table
headerCells[columnIndex].classList.add("sticky-left");
if(index % headerCells.length === columnIndex){
// Add "sticky" and "sticky-left"
// classes to the cell in the clicked column
cell.classList.add("sticky");
cell.classList.add("sticky-left");
}
}
});
}
</script>
</body>
</html>
Code Explanation:
- Getting Header Cells: The script selects all the table header cells using the querySelectorAll() method and stores them in the headerCells variable.
- Attaching Event Listeners: For each header cell, a click event listener is added. When a header cell is clicked, the makeColumnSticky() function is called, passing the index of the clicked header cell as an argument.
- makeColumnSticky() Function: This function takes the clicked column index as a parameter. It first removes the "sticky" and "sticky-header" classes from all cells and header cells, respectively.
Making Columns Sticky: Based on the clicked column index, the function adds the appropriate classes to the cells and header cells. If the clicked column is in the right half of the table, the "sticky-right" class is added to the header cell. If the column is in the left half, the "sticky-left" class is added. Additionally, the cells in the clicked column are assigned the "sticky" class along with the corresponding "sticky-right" or "sticky-left" class.
OUTPUT:
