Hello,

I am using a table with several hidden columns.

The problem is these hidden columns initially display for a split second which is telling Google the table is too wide for the page. As a result, Google is telling me I have usability issues with this page.

I suspect the issue is the table is loading before the scrollbar CSS kicks in.

Is there a way to delay the loading of the table (so the CSS kicks in first) or to make all columns invisible by default and select certain columns to be visible (ie the opposite of the code below)? Or another method?

Apologies if I haven't made the issue completely clear, I'm an amateur when it comes to this!

Below is the Javascript I'm using:

var key = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQg_Cl38YmGXezWC2eGjQD8LGscWaVjbnV78xyV47YOShbNuvMs8Wp39BLebfjVP3VBHXNMVegMKorL/pub?output=csv";
        var columns = [{"data": "Name"}, {"data": "Club"}, {"data": "Position"}, {"data": "Price"}, {"data": "Pick"}, {"data": "Points"}, {"data": "PPM"}, {"data": "GW"}, {"data": "LT1", "visible": false}, {"data": "LT2", "visible": false}, {"data": "LT5", "visible": false}, {"data": "LT10", "visible": false}, {"data": "LT15", "visible": false}];

        $(document).ready(function() {
            function init() {
                Papa.parse(key, {
                download: true,
                header: true,
                complete: setupTable
                });
            }
            init();
            function setupTable(result) {
                var data = result.data;
                var table = $('#diff').DataTable( {
                    "data": data,
                    "columns": columns,
                    "order": [[5, "desc"]],
                    "autoWidth": false,
                    initComplete: function () {
                        this.api().columns().every( function () {
                            col_idx = this[0][0];
                            if (col_idx != 1 && col_idx != 2) {
                                return;
                            }
                            var column = this;
                            if (col_idx == 3) {
                                var input = $('<input type="text" id="ownership" name="ownership"></input>').appendTo( $(column.footer()). empty() );
                                return;
                            }
                            var select = $('<select><option value=""></option></select>')
                                .appendTo( $(column.footer()).empty() )
                                .on( 'change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
            
                                    column
                                        .search( val ? '^'+val+'$' : '', true, false )
                                        .draw();
                                } );
            
                            column.data().unique().sort().each( function ( d, j ) {
                                select.append( '<option value="'+d+'">'+d+'</option>' );
                            } );
                        } );
                    },
                } );
                $('#ownership').keyup( function() {
                    table.draw();
                });
            }
            $.fn.dataTable.ext.search.push(
                function( settings, data, dataIndex ) {
                    var ownership = parseFloat( data[3] ) || 0; // use data for the age column
                    var val = parseInt($('#ownership').val(), 10);                    
                    if ( isNaN(val) || ownership <= val)
                    {
                        return true;
                    }
                    return false;
                }
            );
        } );
 function selectionHandler(index) {
            var table = $('#diff').DataTable();
            // Removes the existing filter
            table.search('').columns().search('').draw();
            var colIdx = index + 8;
            // Re-filter on new column
            var filteredData = table
                .column( colIdx )
                .search("TRUE")
                .draw();
        }