updated columns for all tables

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

@@ -600,6 +600,13 @@ const renderPopoverBadgesColumn = (items, iconClass) => {
     return $span.popover()[0];
 }
 
+const renderLinkToSubscription = subscriptionId => {
+    const subTable = $(subTableId).DataTable()
+    const row = subTable.row({id: subscriptionId});
+    const name = row.data().name;
+    return `<span class="act-as-link js-openContentSub" role="button">${name}</span>`
+}
+
 
 // region Get Table Parts
 

apps/home/static/home/js/tabs/content.js

@@ -10,36 +10,38 @@ function initContentModule() {
             {
                 title: "Subscription",
                 data: "subscription",
+                className: "col-1",
+                render: () => renderLinkToSubscription()
             },
             {
                 title: "Item ID",
                 data: "item_id",
-                className: "col-name"
+                className: "col-2"
             },
             {
                 title: "Item GUID",
                 data: "item_guid",
-                className: "col-name"
+                className: "col-2"
             },
             {
                 title: "Title",
                 data: "item_title",
-                className: "col-name"
+                className: "col-2"
             },
             {
                 title: "URL",
                 data: "item_url",
-                className: "col-url"
+                className: "col-2"
             },
             {
                 title: "Content Hash",
                 data: "item_content_hash",
-                className: "col-name"
+                className: "col-2"
             },
             {
                 title: "Blocked",
                 data: "blocked",
-                className: "col-icon",
+                className: "col-1 text-center",
                 render: renderBooleanColumn
             }
         ]
@@ -108,3 +110,15 @@ getTableFiltersComponent(contentTableId).find(".js-tableDeleteBtn").on("click",
         ]
     });
 });
+
+
+// region Open Content Sub
+
+$(contentTableId).on("click", ".js-openContentSub", async event => {
+    const contentTable = $(contentTableId).DataTable();
+    const row = contentTable.row($(event.currentTarget).closest("tr"));
+    const subscriptionId = row.data().subscription;
+
+    $("#subscriptionsTab").click();
+    await openDataModal(subModalId, subscriptionId, `/api/subscriptions/${subscriptionId}/`);
+});

apps/home/static/home/js/tabs/filters.js

@@ -11,18 +11,18 @@ function initFiltersModule() {
             {
                 title: "Name",
                 data: "name",
-                className: "col-name",
+                className: "col-4",
                 render: renderEditColumn
             },
             {
                 title: "Match",
                 data: "match",
-                className: "col-name"
+                className: "col-4"
             },
             {
                 title: "Algorithm",
                 data: "matching_algorithm",
-                className: "col-date",
+                className: "col-2",
                 render: function(data) {
                     switch (data) {
                         case 1: return "Any Word";
@@ -40,13 +40,13 @@ function initFiltersModule() {
             {
                 title: "Case-Sensitive",
                 data: "is_insensitive",
-                className: "col-date text-center",
+                className: "col-1 text-center",
                 render: data => renderBooleanColumn(!data)
             },
             {
                 title: "Type",
                 data: "is_whitelist",
-                className: "col-date",
+                className: "col-1",
                 render: data => data ? "Only Allow" : "Reject All"
             }
         ]

apps/home/static/home/js/tabs/styles.js

@@ -11,7 +11,7 @@ function initMessageStylesModule() {
             {
                 title: "Name",
                 data: "name",
-                className: "col-name",
+                className: "col-2",
                 render: (name, type, style) => {
                     const elem = renderEditColumn(name);
                     return style.auto_created ?
@@ -22,59 +22,61 @@ function initMessageStylesModule() {
             {
                 title: "Embed",
                 data: "is_embed",
-                className: "col-icon",
+                className: "col-1 text-center",
                 render: renderBooleanColumn
             },
             {
                 title: "Colour",
                 data: "colour",
-                className: "col-hex",
+                className: "col-1 text-center",
                 render: renderHexColourColumn
             },
             {
                 title: "Hyperlinked",
                 data: "is_hyperlinked",
-                className: "col-icon-wide",
+                className: "col-1 text-center",
                 render: renderBooleanColumn
             },
             {
                 title: "Authored",
                 data: "show_author",
-                className: "col-icon-wide",
+                className: "col-1 text-center",
                 render: renderBooleanColumn
             },
             {
                 title: "Timestamped",
                 data: "show_timestamp",
-                className: "col-icon-wide",
+                className: "col-1 text-center",
                 render: renderBooleanColumn
             },
             {
                 title: "Images",
                 data: "show_images",
-                className: "col-icon",
+                className: "col-1 text-center",
                 render: renderBooleanColumn
             },
             {   
                 title: "Fetch Images",
                 data: "fetch_images",
-                className: "col-icon-wide",
+                className: "col-1 text-center",
                 render: renderBooleanColumn
             },
             {
                 title: "Title Mutator",
                 data: "title_mutator_detail",
-                render: (data, type, row) => renderMutatorColumn(row.title_mutator_detail)
+                className: "col-1",
+                render: (data, type, row) => row.title_mutator_detail.name
             },
             {
                 title: "Description Mutator",
                 data: "description_mutator_detail",
-                render: (data, type, row) => renderMutatorColumn(row.description_mutator_detail)
+                className: "col-1",
+                render: (data, type, row) => row.description_mutator_detail.name
             },
             {
                 title: "Editable",
                 data: "auto_created",
-                className: "text-center",
+                className: "col-1 text-center",
                 render: function(data) {
                     const icon = renderBooleanColumn(!data);
                     if (!data) {