How to adjust the width and height of a JavaScript Spreadsheet based on the number of rows and columns rendered

This article explains how to adjust the width and height of a JavaScript Spreadsheet based on the number of rows and columns used. On the created event, fetch the used range of the sheet and update the rowCount and colCount to be rendered in the sheetModel. In the user-defined function, fetch the client-width/client-height of the sheet content and main panel elements. After that, calculate and update the width/height of the rendered columns/rows using setColumnsWidth and setRowsHeight methods respectively.

[index.html]

<div id="spreadsheet"></div>

[index.ts]

import { Spreadsheet, UsedRangeModel } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './default-data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
 // Specify the scroll settings for finite mode.
 scrollSettings: {
   isFinite: true,
   enableVirtualization: false,
 },
 sheets: [
   {
     name: 'Car Sales Report',
     ranges: [{ dataSource: (dataSource as any).defaultData }],
   },
 ],
 created: (): void => {
   spreadsheet.cellFormat(
     { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
     'A1:F1'
   );
   // Get the used range of the sheet.
   let usedRange: UsedRangeModel = spreadsheet.sheets[0].usedRange;
   // To set the rowCount/colCount in the sheet model.
   spreadsheet.sheets[0].colCount = usedRange.colIndex;
   spreadsheet.sheets[0].rowCount = usedRange.rowIndex;
   // To update height/width to of the rendered rows/columns.
   fitPage();
   // Update height/width while resizing.
   window.addEventListener('resize', fitPage);
 },
});

function fitPage() {
 // Fetch the client width of the sheet content.
 let sheetWidth: number =
   spreadsheet.element.querySelector('.e-sheet-content').clientWidth;
 // Get the used range of the sheet.
 let usedRange: UsedRangeModel = spreadsheet.sheets[0].usedRange;
 // Calculate the width to be updated for each column.
 let width: number = Math.floor(sheetWidth / usedRange.colIndex);
 // Set width to the rendered columns.
 spreadsheet.setColumnsWidth(width);
 // Fetch the client height of the sheet content.
 let sheetHeight: number =
   spreadsheet.element.querySelector('.e-main-panel').clientHeight;
 // Calculate the height to be updated for each row.
 let height: number = Math.floor(sheetHeight / usedRange.rowIndex);
 // Set height to the rendered rows.
 spreadsheet.setRowsHeight(height);
}

spreadsheet.appendTo('#spreadsheet');

Refer to the working sample for additional details and implementation: Sample

Output:

For more details, please refer the following references.

https://ej2.syncfusion.com/documentation/spreadsheet/getting-started
https://ej2.syncfusion.com/documentation/spreadsheet/scrolling#finite-scrolling-with-defined-rows-and-columns
https://ej2.syncfusion.com/documentation/spreadsheet/rows-and-columns#size

Conclusion

We hope you enjoyed learning about how to adjust the width and height of a JavaScript spreadsheet based on the number of rows and columns rendered.

You can refer to our JavaScript Spreadsheet page to learn about its other groundbreaking feature representations. You can also explore our JavaScript Spreadsheet Documentation to understand how to manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, BoldDesk Support, or feedback portal. We are always happy to assist you!