CODEWITHSUNDEEP
javascriptjqueryhtml
Filth
Filth

Reputation: 3228

Dynamic Table Vertical & Horizontal scrolling sticky header and fixed column

I'm developing a solution that presents table like data to the user and the requirements are as follows:

Horizontal scrolling within fixed dimensions. As you scroll horizontally the first column must be sticky and follow the user as they scroll.

Vertical scrolling with a sticky header as the user scrolls up or down they can always see the header.

Found one solution here: http://www.fixedheadertable.com/ which does what I want however, after implementing with my site the table changes width based on the window dimensions. This is not ideal.

I've posted multiple questions on here about this with no conclusive answers.

Primarily asking if anyone knows of any plugins or done something similar to point me in the right direction.

Upvotes: 0

Views: 4139

Answers (2)

Oron Bendavid
Oron Bendavid

Reputation: 1533

Try SlickGrid:

SlickGrid is an advanced JavaScript grid. Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)

  • Column resize/reorder/show/hide

Upvotes: 1

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

Apply exact width for each column. I hope the sticky header and table contents are in separate tables. So you have to specify width for header as well as table content separately. For example the first <td> of sticky header and first <td> of tabular data should have same width. apply width like this for all columns.

Upvotes: 1

Related Questions