How to customize the width of row header element in TypeScript spreadsheet

This article explains how to customize the width of the row header element in a TypeScript spreadsheet. You can achieve this by setting the “width” property for the select all, row header element, and the “left” property for the column header and sheet content elements in the spreadsheet, as shown below. Additionally, you can change the row height and column width by using the setRowsHeight and setColumnsWidth methods.

[HTML]

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

[TS]

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

let spreadsheet: Spreadsheet = new Spreadsheet({
cssClass: 'e-custom',
 sheets: [
   {
     name: 'Car Sales Report',
     ranges: [{ dataSource: (dataSource as any).defaultData }]
   }
 ],
 created: (): void => {
   //Applies cell and number formatting to specified range of the active sheet
   spreadsheet.cellFormat(
     { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
     'A1:F1'
   );
 },
});

spreadsheet.appendTo('#spreadsheet');

[CSS]

/* To set the width of row header. */

     .e-custom.e-spreadsheet .e-column-header {
       left: 50px !important;
     }

     .e-custom.e-spreadsheet  .e-selectall-container.e-select-all-cell {
       width: 50px !important;
     }

     .e-custom.e-spreadsheet  .e-rowhdr-table col {
       width: 50px !important;
     }

     .e-custom.e-spreadsheet  .e-sheet-content {
       left: 50px !important;
     }

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

Screenshot:

Documentation:

https://ej2.syncfusion.com/documentation/spreadsheet/styles/