JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/grid-pro.js"></script>

<button id="delete">Delete selected</button>
<div id="container"></div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");

JavaScript

function generateRandomData(rows) {
    console.log("random")
  const names = ['John', 'Jane', 'Alex', 'Chris', 'Katie', 'Michael'];
  const departments = ['HR', 'Engineering', 'Sales', 'Marketing', 'Finance'];
  const positions = [
    'Manager',
    'Software Developer',
    'Sales Executive',
    'Marketing Specialist',
    'Financial Analyst',
  ];
  const columns = {
    Checkbox: [],
    Name: [],
    Department: [],
    Position: [],
    Email: [],
    Phone: [],
  };

  for (let i = 0; i < rows; i++) {
    const nameIndex = Math.floor(Math.random() * names.length);
    const departmentIndex = Math.floor(Math.random() * departments.length);
    const positionIndex = Math.floor(Math.random() * positions.length);
    const id = i + 1;
    const email = `${names[nameIndex].toLowerCase()}${id}@example.com`;
    const phone = `123-456-7${Math.floor(Math.random() * 1000)
      .toString()
      .padStart(3, '0')}`;

    columns.Checkbox.push(i);
    columns.Name.push(names[nameIndex]);
    columns.Department.push(departments[departmentIndex]);
    columns.Position.push(positions[positionIndex]);
    columns.Email.push(email);
    columns.Phone.push(phone);
  }

  return columns;
}

const data = generateRandomData(1000)

Grid.AST.allowedTags.push('input');
Grid.AST.allowedAttributes.push('checked');
const selected = new Set();

myGrid = Grid.grid('container', {
  dataTable: {
    columns: data
  },
  rendering: {
    rows: {
      minVisibleRows: 10,
    },
  },
  columns: [
    {
      id: 'Checkbox',
      width: 60,
      cells: {
        format: '<input type="checkbox" />',
        events: {
          afterRender: function () {
            const cell = this;
            cell.htmlElement
              .querySelector('input')
              ?.addEventListener('change', (e) => {
                if (e.target.checked) {
                  selected.add(cell.row.id);
                } else {
      ...