https://github.com/OfficeDev/office-js/issues/12 - Shared with Script Lab

Table slow-perf workaround.yaml

name: Table slow-perf workaround
description: 'https://github.com/OfficeDev/office-js/issues/12'
author: sameera
host: EXCEL
api_set: {}
script:
    content: |+

        wireUp("#setup", setup);
        wireUp("#run1", run1);
        wireUp("#run2", run2);

        const TABLE_NAME = "TestTable";
        const COLUMNS = 21;
        const ROWS = 100;

        async function setup() {
            await Excel.run(async (context) => {
                const sheet = context.workbook.worksheets.getActiveWorksheet();
                sheet.getRange().clear();
                const range = sheet.getRange("B2").getResizedRange(0, COLUMNS - 1);
                sheet.tables.add(range, false).set({ name: TABLE_NAME });
            });
        }

        async function run1() {
            await Excel.run(async (context) => {
                const sheet = context.workbook.worksheets.getActiveWorksheet();
                const table = sheet.tables.getItem(TABLE_NAME);
                const initialDataRange = table.getDataBodyRange();
                initialDataRange.load("rowCount");
                await context.sync();

                console.log(initialDataRange.rowCount);

                const rangeToWriteTo = initialDataRange
                    .getCell(initialDataRange.rowCount - 1, 0).getResizedRange(ROWS - 1, COLUMNS - 1);
                rangeToWriteTo.values = createArray();
            });
        }

        async function run2() {
            await Excel.run(async (context) => {
                const sheet = context.workbook.worksheets.getActiveWorksheet();
                var table = sheet.tables.getItem(TABLE_NAME);

                const initialDataRange = table.getDataBodyRange();
                const initialTableRange = table.getRange();
                initialDataRange.load("rowCount");
                await context.sync();

                console.log(initialDataRange.rowCount);

                const rangeToWriteTo = initialDataRange
                    .getCell(initialDataRange.rowCount - 1, 0).getResizedRange(ROWS - 1, COLUMNS - 1);
                const fullTableRange = initialTableRange.getBoundingRect(rangeToWriteTo);

                table.convertToRange();
                var formulas = createArray();
                rangeToWriteTo.formulas = formulas;

                table = sheet.tables.add(fullTableRange, true /*hasHeaders*/);
                table.name = TABLE_NAME;
            });   
        }

        function createArray() {
            const array = [];
            for (let r = 0; r < ROWS; r++) {
                let row = [];
                for (let c = 0; c < COLUMNS; c++) {
                    if (c === 2) {
                        row.push("=INDIRECT(ADDRESS(ROW(),COLUMN()-1))*10");
                    } else {
                        row.push(r * c);                
                    }
                }
                array.push(row);
            }
            return array;
        }

        const performanceTracker = {
            start: function () {
                performance.clearMarks();
                performance.clearMeasures();
                performance.mark("start");
            },
            end: function (): string {
                performance.mark("end");
                performance.measure("length", "start", "end");
                const time = Math.floor(performance.getEntriesByName("length")[0].duration) / 1000;
                return `${time} seconds`;
            }
        }

        function wireUp(selector, callback) {
            let $item = $(selector);

            $item.click(async () => {
                $item.prop("disabled", true);
                performanceTracker.start();

                try {
                    await callback();
                    console.log(
                        `Done executing "${$item.text().trim()}"` + "\n" +
                        `Elapsed time: ${performanceTracker.end()}`
                    );
                }
                catch (error) {
                    OfficeHelpers.UI.notify(error);
                    OfficeHelpers.Utilities.log(error);
                }

                $item.prop("disabled", false);
            });
            
        }




    language: typescript
template:
    content: |
        <button id="setup" class="ms-Button">
            <span class="ms-Button-label">Setup (create blank table)</span>
        </button>
        <br />

        <hr />
        <div class="ms-font-m">
            Note: be sure to re-click "Setup" between each run, in order to get a brand new table each time.
            The  adding of rows is only slow when it's *adding* new rows, not when writing over existing values. 
        </div>
        <hr />
        <br />

        <button id="run1" class="ms-Button">
            <span class="ms-Button-label">Issue: Slow adding of rows</span>
        </button>
        <br />
        <br />
        <button id="run2" class="ms-Button">
            <span class="ms-Button-label">Workaround via re-creating table</span>
        </button>
    language: html
style:
    content: |
        /* Your style goes here */
    language: css
libraries: |
    @microsoft/office-js@1.1.3-adhoc.0/dist/office.js
    @microsoft/office-js@1.1.3-adhoc.0/dist/office.d.ts

    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

    core-js@2.4.1/client/core.min.js
    @types/core-js

    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts

    jquery@3.1.1
    @types/jquery