<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.nativeScroll=true
.<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).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
.scrollToId(id, { direction, force, duration, offset }, callback)
- in the simplest scenario, call grid.scrollToId(id)
to scroll to the row with id=id
.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
.scrollToId
.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.