JSON vs ArrayBuffer: In-Memory Model Demonstration of how to use binary buffer into aggrid. Data might come from binary serialization library like flatbuffer, capnproto or protobuffer. it also shows the time spent on parsing JSON. Use cases: if you have multiple front ends like android or web for your real time data, it will be more efficient to send data with binary coding. This will not only reduce memory foot print but you can access data from functions generated automatically by flat buffer instead of hand written JSON code. Not to mention latency reduced by not having to parse JSON string.

<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>
</head>

<body>
    <h3>JSON vs ArrayBuffer: In-Memory Model</h3>
    <button onclick="removeRows()">Clear</button>
    <button onclick="buildJson()">ShowJSON</button>
    <button onclick="showBinary()">ShowBinary</button>
    <div id="message"></div>

    <br/>
    <br/>
    <div id="myGrid" style="height: 600px;width:700px;" class="ag-theme-fresh"></div>
    <script>
        let N = 100000; // Number of Rows
        let C = 6;// Number of Columns
        let buffer = new ArrayBuffer(N * 4 * C);
        let int32View = new Int32Array(buffer);
        for (let i = 0; i < int32View.length; i++) {
            int32View[i] = i;
        }

        let jsonRows = [];
        for (let i = 0; i < N; ++i) {
            let row = [];
            for (let j = 0; j < C; ++j)
                row.push(i * C + j);
            jsonRows.push(row);
        }
        let jsonStr = JSON.stringify(jsonRows);

        let columnDefs = [];
        for (let c = 0; c < C; ++c) {
            columnDefs.push({ headerName: "Col " + c, width: 110 });
        }
        let gridOptions = {
            columnDefs: columnDefs,
            rowData: []
        };

        function removeRows() {
            gridOptions.api.setRowData([]);
            document.getElementById("message").innerHTML = "";
        }

        function buildJson() {
            for (let c = 0; c < C; ++c) {
                gridOptions.columnDefs[c].valueGetter = function getter(params) {
                    return params.data[c];
                };
            }
            gridOptions.api.setColumnDefs(gridOptions.columnDefs);
            gridOptions.getRowNodeId = function (data) {
                return data[0];
            };
            var t0 = performance.now();
            let rows = JSON.parse(jsonStr);
            var t00 = performance.now();
            gridOptions.api.setRowData(rows);
            var t1 = performance.now();
            document.getElementById("message").innerHTML = "JSON parse time(ms)=  " + (t00 - t0) + " total time(ms)=" + (t1 - t0);
        }

        function showBinary() {
            gridOptions.api.setRowData([]);
            for (let c = 0; c < C; ++c) {
                gridOptions.columnDefs[c].valueGetter = function getter(params) {
                    return int32View[params.data + c];
                };
            }
            gridOptions.api.setColumnDefs(gridOptions.columnDefs);
            gridOptions.getRowNodeId = function (data) {
                return int32View[data];
            };
            var t0 = performance.now();
            let rowStart = [];
            for (let i = 0; i < int32View.length; i = i + C) {
                rowStart.push(i);
            }
            gridOptions.api.updateRowData({ add: rowStart });
            var t1 = performance.now();
            document.getElementById("message").innerHTML = "Raw total time(ms)=" + (t1 - t0);
        }

        let eGridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(eGridDiv, gridOptions);

    </script>
</body>

</html>