Layout is broken when using google translate

Question

Hi team. I'm facing with a problem. The first cell shows the row index if I use Google Translate feature, the layout would break like image below. I want to add a class="notranslate" into the first cell. How I can do that?
 This is the class that I want to add into.

Ngoc Hoang · Answer

By the way, Can I add class="notranslate" for each cell?Because I only want Google to translate the cells with the number value.

Babu Periyasamy · Answer

Hi Ngoc Hoang,Upon validating your query, we suspect that you want to add
some class name to the cells, which can be achieved by using the beforeCellRender
event of our Spreadsheet component. The beforeCellRender
event will trigger before the cell is rendered to the DOM, and we can
make customization to the cell before it is rendered in the DOM. For your
convenience, we have prepared a sample in which we have added a ‘notranslate’ class to the row
header cell in the beforeCellRender event. Also, we have attached the code
snippet, sample, and screenshot for your reference.Code snippet:index.js

const beforeCellRender
  = (args) => {
          //Added the
  class to a cell based on a condition
          if (args.element &&
  args.element.tagName === 'TD' &&
  args.element.classList.contains('e-header-cell')) {
             
  args.element.classList.add(‘notranslate’);
          }
      }

Stackblitz sample: https://stackblitz.com/edit/react-6vtstx-wfkkge?file=index.jsScreenshot:Kindly, check the above sample, code snippet and
screenshot in your end and get back to us for further validation.