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

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>

Output:

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

P

piyush25pv

Improve

Article Tags :

Similar Reads

How to make Charts using Data from Google Sheets in JavaScript ?

This article will discuss how to create different charts using Data from a Google Sheet.Â To export data from a Google Sheet, we will use the SheetDB API. It converts data stored in a Google Spreadsheet into a JSON format API. After that, we will use Fetch API to pull that JSON data into our file. On

How to Convert HTML Table to JSON in JavaScript?

HTML tables are commonly used to present structured data on websites. In many scenarios, this tabular data needs to be converted to JSON format for processing, storage, or server communication. We will discuss different approaches to converting HTML tables to JSON using JavaScript.These are the foll

How to load data from JavaScript array using jQuery DataTables plugin ?

DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple-to-use plug-in with a huge range of options for the developer's custom changes. The common features of the DataTable plugin are paging, multiple column ordering, sorting

How to convert JSON data to a html table using JavaScript/jQuery ?

To convert JSON data into an HTML table, there are multiple approaches, each of which has its own strengths. Let's walk through both approaches you mentioned, detailing how each one works.Table of ContentUsing for loopUsing JSON.stringify() MethodApproach 1: Using for loopTake the JSON Object in a v

How to export HTML table to CSV using JavaScript ?

Comma Separated Values or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications.Sometimes while developing web applications, you may come into a scenario where you need to download a CSV file co