Table search using Hyperscript

[schneekluth]

Recently I was dealing with large tables in MKDocs Material and was looking for an easy way to search the table data. I stumbled across Hyperscript.

Turns out Hyperscript handles this task pretty well. My method:

1. Download latest hyperscript.min.js to the javascript asset folder.
2. Include the file in mkdocs.yaml:

   extra_javascript:
     - assets/js/hyperscript.min.js

3. In a markdown document place this <div> right before a table element:

   <div style="display:flex">
     <input class="input-search"
       id="search"
       type="text"
       placeholder="🔍 Search "
       _="on keyup
         if the event's key is 'Escape'
           set my value to ''
           trigger keyup
         else
           show <tr/> in next <tbody/> when its textContent.toLowerCase() contains my value.toLowerCase()" />
   
     <button class="btn-clear md-button md-button--primary"
       _="on click set #search.value to '' then trigger keyup on #search">Clear</button>
   </div>

You can now simply enter search values in the <input> element. Values can be cleared using the button next to the input element or by hitting escape key:

Additionally I applied some CSS styling to the input element to use full width, font size and match the theme's colors:

.input-search {
  border: 0.1rem solid var(--md-primary-fg-color);
  border-radius: 0.1rem;
  font-weight: 700;
  font-size: inherit;
  padding: 0.625em 2em;
  flex: 1;
  margin-right: 0.25em;
}