DataGrid scroll modes
Keep column headings visible while users browse rows, or let a short table grow with the page.
New in v2.5.0: named scroll modes and a configurable body height.
Scrollable and full-height tables
The following example demonstrates a stock list in a fixed-height viewport. Switch to full height to display every row without an internal vertical scrollbar.
Configure scrolling
scrollable="scrollable" keeps the header outside the scrolling body. [height] sets the body height in pixels; toolbars, headers and pagers sit outside that measurement. Without a height, regular scrolling retains its existing 24rem maximum.
scrollable="none" renders the header and rows in one table and lets every row take its natural height. Existing [scrollable]="true" and [scrollable]="false" bindings remain supported. Give columns widths when horizontal overflow is required.
<ngb-datagrid [data]="stock" [columns]="columns"
scrollable="scrollable" [height]="320"
[enablePagination]="false" />
Append records at the bottom
The following example demonstrates endless scrolling. Each bottom notification appends 20 shipments. Choose immediate local loading or a simulated network delay. All appended rows remain in the DOM; use virtualization when the list can grow large.
Shipment | Depot | Destination | Cartons |
|---|
Guard against concurrent requests and stop when the returned total is reached. Append with a new array, for example rows.set([...rows(), ...response.data]). For HTTP, clear loading on success and error and keep existing rows on failure. The Load more button gives keyboard users the same action.
Grow only up to a maximum
Use [maxHeight]="240" without a fixed height. A short list takes only the space it needs; a longer list scrolls inside the grid.
Shipment | Depot | Destination | Cartons |
|---|
Choose a mode
- Use regular scrolling for variable-height content, in-grid editing and append-on-demand lists.
- Use full height for short tables where the page itself should scroll.
- Use virtual scrolling for large loaded lists with uniform row heights.
scrollToRow(index) takes a zero-based index in the current processed page. It returns false for invalid indexes, disabled scrolling or a viewport that is not ready. It does not change pages. In virtualRemote mode the index is absolute and may request a new range. scrollTo({row: 20, column: 3}) also reveals a visible-column index. scrollToItem({idField: 'id', id: 30}) finds a loaded item; resolve unloaded IDs to row indexes in your API before jumping.
Keyboard users can Tab into the grid and navigate data cells with the arrow keys. Interactive controls inside cells keep their native keyboard behavior.