Sticky column headings for airplanes in tar1090

FlightAware ADS-B Flight Tracking
1

Hey all,
If you’re one of the lucky ones that sometimes pull in 100+ planes, you might notice that when you scroll through the list of planes, the headings scroll off the page. I’m a fan of the “frozen” top row view on excel spreadsheets and prefer it on scrolling web tables too.

If you’re a tar1090 user and want sticky headings, I came up with a simple TamperMonkey script you can install that will do just that. It probably works on sites that use tar1090 also, if you adjust the match pattern to include them. If there’s any interest I can try to adapt it for skyaware.

Demo video of what it looks like “in action.” Keep an eye on the column headings in the top right area of the screen capture while the list scrolls.

TamperMonkey code (if you have instances named other than tar1090, adjust the match):

// ==UserScript==
// @name         tar1090 Sticky Table Headers
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Add sticky headers to tar1090 aircraft table
// @author       Brian McEntire
// @match        *://*/tar1090*
// @match        *://*:*/*/tar1090*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function injectStyles() {
        const css = `
            .aircraft_table_header {
                position: sticky;
                top: 0;
                z-index: 10;
                box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
            }
            #planesTable {
                border-collapse: separate;
                border-spacing: 0;
            }
        `;
        const style = document.createElement('style');
        style.textContent = css;
        document.head.appendChild(style);
    }

    function checkElements() {
        const headerExists = !!document.querySelector('.aircraft_table_header');
        const tableExists = !!document.querySelector('#planesTable');

        console.log('Checking elements...');
        console.log('Found table header:', headerExists);
        console.log('Found planes table:', tableExists);

        if (headerExists && tableExists) {
            injectStyles();
            observer.disconnect(); // Stop observing once elements are found and styles injected
        }
    }

    // Observe the DOM for dynamic changes
    const observer = new MutationObserver(checkElements);
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial check in case elements are already present
    checkElements();
})();

Hope it’s useful for someone else out there. Enjoy!