Recordset viewer - featuring a fixed header that scrolls horizontally. It's good for any kind of 2D content where columns hold the same kind of information and you have more of them than you can fit in one screen.

showRecords.php

<?php

function showRecords($list) {
    $head = array_keys(reset($list));
    ?>
    <style>
        * {box-sizing:border-box;}
        show-records { --header-height:40px; --header-color:steelblue; --fonts:calibri,arial,helvetica; }
        show-records, scrolling-box, stable-header {display:block;}
        show-records {box-shadow:0px 5px 14px -8px black;height:80vh;position:relative;}
        show-records {background:linear-gradient(to bottom,var(--header-color) 40px,white 41px);}
        show-records stable-header {border-right:17px solid var(--header-color);}
        show-records stable-header table thead th {color:white;}
        show-records stable-header table thead th {background:var(--header-color);height:var(--header-height);}
        show-records scrolling-box table thead th {line-height:0 !important;padding-top:0;padding-bottom:0;}
        show-records scrolling-box table thead th {visibility:hidden;}
        show-records scrolling-box, show-records stable-header {position:absolute;left:0px;width:100%;}
        show-records scrolling-box {top:var(--header-height);height:calc(100% - var(--header-height));}
        show-records scrolling-box {overflow:scroll;z-index:1;}
        show-records stable-header {top:0px;height:var(--header-height);z-index:2;overflow:hidden;}
        show-records table {position:absolute;top:0px;left:0px;width:100%;border:none;border-collapse:collapse;}
        show-records table th, show-records table td {border:1px solid rgba(0,0,0,0.21);border-width:0 1px;}
        show-records table th, show-records table td {font:15px var(--fonts);padding:3px 8px;}
        show-records table th, show-records table td {white-space:nowrap;max-width:<?=$size?>;overflow:hidden;}
        show-records table tbody tr:nth-of-type(odd) {background-color:#f3f3f3;}
        show-records table tbody tr:hover {background-color:#ddd;}
    </style>
    <show-records>
        <stable-header>&nbsp;</stable-header>
        <scrolling-box onscroll="showRecords_header.style.transform = 'translateX('+(0-this.scrollLeft)+'px)';">
            <table>
                <thead><? print "<tr><th>".join("</th><th>",$head)."</th></tr>"; ?></thead>
                <tbody><? foreach($list as $r) {print "<tr><td>".join("</td><td>",$r)."</td></tr>";} ?></tbody>
            </table>
        </scrolling-box>
    </show-records>
    <script>
        setTimeout(function() {
            function find(x) {return document.querySelector(x);}
            find("show-records stable-header").innerHTML = find("show-records scrolling-box table").outerHTML;
            window.showRecords_header = find('stable-header table');
        },1);
    </script>
    <?
}








//------------------------------------------------------------------------------------------------ Let's try it now

showRecords(json_decode('

    [
        {
            "id": "3941",
            "purchased": "2016-02-18",
            "installed": "2016-02-19",
            "displayname": "SWITCH",
            "brand": "TrendNet",
            "spec": "Trendnet TEG-240WS",
            "serial": "C21543W400001",
            "price1": "12500.00",
            "price2": "12500.00",
            "status": "in use",
            "extrainfo": "Gray one on shelf 4a",
            "usedby": "IT dept",
            "pubnotes": "Needs to be replaced",
            "oprnotes": "Works steady right now but there\'s a solid chance it will fail without a warning",
            "tags": "#net #switch #infra #operational"
        },
        {
            "id": "3942",
            "purchased": "2017-09-18",
            "installed": "2018-11-21",
            "displayname": "SWITCH",
            "brand": "TrendNet",
            "spec": "Trendnet TEG-240WS",
            "serial": "C21543W400005",
            "price1": "15500.00",
            "price2": "15500.00",
            "status": "in use",
            "extrainfo": "Blue one on shelf 4a",
            "usedby": "IT dept",
            "pubnotes": "Spare / load balancing",
            "oprnotes": "Auto-restart",
            "tags": "#add-tags"
        },
        {
            "id": "3967",
            "purchased": "2017-03-12",
            "installed": "2017-04-03",
            "displayname": "TFT 17”",
            "brand": "Dell",
            "spec": "Dell E176FPf",
            "serial": "CN-0FC529-72872-62B-D57S",
            "price1": "75000.00",
            "price2": "75000.00",
            "status": "out",
            "extrainfo": "",
            "usedby": "Jennifer Wong",
            "pubnotes": "Took it home as a 2nd monitor",
            "oprnotes": "Perfect condition, it was a spare piece from designers",
            "tags": "#monitor #highvalue #operational"
        },
        {
            "id": "4112",
            "purchased": "2020-05-21",
            "installed": "2020-07-11",
            "displayname": "BR ROUTER",
            "brand": "Linksys",
            "spec": "Linksys BEFSX41",
            "serial": "CB921F300938",
            "price1": "33199.00",
            "price2": "33199.00",
            "status": "in use",
            "extrainfo": "",
            "usedby": "Alan Corsten",
            "pubnotes": "Not the one he was asking for but temporarily OK",
            "oprnotes": "Intervention needed before they get emotionally attached",
            "tags": "#net #router #infra #operational"
        },
        {
            "id": "20",
            "purchased": "2017-05-23",
            "installed": "2017-05-25",
            "displayname": "Notebook",
            "brand": "Dell",
            "spec": "Dell E5470-106",
            "serial": "6LTSG2",
            "price1": "452000.00",
            "price2": "452000.00",
            "status": "active",
            "extrainfo": "OP: Win10 Pro OEM; CPU: Intel i5; MEM: 8Gb.; HDD: 240Gb SSD; ODD: ",
            "usedby": "Mariana Uotila",
            "pubnotes": "Win10 Pro English installed again (twice)",
            "oprnotes": "Minor driver problem with external devices (printer/scanner), fixed by vendor support",
            "tags": " #computer #notebook #highvalue #operational"
        }
    ]

','I need arrays please'));