jQuery Fixed Table left Column and Headers with drag scrolling


This example shows a Table with a Fix left column and header using jQuery. Scrolling on second column horizontally while be able to scroll all columns vertically. Auto scrolling while dragging. Don’t use IE (explained later).

Revisiting my jQuery Timeline Range slider post from March 2015, I wanted to see if the slider could be use in a pure HTML UI interface similar to Adobe Flash or Audio software.

This lead to two major hurdles:

  1.  Build a single table that would scroll horizontally while the first column was fixed and also have all columns scrolled vertically while the headers stayed fixed.
  2. Insert a Slider that would scroll the second column when the user dragged it or resized the slider’s handles.

Part 1 – The Table design:

To start with, I chose to copy the look of Articulate Storyline’s timeline. It is very similar to Adobe Flash and Audio recording software.
On Stackoverflow, I found a four table solution to scrolling tables as mentioned above. However, I needed a single table solution since highlighting and dragging rows required additional code to index and highlight selected rows across four tables.

After many failed attempts, I finally found a way using a sh*t load of CSS, three wrapper divs and a single ScrollTop() trick.
I abandoned the fixed TH headers since I needed a scrolling ruler on the second column which was easier done by wrapping separate divs and adjusting the table top margin.

Note: In IE the horizontal scrollbar will be jumpy (reflow repaints) when scrolling vertically. I added code to hide it when scrolling.

When drag scrolling, IE is wacked. Out-of-order styling, painting and reflow. I added comments in the source code, best to remove and just use Chrome, Firefox or Edge.

Base example of older 4 table Multiple Scrolling interface:

Base example of Single Multiple Scrolling Table with fixed headers:

Part 2 – Scrolling while dragging:

The biggest problem was to not scroll when the slider was visible inside the viewport. Hence, the multitude of variables.

View the finished example (tested on IE11, Chrome, Firefox, Edge):
Download the zip file:

Final Notes: I left out a lot code checking and the interface is just for show.

  1. It expects a least one slider (id=’slider1′).
  2. Never wrote code for auto scrolling if slider edges are outside of the viewport:
    if (SoL < offsetLeft || SoR > offsetRight) { insert more code }
  3. IE scroll repaint and/or reflow was a pain. MS announced it’s finally retiring IE below version 11. However, they still need to fix their scrolling in version 11 or I’m I doing something wrong? (Chrome, Firefox and Edge seem to disagree).
  4. Dragging a track up or down (right click and drag) to sort rows uses rowSorter.js by Gökhan Bora.

keywords:,  jQuery Drag and Scroll, Fixed Table Column and Headers, jQuery Excel table, jQuery audio tracks, jQuery auto scrolling, jQuery drag, jQuery scroll, jQuery fixed table.

About torontographic

looking for work since 2009
This entry was posted in jQuery Fixed Table Column Drag Scrolling and tagged , , , , , , , , . Bookmark the permalink.

1 Response to jQuery Fixed Table left Column and Headers with drag scrolling

  1. Walter Wingnut says:

    Totally agree. Stackoverflow needs to remove the bad code examples and get rid of the self appointed moderators.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s