Add column-sortable and Font Awesome

composer.json

@@ -17,6 +17,7 @@
         "fideloper/proxy": "^4.0",
         "graham-campbell/markdown": "^10.0",
         "guzzlehttp/guzzle": "^6.3",
+        "kyslik/column-sortable": "5.8.*",
         "laravel/framework": "5.8.*",
         "laravel/tinker": "^1.0",
         "pragmarx/google2fa-qrcode": "^1.0",

config/columnsortable.php

@@ -0,0 +1,116 @@
+<?php
+
+return [
+
+    /*
+    spec columns
+    */
+    'columns' => [
+        'alpha' => [
+            'rows' => [],
+            'class' => 'fas fa-sort-alpha',
+        ],
+        'amount' => [
+            'rows' => [],
+            'class' => 'fas fa-sort-amount',
+        ],
+        'numeric' => [
+            'rows' => [],
+            'class' => 'fas fa-sort-numeric',
+        ],
+    ],
+
+    /*
+    whether icons should be enabled
+     */
+    'enable_icons' => true,
+
+    /*
+    defines icon set to use when sorted data is none above (alpha nor amount nor numeric)
+     */
+    'default_icon_set' => 'fa fa-sort',
+
+    /*
+    icon that shows when generating sortable link while column is not sorted
+     */
+    'sortable_icon' => 'fa fa-sort',
+
+    /*
+    generated icon is clickable non-clickable (default)
+     */
+    'clickable_icon' => true,
+
+    /*
+    icon and text separator (any string)
+    in case of 'clickable_icon' => true; separator creates possibility to style icon and anchor-text properly
+     */
+    'icon_text_separator' => ' ',
+
+    /*
+    suffix class that is appended when ascending direction is applied
+     */
+    'asc_suffix' => '-up',
+
+    /*
+    suffix class that is appended when descending direction is applied
+     */
+    'desc_suffix' => '-down',
+
+    /*
+    default anchor class, if value is null none is added
+     */
+    'anchor_class' => null,
+
+    /*
+    default active anchor class, if value is null none is added
+     */
+    'active_anchor_class' => null,
+
+    /*
+    default sort direction anchor class, if value is null none is added
+     */
+    'direction_anchor_class_prefix' => null,
+
+    /*
+    relation - column separator ex: detail.phone_number means relation "detail" and column "phone_number"
+     */
+    'uri_relation_column_separator' => '.',
+
+    /*
+    formatting function applied to name of column, use null to turn formatting off
+     */
+    'formatting_function' => 'ucfirst',
+
+    /*
+    inject title parameter in query strings, use null to turn injection off
+    example: 'inject_title' => 't' will result in ..user/?t="formatted title of sorted column"
+     */
+    'inject_title_as' => null,
+
+    /*
+    allow request modification, when default sorting is set but is not in URI (first load)
+     */
+    'allow_request_modification' => true,
+
+    /*
+    default direction for: $user->sortable('id') usage
+     */
+    'default_direction' => 'asc',
+
+    /*
+    default direction for non-sorted columns
+     */
+    'default_direction_unsorted' => 'asc',
+
+    /*
+    use the first defined sortable column (Model::$sortable) as default
+    also applies if sorting parameters are invalid for example: 'sort' => 'name', 'direction' => ''
+     */
+    'default_first_column' => false,
+
+    /*
+    join type: join vs leftJoin (default leftJoin)
+    for more information see https://github.com/Kyslik/column-sortable/issues/59
+    */
+    'join_type' => 'leftJoin',
+];

package.json

@@ -12,6 +12,7 @@
     "devDependencies": {
         "@bugsnag/js": "^5.2.0",
         "@bugsnag/plugin-vue": "^5.2.0",
+        "@fortawesome/fontawesome-free": "^5.11.2",
         "axios": "^0.19",
         "bootstrap": "^4.3.1",
         "cross-env": "^5.2.0",

resources/sass/app.scss

@@ -5,6 +5,9 @@
 @import "variables";
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+// Font Awesome
+@import '~@fortawesome/fontawesome-free/scss/fontawesome';
+@import '~@fortawesome/fontawesome-free/scss/solid';
 
 .material-icons {
   vertical-align: text-bottom;