text: Scroll Modes Basics
  The KendoReact Data Grid provides options for rendering its content in a scrollable or non-scrollable mode by configuring its
  scrollable property.
  You can also enable the virtual scroll mode of the Grid by setting
  scrollable to
  virtual. For more information, refer to the article on virtual scrolling.
  The Grid component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.
  Scrollable Mode
  When scrolling is enabled, the content of the Grid is rendered as tables—one for the header area, another one for the scrollable data area, and a third one for the footer area. This behavior ensures that the header and footer areas of the Grid are always visible while the user scrolls vertically.
  Getting Started
  The scrollable mode of the Grid is enabled by default. You can configure the scrollable behavior through the
  scrollable option which also requires you to set the height of the Grid through its
  style property.
  Conditional Scrolling
  By configuring the
  style.maxHeight property, you can set the Grid in scrollable mode only when its rendered content exceeds certain height limits. If the content does not exceed the set maximum height, the height of the Grid will be the same as the height of its content.
  Infinite Scrolling
  After the user scrolls to the end of the page, the Grid enables you to load more records by appending additional pages of data on demand. To implement the infinite scrolling feature, use the
  onScroll event and add more data once the user is near to the bottom of the Grid.
  The following example demonstrates how to dynamically add data to the Grid while the user is scrolling.
  - Example
  - View Source
  - Open In Stackblitz
  - main.jsx
  - products.json
  import React from 'react'; import ReactDOM from 'react-dom'; import { Grid, GridColumn as Column } from '@progress/kendo-react-grid'; import products from './products.json'; const availableProducts = products.slice(); class App extends React.Component { state = { gridData: availableProducts.splice(0, 20) } scrollHandler = (event) => { const e = event.nativeEvent; if (e.target.scrollTop + 10 >= e.target.scrollHeight - e.target.clientHeight) { const moreData = availableProducts.splice(0, 10); if (moreData.length > 0) { this.setState({ gridData: this.state.gridData.concat(moreData) }); } } }; render() { return ( <div > <Grid style={{ height: '400px' }} data={this.state.gridData} onScroll={this.scrollHandler} > <Column field="ProductID" title="ID" width="40px" /> <Column field="ProductName" title="Name" width="250px" /> <Column field="Discontinued" width="250px" /> <Column field="UnitPrice" width="250px" /> <Column field="QuantityPerUnit" width="250px" /> <Column field="Category.CategoryName" width="250px" /> </Grid> <br /> showing: {this.state.gridData.length} items </div > ); } } ReactDOM.render(<App />, document.querySelector('my-app'));
  Non-Scrollable Mode
  When the non-scrollable mode is enabled, the Grid renders its data as a single table and the scrollbar is not displayed. To configure the non-scrollable mode, set
  scrollable to
  none.