JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.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("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.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;
}

#container {
    margin-bottom: 50px;
    height: 500px;
}

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;
}

Grid.grid('container', {
    dataTable: {
        columns: generateRandomData(1000)
    },
    rendering: {
        rows: {
              strictHeights: true
            // minVisibleRows: 20
        }
    },
    columns: [{
        id: 'ID',
        width: 60
    }]
});