Best practice to show data in HTML table

I am trying to show more than 50k lines in a HTML table but for some reason it takes so much time to show (around 60 seconds), what’s the best practice to load data into HTML tables?
I am using this code:

    $('#entities_panel_gridlist').empty();
    $('#entities_panel_gridlist').append("<table id='entities_list' width='100%'><tr class='entities_gridlist_heading'><th width='59%'>Name</th><th width='40%'>Hash</th></tr></table>");
    var len = myTable.length
    for (var i=0; i < len; i++) {
        let name = myTable[i][0];
        let hash = myTable[i][1];

        console.log(i)

        $('#entities_list').append('<tr class="rows"><td>'+ name +'</td><td>'+ hash +'</td></tr>');
    }

5 thoughts on “Best practice to show data in HTML table”

  1. Save some rendering resources by collecting the markup in a variable and append it afterwards.

     $('#entities_panel_gridlist').empty();  
     $('#entities_panel_gridlist').append("<table id='entities_list' width='100%'><tr class='entities_gridlist_heading'><th width='59%'>Name</th><th width='40%'>Hash</th></tr></table>"); 
     var len = myTable.length;
     var markup = '';
     for (var i=0; i < len; i++) { 
       let name = myTable[i][0]; 
       let hash = myTable[i][1]; 
       var markup += '<tr class="rows"><td>'+ name +'</td><td>'+ hash +'</td></tr>';
     }
     $('#entities_list').append(markup);
    
    Reply

Leave a Comment