Version 3.18.1
Show:

DataTable.Scrollable Class

Module: datatable-scroll

Available since 3.5.0

API docs for this extension are included in the DataTable class.

Adds the ability to make the table rows scrollable while preserving the header placement.

There are two types of scrolling, horizontal (x) and vertical (y). Horizontal scrolling is achieved by wrapping the entire table in a scrollable container. Vertical scrolling is achieved by splitting the table headers and data into two separate tables, the latter of which is wrapped in a vertically scrolling container. In this case, column widths of header cells and data cells are kept in sync programmatically.

Since the split table synchronization can be costly at runtime, the split is only done if the data in the table stretches beyond the configured height value.

To activate or deactivate scrolling, set the scrollable attribute to one of the following values:

  • false - (default) Scrolling is disabled.
  • true or 'xy' - If height is set, vertical scrolling will be activated, if
         width is set, horizontal scrolling will be activated.
  • 'x' - Activate horizontal scrolling only. Requires the width attribute is
      also set.
  • 'y' - Activate vertical scrolling only. Requires the height attribute is
      also set.

Item Index