Scrollable Table and Table Editor Components

Home Next: Scrollable Table API Next: Table Editor API

Gladiator Components >> Scrollable Table and Table Editor Components >> ScrollableTable API >> TableEditor API

Try It!

Scroll through the table and then click on a cell to edit it's contents:

Description

This page provides of demo of two components that are frequently used together: the scrollable table component, and the table editor component.

Scrollable Table

Attempting to display large amounts of tabular data using standard HTML tables can be a challenge. The ScrollableTable class shown here provides a convenient solution because it converts a standard HTML table into a scrollable one. Although there are currently a few constraints present, in general the scrollable table simply inherits the CSS styling from the original HTML table. Therefore designers are for the most part able to concentrate on the CSS table styling attributes with which they are already familiar without having to worry about how to apply CSS to the scrollable table.

Notice that the gScrollableTable employs a liquid layout which fills the dimensions of a containing div (a Gladiator window in the example shown here). To create a fixed-sized table, just place the scrollable table in a fixed-size div.

Table Editor

Sometimes it is more convenient to edit data directly in a tabular form. The Gladiator table editor provides the basis for this functionality. Additional functionality for saving data in a changed table is not provided by the TableEditor class by itself, but can be built using other Gladiator components such as the AJAX-based gRequest class.

In the example shown here, the values in any of the scrollable column cells can be edited. Just click on a cell to change the value. Although not shown here, when necessary it is also possible to edit the values in the fixed columns too -- This is done by simply setting the fixedColumnCount of the gTableEditor to be less than the fixedColumnCount of the gScrollableTable itself.

In addition, the table editor has three modes of operation. The default mode allows editing of any and all cells outside of non-editable "fixed" or "key" column range. In the second mode, editing is restricted to only those cells (tds) where an "editable" attribute on the has been set to "y" (yes). Finally, in the third mode, editing is allowed in all cells except those where the "editable" attribute has been set to "n" (no). Designers should consider using CSS style attributes to make it clear to users which table cells are editable and which are not.

See the API documentation for more information on how to set table editor modes.

Information For Developers

A static, read-only scrollable table can be created using an instance of the Gladiator ScrollableTable class. An editable table can be created by adding a TableEditor. Links to the API documentation for these two classes are provided below:

• ScrollableTable Component API Documentation
• TableEditor Component API Documentation