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">
        Highcharts Grid Pro fetching <strong>100,000 employee records</strong>
        from a remote server. Sorting, filtering and pagination are all handled
        server-side, so only a small batch of data is transferred at a time.
        This approach keeps the browser fast and memory usage low, even with
        very large datasets.
    </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;
}

#container {
    height: 700px;
}

JavaScript

const columns = [
    'employeeId', 'firstName', 'lastName', 'department', 'role',
    'hireDate', 'city', 'state'
].join(',');

Grid.grid('container', {
    data: {
        providerType: 'remote',
        chunkSize: 1010,
        dataSource: {
            urlTemplate: 'https://demo-data-server.highstage.dev/data' +
                '?format=js&dataset=large' +
                '&columnsInclude=' + columns +
                '&page={page}&pageSize={pageSize}' +
                '&filter={filter}&sortBy={sortBy}&sortOrder={sortOrder}'
        },
        idColumn: 'employeeId'
    },
    columnDefaults: {
        sorting: {
            enabled: true
        },
        filtering: {
            enabled: true
        }
    },
    columns: [{
        id: 'employeeId',
        header: {
            format: 'ID'
        },
        width: 90
    }, {
        id: 'firstName',
        header: {
            format: 'First Name'
        }
    }, {
        id: 'lastName',
        header: {
            format: 'Last Name'
        }
    }, {
        id: 'department',
        header: {
            format: 'Department'
        }
    }, {
        id: 'role',
        header: {
            format: 'Role'
        }
    }, {
        id: 'hireDate',
        header: {
            format: 'Hire Date'
        },
        cells: {
            formatter: function () {
                if (!this.value) {
                    return '';
                }
                const d = new Date(this.value);
                return d.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric'
                });
            }
        }
    }, {
        id: 'city',
        header: {
            format: 'City'
        }
    }, {
        id: 'state',
        header: {
            format: 'State'
        },
        width: 80
    }],
});