Simple jQuery Sticky Table Header - oyoTableHeader

oyotableheader is a lightweight jQuery plugin that turns static <thead> elements in long HTML tables into fixed headers that stay visible as users scroll.

This plugin clones your existing table header, positions it fixed, and cleverly manages its visibility and dimensions as you scroll.

It automatically shows the sticky header when needed and hides it once the original table scrolls completely out of view.

More Features:

• Flexible Placement - Can be positioned anywhere, not limited by CSS sticky constraints
• No Bounce Effect - Eliminates the annoying bounce effect common with CSS sticky solutions
• Auto-Resizing - Automatically adjusts to match table dimensions
• Original Header Coverage - Precisely covers the original header without visual glitches

How to use it:

1. Download and include the oyotableheader.js file in your HTML document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/oyotableheader.js"></script>

2. Initialize the plugin on your HTML table. Make sure the table must have a <thead> element:

<table class="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <!-- Additional header cells -->
    </tr>
  </thead>
  <tbody>
    <!-- Table content rows -->
  </tbody>
</table>

$(document).ready(function () {
  const instance = new oyoTableHeader(".myTable");
});

When you call new oyoTableHeader('.myTable'), it doesn't modify the original table's <thead> directly. Instead, it creates a completely new <table> element in memory. This new table (tableHeader) is given position: fixed, and a high z-index to stay on top. It's then inserted into the DOM before your original table (refTable).

3. Add a class for additional styling.

$(instance).addClass("custom-class");

4. Change top offset (useful if you have a fixed navbar).

instance.changeMinTop(60);

FAQs

Does oyotableheader work with dynamically generated tables?

Yes, but you'll need to initialize the plugin after the table is fully rendered in the DOM. If you're adding or removing rows dynamically, the ResizeObserver will handle layout changes automatically.

Can I have multiple sticky headers on the same page?

Absolutely. Simply initialize a separate instance for each table:

var header1 = new oyoTableHeader("#table1");
var header2 = new oyoTableHeader("#table2");

Does the plugin work with nested tables?

Yes, but you'll need to be careful with initialization order and selector specificity to ensure you're targeting the correct table elements.

How does the plugin handle window resizing?

The ResizeObserver automatically detects dimension changes, and the plugin has additional event listeners for window resize events to ensure proper positioning and sizing of the header elements.

Is there a performance impact when using this on very large tables?

For extremely large tables (hundreds of rows), you might notice slight performance impacts during scrolling due to the continuous recalculation of positions. In these cases, consider implementing virtual scrolling or pagination for better performance.

Can I customize the sticky header differently from the original header?

Yes, you can add custom CSS classes to the sticky header and style it independently of the original table header.

How does oyotableheader handle responsive tables?

The plugin works well with responsive tables as long as they maintain their basic structure. The ResizeObserver helps keep everything aligned when the table dimensions change, but you may need additional configuration for complex responsive behaviors.

Changelog:

2025-05-18

• Update

---

This awesome jQuery plugin is developed by oyosoftware. For more Advanced Usages, please check the demo page or visit the official website.