custom col sizes

apps/home/static/home/js/tables.js

@@ -29,7 +29,7 @@ function initializeDataTable(tableId, columns) {
                 title: '<input type="checkbox" class="form-check-input table-select-all" />',
                 data: null,
                 orderable: false,
-                className: "text-center col-switch-width",
+                className: "col-checkbox text-center",
                 render: function() {
                     return '<input type="checkbox" class="form-check-input table-select-row" />'
                 }
@@ -482,7 +482,14 @@ function renderErrorMessages($modal, errorObj) {
 
 function renderEditColumn(data) {
     const name = sanitise(data);
-    return `<button type="button" class="btn btn-link text-start text-decoration-none edit-modal">${name}</button>`;
+    return `<span class="act-as-link edit-modal" role="button">${name}</span>`
+}
+
+function renderAnchorColumn(name, href) {
+    name = sanitise(name);
+    href = sanitise(href);
+
+    return `<a href="${href}" class="act-as-link">${name}</a>`;
 }
 
 function renderBooleanColumn(data) {

apps/home/static/home/js/tabs/subs.js

@@ -12,17 +12,14 @@ function initSubscriptionsModule() {
             {
                 title: "Name",
                 data: "name",
-                className: "text-truncate",
+                className: "col-name",
                 render: renderEditColumn
             },
             {
                 title: "URL",
                 data: "url",
-                className: "text-truncate",
+                className: "col-url",
-                render: function(data, type) {
+                render: url => renderAnchorColumn(url, url)
-                    const url = sanitise(data);
-                    return `<a href="${url}" class="btn btn-link text-start text-decoration-none" target="_blank">${url}</a>`;
-                }
             },
             {
                 title: "Channels",
@@ -51,6 +48,7 @@ function initSubscriptionsModule() {
             {
                 title: "Created At",
                 data: "created_at",
+                className: "col-date",
                 render: function(data, type) {
                     let dateTime = new Date(data);
                     return $(`
@@ -67,8 +65,7 @@ function initSubscriptionsModule() {
             {
                 title: "Enabled",
                 data: "active",
-                orderable: false,
+                className: "col-switch text-center form-switch",
-                className: "text-center form-switch",
                 render: function(data, type) {
                     return `<input type="checkbox" class="sub-toggle-active form-check-input ms-0" ${data ? "checked" : ""} />`
                 }

apps/home/static/home/scss/tables.scss

@@ -72,7 +72,7 @@
     @include media-breakpoint-down(md) { margin-left: 0.25rem; }
 
 }
-
+    
 
 // Table
 .table {
@@ -86,11 +86,59 @@
         border-color: inherit !important;
     }
 
+    // Selected rows
+    tr.selected {
+
+        > * {
+
+            color: var(--bs-body-color) !important;
+            box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
+
+        }
+
+        a {
+
+            color: var(--bs-link-color) !important;
+
+        }
+
+
+    }
+
     thead { }
     tbody { }
     tfoot { }
 
     // Custom column sizes
+    @mixin col-styles($width, $min-width: null, $max-width: null) {
+
+        $min-width: if($min-width == null, $width, $min-width);
+        $max-width: if($max-width == null, $width, $max-width);
+
+        width: $width;
+        min-width: $min-width;
+        max-width: $max-width;
+        text-overflow: ellipsis;
+        text-wrap: nowrap;
+        overflow: hidden;
+
+    }
+
+    $col-check: 53px;
+    $col-label: 350px;
+    $col-url: 500px;
+    $col-date: 150px;
+    $col-switch: 100px;
+
+    .col {
+
+        &-checkbox { @include col-styles($col-check); }
+        &-name { @include col-styles($col-label); }
+        &-url { @include col-styles($col-url, $col-url, $col-url * 2); }
+        &-date { @include col-styles($col-date); }
+        &-switch { @include col-styles($col-switch); }
+
+    }
 
 }