Vanilla JavaScript Table Enhancement: Search, Sort, Paginate

Vanilla Table Enhancer is a lightweight JavaScript library that transforms static HTML tables into interactive data tables with search, sort, and pagination capabilities.

More Features:

• Intelligent Column Detection: Automatically recognizes numeric and date columns through HTML attributes or JavaScript configuration for proper sorting behavior.
• Flexible API: Supports single or multiple table enhancement through CSS selectors, DOM elements, or element arrays.
• Highly Customizable: Labeling and styling options while maintaining mobile-responsive design out of the box.
• Dynamic Data: Includes refresh and destroy methods for tables with changing content or temporary enhancement needs.
• Accessibility: Keyboard navigation and screen reader support included.
• Cross Browser: Works with IE11 and above when paired with standard polyfills.

Use Cases:

• Admin Panels and Dashboards: Perfect for making user lists, product inventories, or log data easy to navigate without server-side logic.
• Static Site Data Tables: If you have a static site built with a generator like Jekyll or Hugo and want to display sortable data, this library adds the necessary interactivity without a complex setup.
• Client-Side Reporting: For displaying financial data, analytics, or any tabular report where the user needs to sort by different columns or filter results on the fly.

How To Use It:

1. Install Vanilla Table Enhancer via npm for bundled projects:

# NPM
$ npm install vanilla-table-enhancer

2. Or directly reference the necessary JavaScript & CSS files in your document.

<!-- From Local -->
<link rel="stylesheet" href="/dist/vanilla-table-enhancer.css">
<script src="/dist/vanilla-table-enhancer.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vanilla-table-enhancer@latest/dist/vanilla-table-enhancer.css">
<script src="https://unpkg.com/vanilla-table-enhancer@latest/dist/vanilla-table-enhancer.js"></script>

3. Enhance your existing table with a single function call:

VTE.enhance('#tableSelector');

4. Available options to customize the library.

• perPage (number): Sets the initial number of rows to display per page. Defaults to 10.
• perPageOptions (Array<number>): An array of numbers to populate the “rows per page” dropdown selector. Defaults to [10, 25, 50, 100].
• numericCols (Array<number>): An array of 0-based column indexes that should be sorted as numbers.
• dateCols (Array<number>): An array of 0-based column indexes that should be sorted as dates.
• labels (object): An object containing strings and functions to customize the UI text.
  • labels.search (string): The text label for the search input. Defaults to 'Search'.
  • labels.rows (string): The text label for the rows-per-page selector. Defaults to 'Rows'.
  • labels.info (function): A function that generates the “Showing X–Y of Z entries” text. It receives start, end, and total as arguments.
  • labels.noData (string): The text displayed when the table is empty or no search results are found. Defaults to 'No data'.

5. API methods.

• refresh(): Manually re-scans and updates the table. Use this after you programmatically add, remove, or change data in the table’s <tbody>.
• destroy(): Completely removes the search bar, pagination, and all event listeners, restoring the table to its original, static state.

6. You can also define column types using the HTML attribute:

<table id="myTable">
  <thead>
    <tr>
      <th>Product</th>
      <th data-vte="number">Price</th>
      <th data-vte="number">Quantity</th>
      <th data-vte="date">Ship Date</th>
    </tr>
  </thead>
  <tbody>
    <!-- table rows -->
  </tbody>
</table>

7. The library applies minimal base styles using prefixed CSS classes. Override these to match your design system:

.vte-bar {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 8px;
}

.vte-input {
  border: 2px solid #0066cc;
  border-radius: 4px;
  padding: 0.5rem;
}

.vte-page {
  min-width: 32px;
  height: 32px;
  border-radius: 4px;
}

.vte-page.active {
  background: #0066cc;
  color: white;
}

th[data-vte-sort] {
  cursor: pointer;
  user-select: none;
}

th[data-dir="asc"]::after {
  content: " ▲";
}

th[data-dir="desc"]::after {
  content: " ▼";
}

FAQs

Q: Why isn’t my numeric or date column sorting correctly?
A: This usually happens for one of two reasons. First, make sure you’ve defined the column type using either the data-vte="number" attribute on the <th> or the numericCols/dateCols array in the JavaScript options. Second, for dates, ensure the text format in your table cells is something the standard Date.parse() method can understand (like YYYY-MM-DD). Ambiguous formats might be parsed incorrectly.

Q: Can I customize the appearance of the search bar and pagination buttons?
A: Yes. The library adds specific, prefixed CSS classes to all its elements (e.g., .vte-bar, .vte-input, .vte-page). You can write your own CSS to override the default styles. For example, to change the active pagination button’s background color, you would target .vte-page.active.

Q: What is the performance like with a very large table, say 5,000 rows?
A: The initial setup might have a slight delay as it has to read all 5,000 rows into memory. However, once initialized, searching and sorting are very fast because they operate on a JavaScript array, not by reading the DOM. The pagination is what saves browser performance, as it only ever renders a small subset of those rows at a time.

The post Vanilla JavaScript Table Enhancement: Search, Sort, Paginate appeared first on CSS Script.