Best practice to show data in HTML table

by

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>');
    }

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

  2. 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