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

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

[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;
     }

Sample Link:https://stackblitz.com/edit/6gigqu-4ljrdr?file=index.html,index.ts,default-data.json

Screenshot:

Documentation:

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