How to change the display text without changing the cell value in a React Spreadsheet.

This knowledge base explains how to change only the display text without altering the cell value in a React Spreadsheet. You can modify the display text of the cell element by changing the innerText of the element in the beforeCellRender and cellSave events. However, note that the changed display text cannot be exported, as it is not maintained in the cell model. Additionally, actions like autofill will not work based on the changed innerText.

[index.js]

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RowsDirective, RowDirective, CellsDirective, CellDirective, getColIndex, getCellIndexes } from '@syncfusion/ej2-react-spreadsheet';

function Default() {
   let spreadsheet;
   // The cellSave event will trigger when the edited cell is saved after changing the value in the cell.
   const cellSave = (args) => {
       //Change the inner text of the B column alone while saving the cell. 
       let address = args.address.split('!')[1];
       let colIndex = getCellIndexes(address);
       if (colIndex[1] === 1 && args.element) {
           args.element.innerText = `${args.value}CM`;
       }
   };
   const beforeCellRender = (args) => {
       let columnAddress = 'B';
       let columnIndex = getColIndex(columnAddress);
       if (args.colIndex === columnIndex && args.cell && args.cell.value) {
           //Change the inner text of the B column alone on cell rendering. 
           args.element.innerText = `${args.cell.value}CM`;
       }
   };

   return (
       <div className="control-section">
           <SpreadsheetComponent ref={(ssObj) => { spreadsheet = ssObj; }} cellSave={cellSave} beforeCellRender={beforeCellRender}>
           </SpreadsheetComponent>
       </div>
   );
}
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />); 

Stackblitz Sample: https://stackblitz.com/edit/react-yb3gmy-isaxav?file=index.js

For further details regarding editing, please refer to the following reference.

https://ej2.syncfusion.com/react/documentation/spreadsheet/editing