How to Create Data Grid for Millions of Rows in JavaScript?

Last Updated : 10 Oct, 2024

In JavaScript, generating up to 100,000 rows with a simple loop is possible, but it depends on the browser’s ability to manage such a large task. Attempting this may lead to performance issues or cause the page to crash.

Here’s an example of code that populates a table with 100,000 rows.

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

html

<!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>
            let k = 97;
            for (let j = 1; j <= 100000; j++) {
                if (k == 123)
                    k = 97;
                let 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: This example shows the implementation of the above-mentioned approach.

html

<!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 () {
            let grid = new shield.DataSource({
                remote: {
                    operations: ["skip", "take"],
                    read: function (params, success, error) {
                        let skip = grid.skip || 0,
                            take = grid.take || 20,
                            data = [],
                            k = 96;

                        for (let i = skip; i < skip + take; i++) {
                            k++;
                            let row = {};
                            for (let j = 1; j < 3; j++) {
                                row["Counting"] = i + 1;
                                if (k == 123)
                                    k = 97;
                                let 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 () {
                    let cols = [];

                    cols.push({
                        field: "Counting",
                        width: 140
                    });

                    cols.push({
                        field: "Alphabets",
                        width: 140
                    });
                    return cols;
                })()
            });
        });
    </script>
</body>

</html>