Available options for responsive patterns

Some of the available responsive patterns have options for fine tuning the responsive behavior of your table. Since responsive design is a principle rather a distinct implementation it's always good to bear in mind that a pattern that looks really good in one case may not be appropriate in another. That's why Tabulizer brings you the top best responsive designs to choose from!

Below you will find a summary of the options available to you.

This article applies to Tabulizer version 5.2.5 or earlier.

1. Horizontal Scrollbars

All the available parameters are options, so you can choose not to may any selections.

Width:The width of the container around the table. If you make it smaller than the table, you will force the scrollbars to appear.
Height:The height of the container around the table. If you make it smaller than the table, you will force the scrollbars to appear.
Use Nicescroll:Whether you want to use the Nicescroll jQuery library or not. If you choose to use it, it will make your table appear as if your are viewing it from a smartphone device, even if you are on a desktop environment. You can enable any of the following library options:
  • Enable Zoom: enable zoom for box content.
  • Touch Behavior: enable cursor-drag scrolling like touch devices in desktop computer.
  • Scrollbar Cursor:
    • Display Always: Select if you want to display the cursor always, or auto-hide it.
    • Width: The width of the curstor in pixel (e.g. 5px)
    • Color: The color of the cursor in hex format (e.g. #000000).

2. Header Selection

None:The column will not be included in the header list and it will follow the default responsive breakpoints of the pattern. So, it may or may not be visible depending on the current screen resolution.
Persist:The column will not be included in the header list, but it will always be visible.
Essential:The column will be initially visible in large and medium screen sizes and hidden in small resolution. The user/visitor can make it visible or invisible from the header list.
Optional:The column will be initially visible in large screen sizes and hidden in medium and small resolution. The user/visitor can make it visible or invisible from the header list.
Invisible:The column will be initially hidden regardless of the resolution. The user/visitor can make it visible or invisible from the header list.

3. Fixed Headers + Expand

Expand:The column that will expand to show the other hidden columns beneath it. Note there should one and only one Expand column.
None:The column will not appear hidden under the expand column in any resolution.
Phone:The column will appear hidden under the expand column in small resolutions.
Tablet:The column will appear hidden under the expand column in small to medium resolutions.
All Sizes:The column will appear hidden under the expand column in any resolution.

4. Table Reflow

You can change the responsive breakpoint(s) of the pattern by editing the corresponding CSS file and Javascript file.

5. Flip Headers

You can change the responsive breakpoint(s) of the pattern by editing the corresponding CSS file.

6. Fixed Left Header + Scroll.

You can change the responsive breakpoint(s) of the pattern by editing the corresponding CSS file and Javascript file. You can also change the width of the fixed left column.