rystaf / mvt

Minimum Viable Table - HTML table with sorting, filtering and a sticky header

Minimum Viable Table

HTML table with sorting, filtering, and a sticky header

demo

Installation

<script src="https://cdn.jsdelivr.net/gh/rystaf/mvt/mvt.js"></script>

or you can copy the source!

Usage

MVT(document.querySelector('table'))

sorting dates requires values to be contained in a time element with valid datetime attribute

Sorting Indicators

th[data-sort="-1"]::after {
  content: " ▲";
}
th[data-sort="1"]::after {
  content: " ▼";
}

Filters

Place an input in the th of the column you want to filter

<th>
  <input type="text">
  Name
</th>

Sticky Header

thead {
  position: sticky;
  top: 0;
  background-color: #ddd;
}