Clean up styling of overview software page

Author: laraPPr

docs/available_software/javascripts/populate_overview.js

@@ -36,8 +36,8 @@ function populate_overview(json_data) {
 	    console.log(all_targets)
             console.log([...[{"title": "name"}], ...all_targets])
             const table = new DataTable('#overview_table', {
-		columns: [...[{"title": "name"}], ...all_targets],
-                paging: false,
+		        columns: [...[{"title": "name"}], ...all_targets],
+                paging: true,
                 columnDefs: [
                     {
                         targets: "_all",

docs/available_software/overview.md

@@ -3,7 +3,7 @@
 This table gives an overview of all the available software in EESSI per specific CPU target.
 
 <p id="time"></p>
-<table id="overview_table" class="display" style="width:100%">
+<table id="overview_table" class="ui celled table" style="width:100%">
     <thead>
         <tr>
             <th rowspan="3">Name</th>

mkdocs.yml

@@ -144,6 +144,9 @@ extra_javascript:
   - https://code.jquery.com/jquery-3.7.0.min.js
   - https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js
   - available_software/javascripts/populate_overview.js
+  - https://cdn.datatables.net/plug-ins/2.2.2/pagination/bootstrap_input.js
 extra_css:
   # CSS for popultate_overview
   - https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css
+  - https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css
+  - https://cdn.datatables.net/2.2.2/css/dataTables.semanticui.css