Updated DataTables code (#460)

* Updated DataTables code

DataTables.net was using incorrect classes and definitions for rendering sorting etc. throughout the system, this has be rectified.

* Updated changes as requested

src/frontend/components/button/_button.scss

@@ -262,6 +262,7 @@ $btn-border-radius: 23px;
     content: "\E80a";
     margin-right: 0.75rem;
     color: $brand-secundary;
+    transition: all 0.2s ease;
   }
 
   &:hover,
@@ -497,11 +498,11 @@ $btn-border-radius: 23px;
   }
 }
 
-.sorting_asc .btn-sort::before {
+.dt-ordering-asc .btn-sort::before {
   transform: rotate(-90deg);
 }
 
-.sorting_desc .btn-sort::before {
+.dt-ordering-desc .btn-sort::before {
   transform: rotate(90deg);
 }
 

src/frontend/components/data-table/_data-table.scss

@@ -151,8 +151,8 @@ table.dataTable thead .sorting_disabled {
   &:hover,
   &:active,
   &:focus,
-  .sorting_asc &,
-  .sorting_desc & {
+  .dt-ordering-asc &,
+  .dt-ordering-desc & {
     color: $brand-secundary;
 
     .btn-sort {

src/frontend/components/data-table/lib/component.js

@@ -1,10 +1,8 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 
 import { Component, initializeRegisteredComponents } from 'component'
-import 'datatables.net'
-import 'datatables.net-buttons'
 import 'datatables.net-bs4'
-import 'datatables.net-responsive'
+import 'datatables.net-buttons-bs4'
 import 'datatables.net-responsive-bs4'
 import 'datatables.net-rowreorder-bs4'
 import { setupDisclosureWidgets, onDisclosureClick } from 'components/more-less/lib/disclosure-widgets'
@@ -13,6 +11,8 @@ import { bindToggleTableClickHandlers } from './toggle-table'
 
 const MORE_LESS_TRESHOLD = 50
 
+//TODO: It is worth noting that there are significant changes between DataTables.net v1 and v2 (hence the major version increase)
+//      We are currently using v2 in this component, but with various deprecated features in use that may need to be updated in the future
 class DataTableComponent extends Component {
   constructor(element)  {
     super(element)
@@ -43,6 +43,7 @@ class DataTableComponent extends Component {
     this.columns = columns
     this.el.DataTable(conf)
     this.initializingTable = true
+    $('.dt-column-order').remove() //datatables.net adds it's own ordering class - we remove it because it's easier than rewriting basically everywhere we use datatables
 
     if (this.hasCheckboxes) {
       this.addSelectAllCheckbox()
@@ -601,6 +602,10 @@ class DataTableComponent extends Component {
       }
     }
 
+    conf.columns.forEach((column) => {
+      column.orderable = column.orderable === 1
+    });
+
     if (conf.serverSide) {
       conf.columns.forEach((column) => {
         column.render = (data, type, row, meta) => this.renderData(type, row, meta)
@@ -624,7 +629,7 @@ class DataTableComponent extends Component {
           $header.html(`<div class='data-table__header-wrapper position-relative ${column.search() ? 'filter' : ''}' data-ddl='ddl_${index}'>${headerContent}</div>`)
 
           // Add sort button to column header
-          if ($header.hasClass('sorting')) {
+          if ($header.hasClass('dt-orderable-asc') || $header.hasClass('dt-orderable-desc')) {
             self.addSortButton(dataTable, column, headerContent)
           }