UX DataTables

Type to search columns, filters, options, and extensions.

↑↓ to navigate · Enter to open · Esc to close

Documentation

Scroller Extension

Virtualized rendering for large datasets

When To Use

Use Scroller when table size is large enough to impact browser rendering performance.

Minimal Example

$dataTable
    ->scroller()
    ->scrollY('480px');

Advanced Example

$dataTable
    ->scroller(
        boundaryScale: 0.5,
        displayBuffer: 9,
        rowHeight: 'auto',
        serverWait: 200,
    )
    ->scrollY('480px');

rowHeight accepts a pixel integer or 'auto' to measure it from the rendered rows. serverWait is the minimum milliseconds Scroller waits between Ajax requests while scrolling quickly.

Frequent Pitfalls

  • Using Scroller without vertical scroll (scrollY).
  • Expecting server-side mode behavior without enabling serverSide(true).