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 onSelect(arg) {
console.log(new Date())
}
function onChanging(arg) {
console.log(new Date())
}
function onChange(arg) {
console.log(new Date())
}
function getData(){
var rows = [];
var cells = []
for(var i = 0; i< 250; i++){
var cell ={}
if(i==249 || i==248 || i==247)
{
cell = {
index:i,
// value: '=CONCAT(IO1:IN1)',
// formula:'=CONCAT(IO1:IN1)'
}
}
else{
cell = {
index:i,
value: i,
borderTop:"black",
borderbottom:"black",
borderLeft:"black",
borderRight:"black",
background:"gray",
format: "$#,##0.00", fontSize: 15,textAlign: "center",
validation: {from: "0",
to: "99999999999",
comparerType: "between",
dataType: "number",
...