Scrolling in React Spreadsheet component

09 Jun 2021 / 3 minutes to read

Scrolling helps you to move quickly to different areas of the worksheet. It moves faster if we use horizontal and vertical scroll bars. Scrolling can be enabled by setting the allowScrolling as true.

By default, the allowScrolling property is true.

You have the following options in Scrolling by using scrollSettings.

Finite scrolling.
Virtual scrolling.

Finite Scrolling

Finite scrolling supports two type of modes in scrolling. You can use the isFinite property in scrollSettings to specify the mode of scrolling.

Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the isFinite property as true.
Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the isFinite property as false.

By Default, the isFinite property is false.

Virtual Scrolling

Virtual scrolling allows you to load data that you require (load data based on viewport size) without buffering the entire huge database. You can set the enableVirtualization property in scrollSettings as true.

In virtual scrolling enableVirtualization is set to true means, it allows you to load the spreadsheet data while scrolling.

By Default, the enableVirtualization property is true.

User Interface:

You can scroll through the worksheet using one of the following ways,

Using the arrow keys.
Using the Horizontal and Verticalscroll bars.
Using the mouse wheel.

Finite scrolling with defined rows and columns

If you want to perform scrolling with defined rows and columns, you must define rowCount and colCount in the sheets property and set isFinite as true and enableVirtualization as false in scrollSettings.

The following code example shows the finite scrolling with defined rows and columns in the spreadsheet. Here, we used rowCount as 20 and colCount as 20, after reaching the 20th row or 20th column you can’t able to scroll.

Source

Preview

app.tsx

datasource.tsx

index.html

app.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';

export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public scrollSettings: ScrollSettingsModel = { isFinite: true };
public onCreated(): void{
    this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:G1');
}
 render() {
    return  ( <div>
         <SpreadsheetComponent
                    ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.onCreated.bind(this)} scrollSettings={this.scrollSettings}>
                    <SheetsDirective>
                        <SheetDirective rowCount={9} colCount={7}>
                            <RangesDirective>
                                <RangeDirective dataSource={defaultData}></RangeDirective>
                            </RangesDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={92}></ColumnDirective>
                                <ColumnDirective width={96}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={92}></ColumnDirective>
                                <ColumnDirective width={96}></ColumnDirective>
                                <ColumnDirective width={96}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));

/**
 * Default data source
 */
export let defaultData: Object[] = [
  {
    'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Unit Price': 18.00, 'Units In Stock': 39, 'Discontinued': false
},
{
    'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Unit Price': 19.00, 'Units In Stock': 17, 'Discontinued': true
},
{
    'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Unit Price': 10.00, 'Units In Stock': 13, 'Discontinued': false
},
{
    'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Unit Price': 22.00, 'Units In Stock': 53, 'Discontinued': true
},
{
    'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Unit Price': 21.35, 'Units In Stock': 0, 'Discontinued': true
},
{
    'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Unit Price': 25.00, 'Units In Stock': 120, 'Discontinued': false
},
{
    'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Unit Price': 30.00, 'Units In Stock': 15, 'Discontinued': true
},
{
    'Product Id': 10, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Unit Price': 21.00, 'Units In Stock': 22, 'Discontinued': false
}];

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.scrollSettings = { isFinite: true };
    }
    onCreated() {
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:G1');
    }
    render() {
        return (<div>
         <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.onCreated.bind(this)} scrollSettings={this.scrollSettings}>
                    <SheetsDirective>
                        <SheetDirective rowCount={9} colCount={7}>
                            <RangesDirective>
                                <RangeDirective dataSource={defaultData}></RangeDirective>
                            </RangesDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={92}></ColumnDirective>
                                <ColumnDirective width={96}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={92}></ColumnDirective>
                                <ColumnDirective width={96}></ColumnDirective>
                                <ColumnDirective width={96}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent> </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

Contents

Finite Scrolling
Virtual Scrolling
Finite scrolling with defined rows and columns

Contents

Finite Scrolling
Virtual Scrolling
Finite scrolling with defined rows and columns

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!