HTML tables are great for showing related quantifiable information, but they've always lacked a good user interface if they are wider or taller than a browser window. In that scenario, users commonly scroll to the bottom of a table and then promptly forget what each column of information means.

Even basic spreadsheet programs can "pin" rows to the top or left side of the spreadsheet, and now with the Super Table javascript library, HTML tables can get the same functionality. Want to intelligently "pin" the header row and the left-most column of your table? It just takes one line of code:

    
    // Initialize table scrolling
    $('#your-table').superTable();
    

Need to pin the header rows but not the left-most column? That's easy too:

    
    // Initialize table scrolling on the header row only
    $('#your-table').superTable({
        scrollColumn : false
    });
    

Check out the result of the above commands in the basic demo or check out the complete demo to see all of Super Table's features in action. You can also read through the full documentation or download Super-Table.js on GitHub or NPM.

Of course some developers argue that worrying about how a table looks should be skipped all together... simply export the data to a CSV file and be done with it. But by only offering the CSV file option, your user interface is lacking. If a user needs to frequently check some important information, then forcing that user to download a CSV file before they can even view the data wastes the user's time. While it definitely should be exportable to CSV, it's important to provide end users access to your information in multiple ways so their time can be used as efficiently as possible.