public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Sleek Grid 😎</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style type="text/css">
        body {
            box-sizing: border-box;
            margin: 0;
            width: 100vw;
            height: 100vh;
            font-size: 13px;
            font-family: sans-serif;
            background-color: cornflowerblue;
        }
    </style>
    <script src="./construct-style-sheets-polyfill.js"></script>
</head>
<body style="padding: 25px 25px;">
<sleek-grid column-autosize="quick"
            column-header="top"
            row-header="left"
            column-resize
            row-resize
            column-dnd
            row-dnd
            sticky-top="1,2,3"
            sticky-bottom="4,5,6"
            sticky-left="1"
            sticky-right="2"
>
</sleek-grid>
<script type="module" src="../iife/sleek-grid.js"></script>
<script type="module">

    window.grid = document.querySelector("sleek-grid");

    fetch("./mock-data.json").then(async function (result) {

        const rows = await result.json();

        rows.forEach((row, index) => {
            row.label = index;
            row.height = 32;
        });

        const columns = [
            {label: "Id", field: "id"},
            {label: "First_name", field: "first_name"},
            {label: "Last_name", field: "last_name"},
            {label: "Email", field: "email"},
            {label: "Gender", field: "gender"},
            {label: "Ip_address", field: "ip_address"},
            {label: "Buzzword", field: "buzzword"},
            {label: "Pet", field: "pet"},
            {label: "City", field: "city"},
            {label: "Car_make", field: "car_make"},
            {label: "Car_vin", field: "car_vin"},
            {label: "Color", field: "color"},
            {label: "Product", field: "product"},
            {label: "Company", field: "company"},
            {label: "Wealth", field: "wealth"},
            {label: "Race", field: "race"},
            {label: "Plant", field: "plant"},
            {label: "Postcode", field: "postcode"},
            {label: "Phone_number", field: "phone_number"},
            {label: "Address", field: "address"},
            {label: "Iban", field: "iban"}
        ];

        Object.assign(grid, {
            columns: columns.slice(0, columns.length),
            rows: rows
        });

    });

</script>
</body>
</html>