JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="count" />
<button id="hide">hide that many columns</button>
<button id="show">show all columns</button>
<div id="profile"></div>

CSS

table td, table th {
    padding: 8px;
}
tr:first-child {
    counter-reset: col
}
th {   
    font-weight: bold;
}
th:before {
    content: counter(col) ") ";
    counter-increment: col;
}

JavaScript

// Do all manipulations inside this <style> node
var styleElement = $('<style id="myStyles" type="text/css">p {}</style>');
styleElement.appendTo("head");
var index = document.styleSheets.length - 1;
var styleSheet = document.styleSheets[index];

// Construct a table with this many rows, and cols
var cols = 50;
var rows = 500;
var words = ["hello", "world", "given", "write", "function", "query", "show", "hide", "create", "new", "google"];


// helper function for generating cell (th/td)
function generateCell(element) {
    var index = Math.round(Math.random() * words.length);
    var word = words[index];

    var cell = $("<" + element + ">", {
        'text': word
    });
    
    return cell;
}

// helper functions for generating row (th's/td's)
function generateRow(columns, cellType) {
    var row = $('<tr>');

    for(var i = 0; i < columns; i++) {
        row.append(generateCell(cellType));
    }
                   
    return row;
}

// helper functions for generating entire table
function generateTable(rows, cols) {
    var table = $("<table>");
    
    var headerRow = generateRow(cols, 'th');
    var row;
    
    table.append(headerRow);

    for(var i = 0; i < rows; i++) {
        table.append(generateRow(cols, 'td'));
    }

    return table;
}

// generate table
$("body").append(generateTable(rows, cols));


// delete css rule to show all columns
function showAll() {
    var rules = styleSheet.cssRules;
    
    while(rules.length > 0) {
        styleSheet.deleteRule(0);
    }
}

// hide first n columns
function hideFirst(n) {
    var selectors = [];
    var body = "{ display: none }";
    for(var i = 0; i < n; i++) {
        selectors.push("table tr :nth-child({i})".replace("{i}", i));
    }
    var allSelectors = selectors.join(',');
    styleSheet.insertRule(allSelectors + body, 0);
}

// profile passed in function
function profile(fn) {
    var start = new Date();
    fn();
    var end = new Date();

    var ms = end - start;

   ...