add filterbar to long tables

Author: HereThereBeDragons

_static/css/custom.css

@@ -1,16 +1,42 @@
 /* modified from https://github.com/readthedocs/sphinx_rtd_theme/issues/295#issuecomment-560895037 */
 
 .wy-nav-content {
-    max-width: 900px !important;
+  max-width: 900px !important;
 }
 
 /* and fix wrap bug per https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html */
 .wy-table-responsive table td {
-    /* !important prevents the common CSS stylesheets from overriding
-    this as on RTD they are loaded after this stylesheet */
-    white-space: normal !important;
+  /* !important prevents the common CSS stylesheets from overriding
+  this as on RTD they are loaded after this stylesheet */
+  white-space: normal !important;
 }
 
 .wy-table-responsive {
-    overflow: visible !important;
+  overflow: visible !important;
+}
+
+
+.wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 40px;
+}
+
+.description {
+  width: 95%;
+  text-overflow: clip;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  height: 40px;
+}
+
+.btn {
+  background-color: transparent; border-width: 0; outline-width: 0;
+  font-size: 20px; color: #2f58df;
+  position: absolute;
+  right: 5%;
+  cursor: pointer;
 }

_static/js/filter_table.js

@@ -0,0 +1,25 @@
+function filtertable(filterbar_id, table_name) {
+  var input, filter, table, tr, td, i, txtValue, show;
+
+  input = document.getElementById(filterbar_id);
+  filter = input.value.toUpperCase();
+  table = document.getElementById(table_name);
+  tr = table.getElementsByTagName("tr");
+
+  // For each row: loop through all columns and hides the row that 
+  // does not match the case-insensitive search query
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByTagName("td")[0];
+    show = "none";
+    if (td) {
+      for (j = 0; j < tr[i].getElementsByTagName("td").length; j++) {
+          column = tr[i].getElementsByTagName("td")[j];
+          txtValue = column.textContent || column.innerText;
+          if (txtValue.toUpperCase().indexOf(filter) > -1) {
+          show = "";
+          }
+      }
+      tr[i].style.display = show;
+    }
+  }
+}