Mode

Scrollable table

Developers can use mode="scroll" to allow a table to scroll vertically. The height of the table is computed as the standard row height multiplied by the table limit. The default limit is 10 and by default 10 rows are shown.

<object-table mode="scroll" limit="5">
   ...
</object-table>

Notice that in a scrollable table, the header along with the horizontal scroll bar is always visible if the table has these elements. The horizontal scroll bar is only present if the table content is wider than than the screen.

Scrollable table with frozen columns

A table with frozen columns can also be scrollable.

Paginated table (using limit)

An object-table is paginated by default. In mode="paginate", the table will use the limit attribute to determine how many rows to display on a single page. The table then computes how many pages there will be based on the total amount of rows available from the query attribute.

In combination with the controls attribute, the position of the page controls (top, bottom or both) can be set. See controls for more information on how to set this up.

If a table displays large amounts of data (more than 10 000 rows), then you will benefit from using a controlled table.

Dynamic modes

Like all fields in object-table, the mode attribute can be set dynamically. Developers can use this to their benefit to scale up tables when large amounts of data is collected over the course of time. Set the mode dynamically to scroll when there are small amounts of data, and change it to paginate as data volumes start to scale up.

<object-table mode="$:computeMode()" limit="10">
   ...
</object-table>

function computeMode(){
    if(DB.users.count() > 500){
      return 'paginate';
    }
    return 'scroll';
}