Responsive Header Selection - What each option means

One of the most popular responsive design pattern is the header selection. In this article we present the various settings for the headers and what they mean.

  • Persist: This setting means that the corresponding column should always appear, regardless of the screen resolution, therefore the header does not appear in the header selection box.
  • Essential: This setting means that the header should appear selected in smaller and larger screen resolutions (smart phones, tables).
  • Optional: This setting means that the header should appear selected only in larger screen resolutions (tablets).
  • None: This setting means that the header should appear only in desktop-sized screen resolutions.

Sample table

Header 1Header 2Header 3Header 4Header 5
1020304050
1020304050
1020304050
1020304050

Try to resize slowly the browser in a desktop PC to see how the headers getting selected/unselected and the corresponding columns appear/disappear.

The default rule form allows you to specify your preferences for the first 4 columns, or so, but it is possible if you edit the corresponding xml rule file to add as many header options as you wish. After you save the rule, try to edit the rules file (an xml file that resides in /templates/tabulizer/rules folder) and locate the following line: <rule element="table" range="all" responsive="3:priorities2:persist,3:essential,4:optional,5:optional" ></rule>
For instance, if I want to make the 10th header essential, I would modify the priorities value as follows:
<rule element="table" range="all" responsive="3:priorities2:persist,3:essential,4:optional,5:optional,10:essential" ></rule>