JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

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

<div class="demo">
    <div id="container"></div>
    <p class="highcharts-description">
        A grid showcasing pagination functionality, allowing users to navigate through large datasets with ease.
        Features include page navigation buttons, customizable rows per page selection, and status information showing
        current page and total records.
    </p>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/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;
}

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(254)
    },
    lang: {
        pagination: {
            pageInfo: `Showing {start} - {end} of {total}
                (page {currentPage} of {totalPages})`,
            rowsPerPage: 'rows per page'
        }
    },
    rendering: {
        rows: {
            minVisibleRows: 10
        }
    },
    pagination: {
        enabled: true,
        pageSize: 10,
        controls: {
            pageSizeSelector: {
                enabled: true,
                options: [10, 20, 50]
            },
            pageInfo: true,
            firstLastButtons: true,
       ...