How to create data grid for millions of rows in JavaScript ?

Last Updated : 27 Sep, 2019

In JavaScript, it is possible to show up to 10⁵ using a simple loop. This also depends on the browser capability to run such a big loop with huge complexity. The page crashes when such a huge task is given to the browser. The code below is an example of how we can populate a table of 10⁵ rows.

Example 1: This example will show how can we populate a table with 10⁵ rows using a simple JavaScript code.

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        table { 
            width: 100%; 
        } 
          
        table, 
        th, 
        td { 
            border: 1px solid black; 
            border-collapse: collapse; 
        } 
          
        th, 
        td { 
            padding: 15px; 
            text-align: left; 
        } 
          
        table#t01 tr:nth-child(even) { 
            background-color: #eee; 
        } 
          
        table#t01 tr:nth-child(odd) { 
            background-color: #fff; 
        } 
          
        table#t01 th { 
            background-color: black; 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <br> 
  
    <table id="t01"> 
        <tr> 
            <th>Counting</th> 
            <th>Alphabets</th> 
        </tr> 
        <script> 
            var k = 97; 
            for (var j = 1; j <= 100000; j++) { 
                if (k == 123) 
                    k = 97; 
                var string = String.fromCharCode(k); 
                document.write(" <tr><td>" + (j) + "</td><td>"  
                               + string + "</td></tr>"); 
                k++; 
            } 
        </script> 
    </table> 
  
</body> 
  
</html> 

Output:

Performance with 1 million rows
To perform such a heavy task we will be importing an API made by shield UI. It is a light weight API for loading big grids which actually loads the grids in real time i.e as we scroll down the table and thus decreasing the load on the browser at that instance of time.

Now let us perform the same operation for 1 million rows i.e 10⁶ rows. The code below will load 1 million rows in real time manner.
Example:

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>1 Million Rows Demo</title> 
    <link id="themecss" 
          rel="stylesheet" 
          type="text/css" 
          href= 
"//www.shieldui.com/shared/components/latest/css/light/all.min.css" /> 
    <script type="text/javascript"
            src= 
"//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"> 
  </script> 
    <script type="text/javascript" 
            src= 
"//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"> 
  </script> 
</head> 
  
<body class="theme-light"> 
    <div id="grid" style="margin-bottom: -500px;"></div> 
    <script type="text/javascript"> 
        $(function() { 
            var grid = new shield.DataSource({ 
                remote: { 
                    operations: ["skip", "take"], 
                    read: function(params, success, error) { 
                        var skip = grid.skip || 0, 
                            take = grid.take || 20, 
                            data = [], 
                            k = 96; 
  
                        for (var i = skip; i < skip + take; i++) { 
                            k++; 
                            var row = {}; 
                            for (var j = 1; j < 3; j++) { 
                                row["Counting"] = i + 1; 
                                if (k == 123) 
                                    k = 97; 
                                var string = String.fromCharCode(k); 
                                row["Alphabets"] = string; 
                            } 
                            data.push(row); 
                        } 
                        success({ 
                            data: data, 
                            total: 1000000 
                        }); 
                    } 
                }, 
                schema: { 
                    data: "data", 
                    total: "total" 
                } 
            }); 
            $("#grid").shieldGrid({ 
                dataSource: grid, 
                height: 400, 
                scrolling: { 
                    virtual: true 
                }, 
                columns: (function() { 
                    var cols = []; 
  
                    cols.push({ 
                        field: "Counting", 
                        width: 140 
                    }); 
  
                    cols.push({ 
                        field: "Alphabets", 
                        width: 140 
                    }); 
                    return cols; 
                })() 
            }); 
        }); 
    </script> 
</body> 
  
</html> 