DataGrid - Scrolling and scroll customization

Scrolling & scroll customization

By default the <ReactDataGrid /> displays custom scrollbars, that look similar to the macOS scrollbars - across all browsers and devices. The scrollbars are highly customizable and can be tweaked and styled as needed. By default, scrollbars hide automatically (autoHide=true) when not scrolling.
Native browser scrollbars can also be used, by specifying nativeScroll=true.
The <ReactDataGrid /> can be scrolled via mouse interaction, and once it is focused it can also be scrolled by keyboard interaction (spacebar, arrow up/down, page up/down) just like any scrollable container in the browser (even when keyboard navigation is disabled).
When using the default scrollbars, you can configure the appearance & behaviour of the scrollbars by using the scrollProps prop. It can be an object with the following keys:
  • autoHide - whether to hide the scrollbars while not scrolling. Defaults to true.
  • alwaysShowTrack - whether to show the scroll track all the time or only when the mouse is over it. Defaults to false, so it will only be displayed on mouseover.
  • scrollThumbWidth - the width of the scroll thumb in pixels. Defaults to 7.
  • scrollThumbStyle - a style object for the scroll thumb.
  • scrollThumbRadius - the radius of the scroll thumb. Defaults to the value of scrollThumbWidth.

Programmatic scrolling

There are a number of methods that can be used to programmatically scroll the grid:
  • scrollToId(id, { direction, force, duration, offset }, callback) - in the simplest scenario, call grid.scrollToId(id) to scroll to the row with id=id.
    Additionally, you can pass other configuration options, like direction (either 'top' or 'bottom', to bring the row the top top or bottom of the viewport), a duration for smooth scrolling (defaults to 100 milliseconds ) and force if you want to force the scrolling to happen even if the row is already visible in the viewport (defaults to false). Optionally, pass a callback - especially useful for being notified when smooth scrolling is finished.
  • scrollToIndex(index, { direction, force, duration, offset }, callback) - call grid.scrollToIndex(index) to scroll to the row at index index.
    Additionally, you can pass the same configuration options accepted by scrollToId.
In addition to the scrolling methods mentioned above, there are other lower-level methods for scrolling:
  • smoothScrollTo(scrollPos, { duration, orientation }, callback) - scroll to the specified scrollPos on the axis defined by orientation (either 'horizontal' or 'vertical' are accepted values). So grid.smoothScrollTo(120, { orientation: 'horizontal'}) sets scrollLeft to 120. duration defaults to 100 milliseconds.
  • scrollLeft setter - Usage: grid.scrollLeft=30 scrolls the grid horizontally 30px.
  • scrollTop setter - Usage: grid.scrollTop=30 scrolls the grid vertically 30px.
  • scrollLeft getter - Usage: grid.scrollLeft - reads the current scrollLeft value.
  • scrollTop getter - Usage: grid.scrollTop - reads the current scrollTop value.
All of the above methods are supported for both the default DataGrid scrollbars and for native browser scrollbars.
Top