DataTables is a powerful Javascript library for adding interaction features to HTML tables and it has only one library dependency (other software upon which it relies in order to work) - jQuery. Being a jQuery plug-in, DataTables makes use of many of the excellent features that jQuery provides, and hooks into the jQuery plug-in system, in the same way as all other jQuery plug-ins.
For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a single body (tbody). An optional footer (tfoot) can also be used.
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
Initialising DataTables
$(document).ready(function() {
$('#table_id').DataTable();
} );
I spend most of my time showing different statistical data in different forms, tables, graphs, etc. I use DataTable almost every day and I can say it's great. One day I had a very big table and the standard layout didn't allow me to achieve what I wanted. What I needed was a vertical layout of the table header. Then I started searching the documentation and realized that DataTable didn't support something like that. So I decided to write a CSS with which I would get it and keep all the functionalities of DataTable. This is still not as flexible as I'd like, but it can serve all those who have encountered such a problem.
CSS
.dataTable {
display: block;
width: 100%;
}
.dataTable thead {
display: block;
position: relative;
}
.dataTable thead tr {
display: flex;
}
.dataTable thead th {
flex-grow: 1;
position: absolute;
top: 100%;
z-index: 9;
width: 140px !important;
left: 0;
height: 80px;
box-sizing: border-box;
color: #fff;
border: unset;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #65696b;
}
.dataTable thead th:nth-child(2) {
top: calc(100% + 80px * 1);
}
.dataTable thead th:nth-child(3) {
top: calc(100% + 80px * 2);
}
.dataTable thead th:nth-child(4) {
top: calc(100% + 80px * 3);
}
.dataTable thead th:nth-child(5) {
top: calc(100% + 80px * 4);
}
.dataTable thead th:nth-child(6) {
top: calc(100% + 80px * 5);
}
.dataTable thead th:nth-child(7) {
top: calc(100% + 80px * 6);
}
.dataTable thead th:nth-child(8) {
top: calc(100% + 80px * 7);
}
.dataTable thead th:nth-child(9) {
top: calc(100% + 80px * 8);
}
.dataTable thead th:nth-child(10) {
top: calc(100% + 80px * 9);
}
.dataTable thead th:nth-child(11) {
top: calc(100% + 80px * 10);
}
.dataTable tbody {
display: flex;
width: 100%;
overflow-x: scroll;
padding-left: 140px;
min-height: calc(80px * 10 + 18px);
}
.dataTable tbody tr {
display: block;
box-sizing: border-box;
}
.dataTable tbody td {
display: block;
height: 80px;
width: 100px;
position: relative;
box-sizing: border-box;
}
.dataTable tbody td:not(:last-child)::before {
border-bottom: 1px solid #f2e7e7f5;
}
HTML
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Country</th>
<th>Town</th>
<th>School</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>UK</td>
<td>London</td>
<td>Lorem</td>
<td>Phd</td>
</tr>
</tbody>
</table>
Final output
Thank you all.
Top comments (0)