JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <base href="https://demos.telerik.com/kendo-ui/spreadsheet/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script src="https://kendo.cdn.telerik.com/2023.2.718/js/jszip.min.js"></script>

    <script src="https://kendo.cdn.telerik.com/2023.2.718/js/kendo.all.min.js"></script>



    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.6.0/default/default-ocean-blue.css">
    <script src="https://kendo.cdn.telerik.com/2023.2.718/js/angular.min.js"></script>
  </head>
  <body>
    <div id="example">
      <div id="spreadsheet" style="width: 100%;"></div>
      <script>
        $(function() {
         function toLetters(num) {
     var mod = num % 26,
         pow = num / 26 | 0,
         out = mod ? String.fromCharCode(64 + mod) : (--pow, 'Z');
     return pow ? toLetters(pow) + out : out;
}
          function getData(){
            var rows = [];
            var cells = []
            for(var i = 0; i< 250; i++){
                var cell ={}
              if(i==249)
              {
                cell = {
                index:i,
             //   value: '=CONCAT(IO1:IN1)',
               // formula:'=CONCAT(IO1:IN1)'
              }
              }
              else{
               cell = {
                index:i,
                value: `${i}`,
              }
              }
              cells.push(cell);
            }
            for(var i = 0; i < 3500; i++){
              var row = {cells:cells}
              rows.push(row);
            }
            return  {
              sheets:[ 
                {
                  name: "Food Order",
                  rows: rows
                }
              ]
            }
          }

          var data = getData();

          console.log("SpreaddSheet start", new Date())

          var spread =...