JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="http://localhost:3030/code/grid/grid-pro.js"></script>

<div class="demo">
    <div id="container"></div>
    <p class="highcharts-description">
        A grid showcasing the performance of Highcharts Grid with a randomly generated dataset with 10000 rows. Demonstrates Highcharts Grid's ability to
        efficiently handle and display large datasets. Features row
        virtualization that renders only visible data with a buffer at the top and bottom, ensuring smooth scrolling and
        optimal performance.
    </p>
</div>

CSS

@import url("http://localhost:3030/code/grid/css/grid-pro.css");

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

.demo {
    padding: 8px 12px;
}

.highcharts-description {
    padding: 0 8px;
}

.custom_theme {
    --hcg-padding: 50px;
    --hcg-bor der-color: #e2e2e2;
    --hcg-bo rder-width: 1px;
    --hcg-row-background: #c7c7c7;
    --hcg-row-even-background: #e5e5e5;

    --hcg-cell-hovered-row-color: black;
    --hcg-cell-hovered-column-background: green;
    --hcg-cell-hovered-row-background: red;

    --hcg-cell-ho vered-row-color: blue;
    --hcg-row-ho ver-color: red;
    --hcg-r ow-color-hover: blue;
    --hcg-cell-hov ered-column-background: red;
    
    --hcg-cell-hover ed-column-color: white;
    --hcg-c ell-hovered-background: black;
    --hcg-cell-ho vered-background: black;
     --hcg-cell-h overed-color: red;
     --hcg-cell-ev en-hovered-color: white;

     td[data-column-id="Department"] {
        background: red;
     }

}

tr[class]:has(td[data-value="Alex"]) {
    backgr ound: green;    
}

td[data-column-id="Position"] {
    back ground: #fff !important;
}

JavaScript

function generateRandomData(rows) {
  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 = {
    ID: [],
    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.ID.push(id);
    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 grid = Grid.grid('container', {
  dataTable: {
    columns: generateRandomData(10000),
  },
  caption: {
    text: 'this is a caption',
  },
  rendering: {
    theme: 'hcg-theme-default custom_theme',
    rows: {
      minVisibleRows: 10,
      //bufferSize: 20,
      strictHeights: true,
    },
  },
  columnDefaults: {
    cells: {
      events: {
        click: function () {
          const i = this.row.index;
          console.log(this.row.data.Name)
          //console.log(this.name[i]);

          //console.log(`${data.name[i]} — ${data.status[i]} — ${data.details[i]}`);
        },
      },
    },
  },
  columns: [
    {
      id: 'ID',
      width: 60,
      cells: {
        editMode: {
          enabled: true,
          renderer: {
 ...