CanvasGrid V2 - Dynamic Data - 1000000 Rows & 100 Columns

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0">
    <title>Title of the document</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>
     <script src="//d3js.org/d3.v3.js"></script>
    <script src="CanvasGrid.v2.js"></script>
    <script>
        function setEventCallback(gridSelector) {
            var grid = document.querySelector(gridSelector);
            var numRows = 1000000;
            var numCols = 100;

setTimeout(function () {
                    cb(ref, nullValues);
                }, 10);
            });

//grid.setCallbackMethod('getRowHeight', function (rowIndex) {
            //    if (rowIndex % 5 === 0) {
            //        return 50;
            //    }
            //    else {
            //        return 10;
            //    }
            //});

//grid.setCallbackMethod('getColumnWidth', function (colIndex) {
            //    if (colIndex % 2 === 0) {
            //        return 50;
            //    }
            //    else {
            //        return 25;
            //    }
            //});

grid.setCallbackMethod('getCellValue', function (rowIndex, colIndex) {
                var value = null;
                if (rowIndex === 0) {
                    if (colIndex === 0) {
                        value = {
                            text: "",
                            cellProperties: {
                                background: { color: '#EFEFEF' },
                                textStyle: { textAlign: 'center', wrap: 2 }
                            }
                        };
                    }
                    else {//Column Header AZ
                        value = {
                            text: getAlphaColumnHeader(colIndex - 1, ""),
                            cellProperties: {
                                background: { color: '#EFEFEF' },
                                textStyle: { textAlign: 'center', wrap: 2 }
                            }
                        };
                    }
                }
                else if (rowIndex === 1) {
                    if (colIndex === 0) {
                        value = {
                            text: "",
                            cellProperties: {
                                background: { color: '#EFEFEF' },
                                textStyle: { textAlign: 'center', wrap: 2 }
                            }
                        };
                    }
                    else {//Column Name
                        value = {
                            text: "Column " + (colIndex),
                            cellProperties: {
                                background: { color: '#EFEFEF' },
                                textStyle: { textAlign: 'center', wrap: 2 }
                            }
                        }
                    }
                }
                else {
                    //Row Header
                    if (colIndex === 0) {
                        value = {
                            text: (rowIndex - 1).toString(),
                            cellProperties: {
                                background: { color: '#EFEFEF' },
                                textStyle: { textAlign: 'center', wrap: 2 }
                            }
                        }
                    }
                    else if (data != undefined && data[rowIndex] != undefined && data[rowIndex][colIndex] != undefined) {
                        value = data[rowIndex][colIndex];
                        //value = null;
                        //value = rowIndex + "_" + colIndex
                    }
                }
                return value;
            });

grid.setAttribute('rows', numRows);
            grid.setAttribute('cols', numCols);
            //debugger;
            grid.setAttribute('width', (window.innerWidth - 20) + 'px');
            grid.setAttribute('height', (window.innerHeight - 20) + 'px');
        }

var getAlphaColumnHeader = function (i, s) {
            var rem = i % 26;
            s = String.fromCharCode(65 + rem) + s;
            i = i / 26 - 1;
            return i < 0 ? s : getAlphaColumnHeader(i, s);
        }

setTimeout(function () {
            setEventCallback('#grid1');
        }, 1);

function clearContent() {
            d3.selectAll('#events *').remove();
        }
    </script>
</head>
<body>
    <canvas-grid id="grid1" width="500px" height="200px" gridlinescolor="#000000" backgroundcolor="#FFFFFF" rowstartindex="0" colstartindex="0" rowheight="22" colwidth="20" rows="0" cols="0" freezerowindex="2" freezecolindex="1"></canvas-grid>
    
    
    
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.min.js

https://d3js.org/d3.v3.js