Learn how to add extra-responsive features to all tables or individual tables.
All tables in Paligo's HTML5 outputs are responsive by default and will adapt to the available space on the reader's device.
Even so, large tables can be difficult to use on smaller screens, especially wide tables with lots of columns. To prevent this, you can enable Paligo's extra responsive table features for HTML5 layout. When enabled, you get:
-
Column filter - This adds a Filter button above the table. Readers can select it to display a list of the columns, and can then choose which columns the table shows. They can make the table smaller by setting it to only show those columns that they need at that particular time.
-
Sticky header - The header of the table will be shown at the top, even when the reader scrolls down. This is especially useful with very long tables where the reader wants to scroll down the table, but still needs the header visible so that they can understand the context of each column. As they scroll down, the table header "sticks" in place at the top, so only the table rows scroll up and down.
To enable "extra responsive table" features:
-
Select Layout in the top menu.
Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
-
Select the Layout you want to update or Create a Layout.
Tip
You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.
-
Select Table Styles in the sidebar.
-
Use the Extra Responsive Table Features setting to control the table column filter and the table sticky header.
Choose:
-
Disable (or Default) to turn off the table column filter and table sticky header for all tables.
-
Select a number from 3 to 15 (the number of columns) to turn the extra responsive features on and define when they will appear.
For example, if you set it to 5, the table column filter and table sticky header will only be used for tables that have 5 columns or more.
-
Only selected if you only want to use the table column filter and table sticky header on certain tables.
You will need to use the
roleattribute to specify which tables should use the extra responsive features, see Apply Column Filter and Sticky Header.
-
-
Select Save.
Important
This only applies if you have chosen Only selected in Enable Column Filter and Sticky Header.
To apply column filter and sticky header to specific topics:
-
Select the topic or component in the Content Manager to open it in the Editor.
Alternatively, you can Create a Topic and edit that.
-
Position the cursor inside the table.
-
Select the
tableelement in the Element Structure Menu and choose Go to element. -
Add the
roleattribute in the Element Attributes Panel and set the value toextra-responsive.Important
If there are images in your table, select the
imagedataelement for each image and make sure that it does not have awidthattribute in the Element Attributes Panel.If there is a
widthattribute, delete it. This is because some extra-responsive table features cannot work correctly if images have a fixed width. -
Select Save.
Comments
0 comments
Article is closed for comments.