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)