Scrolling in React Spreadsheet component
20 Jan 202315 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 astrue
. -
Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the
isFinite
property asfalse
.
By Default, the
isFinite
property isfalse
.
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 inscrollSettings
astrue
.
In virtual scrolling enableVirtualization
is set to true means, it allows you to load the spreadsheet data while scrolling.
By Default, the
enableVirtualization
property istrue
.
User Interface:
You can scroll through the worksheet using one of the following ways,
- Using the
arrow
keys. - Using the Horizontal and Vertical
scroll
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.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
const scrollSettings = { isFinite: true };
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:G1');
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} scrollSettings={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>
);
};
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, ScrollSettingsModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
const scrollSettings: ScrollSettingsModel = { isFinite: true };
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:G1');
}
}, []);
return (
<div>
<SpreadsheetComponent ref={spreadsheetRef} scrollSettings={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>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
* Default data source
*/
export let defaultData = [
{
'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
}
];
/**
* 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
}];
Note
You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.