JQLargeTableContrib

Toggle fullscreen display of large tables

Description

Large tables are difficult to display in browsers if they extend the available space either constraint by the viewport or by additional elements adjacent to the table. It's alright for browsers to display just one thing on the screen and then horizontal and/or vertical scrollbars are displayed by the window. These scrollbars accomplish the ideal balance between trimming large content in the viewport and requiring the user to scroll in two dimensions.

This plugin offers to zoom on on a table if the user decides to focus on a specifically large table. Clicking on a zoom-in icon will cause it to expand to fill the entire browser's viewport, displaying its native scrollbars. You can return to the initial page where the table is displayed in its initial condensed state by clicking on the zoom-out button.

Usage

To be augmented with the large-table interface, tables must be placed inside .jqLargeTable HTML container, like this:

%JQREQUIRE{"LargeTable"}%

<div class="jqLargeTable" data-sticky-header="true" data-height="400" data-scroll-to-row="20" data-scroll-to-col="20">
| *header* | *header* | *header* |
| data | data | data |
| data | data | data |
| data | data | data |
</div>

In this example additional parameter are provided as HTML5 data attributes. Above parameters will

• restrict the height of the container element to 400px thus enforcing vertical scrollbars in normal mode if the number of rows exceed the given height,
• focus the table within the viewport to row 20, column 20,
• stick table headers to the top in zoomed mode and
• only displays the zoom-in button when the contained table exceeds thhe available space.

Available parameteres are:

Name	Description	Default
data-sticky-header	in large view html headers stick to the top of the viewport	false
data-height	height of the html container adding inline scrollbars	null
data-alway-on	allways display the zoom-in/out buttons even when the contained table isn't exceeding the available space	false
data-scroll-to-row	scroll the container to this row of the table
data-scroll-to-col	scroll the container to this column of the table

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)

cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Dependencies

None

Change History

29 Jan 2024

initial release