Scrolling in Vue Spreadsheet component

27 Jul 20267 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 types of modes. 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

To restrict scrolling to a fixed range, define rowCount and colCount in the sheets property, set isFinite to true, and set enableVirtualization to 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.

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :allowScrolling="true" :scrollSettings="scrollSettings">
    <e-sheets>
      <e-sheet name="Price Details" rowCount="9" colCount="7">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } from './data.js';

const spreadsheet = ref(null);
const scrollSettings = { isFinite: true };
const dataSource1 = priceData;

const created = function () {
  spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
}

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style>
<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created" :allowScrolling="true" :scrollSettings="scrollSettings">
    <e-sheets>
      <e-sheet name="Price Details" rowCount="9" colCount="7">
        <e-ranges>
          <e-range :dataSource="dataSource1"></e-range>
        </e-ranges>
        <e-columns>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
          <e-column :width=100></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
import { SpreadsheetComponent, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective, SheetsDirective, SheetDirective } from "@syncfusion/ej2-vue-spreadsheet";
import { priceData } from './data.js';

export default {
  name: "App",
  components: {
    "ejs-spreadsheet": SpreadsheetComponent,
    "e-sheets": SheetsDirective,
    "e-sheet": SheetDirective,
    "e-ranges": RangesDirective,
    "e-range": RangeDirective,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective
  },
  data: () => {
    return {
      scrollSettings: { isFinite: true },
      dataSource1: priceData
    }
  },
  methods: {
    created: function () {
      let spreadsheet = this.$refs.spreadsheet;
      spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style>

Note

You can refer to our Vue Spreadsheet Editor feature tour page for its groundbreaking feature representations.