Highlight which columns are being shown

Author: pflooky

docs/javascripts/tableselect.js

@@ -35,14 +35,29 @@ document$.subscribe(function() {
 
                 let columnIdx = el.getAttribute("data-column");
                 let column = dataTable.column(columnIdx);
+                let isColVisible = column.visible();
 
-                // Toggle the visibility
-                column.visible(!column.visible());
+                // Toggle the visibility of the column
+                column.visible(!isColVisible);
+                // Toggle the highlighting of the button
+                if (el.classList.contains("md-button-column-visible")) {
+                    el.classList.remove("md-button-column-visible");
+                } else {
+                    el.classList.add("md-button-column-visible");
+                }
             });
         });
 
+        // Toggle on the visible buttons
+        document.querySelectorAll(".md-button.toggle-vis").forEach((el) => {
+            if (parseInt(el.getAttribute("data-column")) < 4) {
+                el.classList.add("md-button-column-visible");
+            }
+        });
+
+        // Toggle on the visible columns
         let numCols = dataTable.columns().nodes().length;
-        if (numCols > 4) {
+        if (numCols >= 4) {
             for (let i = 4; i < numCols; i++) {
                 let column = dataTable.column(i);
                 column.visible(false);

docs/stylesheets/extra.css

@@ -17,3 +17,7 @@
 .sorting_disabled {
     font-size: 0.8rem;
 }
+
+.md-button-column-visible {
+    background-color: royalblue;
+}

site/javascripts/tableselect.js

@@ -35,14 +35,29 @@ document$.subscribe(function() {
 
                 let columnIdx = el.getAttribute("data-column");
                 let column = dataTable.column(columnIdx);
+                let isColVisible = column.visible();
 
-                // Toggle the visibility
-                column.visible(!column.visible());
+                // Toggle the visibility of the column
+                column.visible(!isColVisible);
+                // Toggle the highlighting of the button
+                if (el.classList.contains("md-button-column-visible")) {
+                    el.classList.remove("md-button-column-visible");
+                } else {
+                    el.classList.add("md-button-column-visible");
+                }
             });
         });
 
+        // Toggle on the visible buttons
+        document.querySelectorAll(".md-button.toggle-vis").forEach((el) => {
+            if (parseInt(el.getAttribute("data-column")) < 4) {
+                el.classList.add("md-button-column-visible");
+            }
+        });
+
+        // Toggle on the visible columns
         let numCols = dataTable.columns().nodes().length;
-        if (numCols > 4) {
+        if (numCols >= 4) {
             for (let i = 4; i < numCols; i++) {
                 let column = dataTable.column(i);
                 column.visible(false);

site/sitemap.xml.gz

@@ -17,3 +17,7 @@
 .sorting_disabled {
     font-size: 0.8rem;
 }
+
+.md-button-column-visible {
+    background-color: royalblue;
+}