Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/ht-theme-main.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div style="margin-bottom: 16px; display: flex; gap: 10px">
  <button id="example3-loadData">Load Data</button>
</div>
<div id="example3"></div>

Babel + JSX

import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

// Product models
const productModels = [
  'Trail Helmet',
  'Windbreaker Jacket',
  'Cycling Cap',
  'HL Mountain Frame',
  'Racing Socks',
  'Carbon Handlebar',
  'Aero Bottle',
  'Mountain Bike',
  'Road Bike',
  'Cycling Gloves',
];

// Simple random helpers
function randomElement(array) {
  return array[Math.floor(Math.random() * array.length)];
}

function randomPrice(min, max) {
  return (Math.random() * (max - min) + min).toFixed(2);
}

function randomDate(start, end) {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

function randomBoolean() {
  return Math.random() > 0.5;
}

function formatDate(date) {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
}

function formatTime(date) {
  let hours = date.getHours();
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12 || 12;
  return `${hours.toString().padStart(2, '0')}:${minutes} ${ampm}`;
}

// Generate fake data
function generateFakeData(rowCount) {
  const data = [];
  const startDate = new Date('2025-01-01');
  const endDate = new Date('2025-12-31');
  
  for (let i = 0; i < rowCount; i++) {
    const date = randomDate(startDate, endDate);
    
    data.push({
      model: randomElement(productModels),
      price: parseFloat(randomPrice(50, 2000)),
      sellDate: formatDate(date),
      sellTime: formatTime(date),
      inStock: randomBoolean(),
    });
  }
  
  return data;
}

const container =...