Something strange with table input

eosfor commented 1 week ago

Heloo everyone!

I'm pretty new to JS in particular and to web dev in general, so, perhaps some silly questions. Why does the code below only show 23 of 26 rows, and does not scroll anywhere beyond that?

<html>

<body id="c7730017-34b7-49f5-8d7e-041dde2fe25b">
    <div id="e8a4822f-e8a4-4584-978c-346d141848cc"></div>
    <script id="fcdfb5b0-a36e-45cc-9fd6-7738e2dc341c" type="module">    
        (async () => {
            // Import Observable Inputs module asynchronously
            const Inputs = await import("https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12/+esm");
            // Data array example
            const data = [
                {
                    "Country Name": "Aruba",
                    "Country Code": "ABW",
                    "2022": "3544707788.05664",
                    "2023": ""
                },
                {
                    "Country Name": "Africa Eastern and Southern",
                    "Country Code": "AFE",
                    "2022": "1183962133998.87",
                    "2023": "1236163044999.97"
                },
                {
                    "Country Name": "Afghanistan",
                    "Country Code": "AFG",
                    "2022": "14502158192.0904",
                    "2023": ""
                },
                {
                    "Country Name": "Africa Western and Central",
                    "Country Code": "AFW",
                    "2022": "877140805320.357",
                    "2023": "796586157553.094"
                },
                {
                    "Country Name": "Angola",
                    "Country Code": "AGO",
                    "2022": "104399746853.401",
                    "2023": "84722957642.3757"
                },
                {
                    "Country Name": "Albania",
                    "Country Code": "ALB",
                    "2022": "18916378860.5488",
                    "2023": "22977677860.7979"
                },
                {
                    "Country Name": "Andorra",
                    "Country Code": "AND",
                    "2022": "3380602042.84283",
                    "2023": "3727673593.01922"
                },
                {
                    "Country Name": "Arab World",
                    "Country Code": "ARB",
                    "2022": "3613682354462.24",
                    "2023": "3491516939569.88"
                },
                {
                    "Country Name": "United Arab Emirates",
                    "Country Code": "ARE",
                    "2022": "507063968277.74",
                    "2023": "504173451327.434"
                },
                {
                    "Country Name": "Argentina",
                    "Country Code": "ARG",
                    "2022": "631133384439.944",
                    "2023": "640591410663.883"
                },
                {
                    "Country Name": "Armenia",
                    "Country Code": "ARM",
                    "2022": "19513474648.2429",
                    "2023": "24212134631.064"
                },
                {
                    "Country Name": "American Samoa",
                    "Country Code": "ASM",
                    "2022": "871000000",
                    "2023": ""
                },
                {
                    "Country Name": "Antigua and Barbuda",
                    "Country Code": "ATG",
                    "2022": "1867733333.33333",
                    "2023": "2033085185.18518"
                },
                {
                    "Country Name": "Australia",
                    "Country Code": "AUS",
                    "2022": "1692956646855.7",
                    "2023": "1723827215334.71"
                },
                {
                    "Country Name": "Austria",
                    "Country Code": "AUT",
                    "2022": "470941926750.741",
                    "2023": "516034144115.95"
                },
                {
                    "Country Name": "Azerbaijan",
                    "Country Code": "AZE",
                    "2022": "78807470588.2353",
                    "2023": "72356176470.5882"
                },
                {
                    "Country Name": "Burundi",
                    "Country Code": "BDI",
                    "2022": "3338722827.65691",
                    "2023": "2642161668.92754"
                },
                {
                    "Country Name": "Belgium",
                    "Country Code": "BEL",
                    "2022": "583613982019.263",
                    "2023": "632216577075.109"
                },
                {
                    "Country Name": "Benin",
                    "Country Code": "BEN",
                    "2022": "17425418044.2906",
                    "2023": "19673284686.0023"
                },
                {
                    "Country Name": "Burkina Faso",
                    "Country Code": "BFA",
                    "2022": "18820219331.2261",
                    "2023": "20324617838.9676"
                },
                {
                    "Country Name": "Bangladesh",
                    "Country Code": "BGD",
                    "2022": "460131688909.301",
                    "2023": "437415331040.994"
                },
                {
                    "Country Name": "Bulgaria",
                    "Country Code": "BGR",
                    "2022": "90346169914.9349",
                    "2023": "101584384672.786"
                },
                {
                    "Country Name": "Bahrain",
                    "Country Code": "BHR",
                    "2022": "44383297872.3404",
                    "2023": "43205000000"
                },
                {
                    "Country Name": "Bahamas, The",
                    "Country Code": "BHS",
                    "2022": "13136400000",
                    "2023": "14338500000"
                },
                {
                    "Country Name": "Bosnia and Herzegovina",
                    "Country Code": "BIH",
                    "2022": "24534663636.1778",
                    "2023": "27054889362.8852"
                },
                {
                    "Country Name": "Belarus",
                    "Country Code": "BLR",
                    "2022": "73775179924.603",
                    "2023": "71857382745.6066"
                }
            ];

            // Generate the table with sorting enabled
            const myTable = Inputs.table(data);
            console.log(data.length)

            // Append the table to the container in the cell
            document.getElementById("e8a4822f-e8a4-4584-978c-346d141848cc").appendChild(myTable);
        })();</script>
</body>

</html>

Fil commented 1 week ago

try and add the stylesheet?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12.0/dist/index.css">

Fil commented 1 week ago

To answer the "why", Inputs.table does not materialize all the rows in the DOM at the beginning… it would be too slow and would require too much memory. It only materializes them "lazily" as you scroll and interact and they come into view.

eosfor commented 1 week ago

Thank you, that works. The question now is, how do i know which style sheets to include? and how this particular one works? Well, I guess to answer the last one, i need to do some reading :), can you point me where to start?

Fil commented 1 week ago

it's all documented here https://github.com/observablehq/inputs?tab=readme-ov-file

observablehq / inputs

Something strange with table input #270