<< Go Back Download

Sticky Headers with Horizontal Scrolling and Pagination

This is an experimental ruleset for those who want to have more then one left fixed (sticky) headers, while the rest of table columns scroll to the right. By changing a few parameters you can implement horizontal pagination, meaning that the visitor can click on the next/previous buttons to move to the next or previous block of columns.
Sample Tables

Sticky Headers with Horizontal Scrolling and Pagination Tooltip

header 1header 2Page 1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxPage 2yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyPage 3zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
header 1header 2Page 1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxPage 2yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyPage 3zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Basic configuration:
You can have as many sticky left headers as you wish. To make a column sticly, just add the class "sticky" using a simple column rule. For instance, to make sticky the first and second column add a rule with the following settings:

  • Element: column
  • Range: 1,2
  • Style/CSS Selector: sticky

You can also change some preferences by editing the sticky_columns.js file. The available options are:

  • previous page button label: default value is Previous
  • next page button label: default value is Next
  • first page button label: default value is First
  • last page button label: default value is Last
  • Page Length: default value is 10
  • Show First and Last buttons: default value is 1 (YES)
  • Show Previous and Next buttons: default value is 1 (YES)
  • Show only current page: default value is 1 (YES)
  • Show scrollbar: default value is auto. The available options are auto, always, never
  • Scroll width type: default value is auto. The available options are auto, fixed, full.
  • Scroll width value: the width of the scrolling area, if you have set the type to fixed. The default value is 400px