InsertTable - Shared with Office Add-in Playground

InsertTable (Office Add-in Playground).json

{
    "name": "InsertTable",
    "playgroundVersion": 1
}

app.js

// This is a compiled version of the TypeScript/JavaScript code ("app.ts").
// In case the original code was already JavaScript, this is likely identical to "app.js".

$('#run').click(function () {
    invokeRun()
        .catch(OfficeHelpers.logError);
});
function invokeRun() {
    return Word.run(function (ctx) {
        var fruits = [["Apple", "red", "round", "crunchy"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", "variable"]];
        var fruitsNonuniform = [["Apple", "red"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong"]];
        var fruitsUnderfilled = [["Apple", "red", "", ""], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", ""]];
        var table = ctx.document.body.insertTable(null, null, "start", fruits);
        ctx.load(table);
        return ctx.sync().then(function () {
            table.style = "Grid Table 6 Colorful - Accent 2";
            return ctx.sync().then(function () {
                console.log("Success");
            });
        }).catch(function (e) {
            console.log(e.message);
        });
    });
}

app.ts

$('#run').click(function() {
    invokeRun()
        .catch(OfficeHelpers.logError);
});

function invokeRun() {
    return  Word.run(function (ctx) {

            var fruits = [["Apple", "red", "round", "crunchy"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", "variable"]];
            var fruitsNonuniform = [["Apple", "red"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong"]];
            var fruitsUnderfilled = [["Apple", "red", "", ""], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", ""]];


            var table = ctx.document.body.insertTable(null, null, "start", fruits);
            ctx.load(table);
            return ctx.sync().then(function () {
                table.style = "Grid Table 6 Colorful - Accent 2";
                return ctx.sync().then(function () {
                    console.log("Success")
                });

            }).catch(function (e) {
                console.log(e.message);

            });
        });
}

index.html

<p class="ms-font-m">
    Execute a code snippet in the Office Add-in Playground
</p>

<button id="run" class="ms-Button">
    <span class="ms-Button-label">Run code</span>
</button>

libraries.txt

# Office.js CDN reference
//appsforoffice.microsoft.com/lib/beta/hosted/office.js

# Other CDN references. Syntax: NPM package name, NPM package path, or raw URL to CDN location.
jquery
core-js/client/core.min.js
office-ui-fabric/dist/js/jquery.fabric.min.js
office-ui-fabric/dist/css/fabric.min.css
office-ui-fabric/dist/css/fabric.components.min.css

# IntelliSense definitions. Syntax: "dt~library_name" for DefinitelyTyped, "@typings/library_name" for Typings, or raw URL to d.ts location.
dt~jquery
dt~core-js
dt~office-js

# Note: for any "loose" typescript definitions, you can paste them at the bottom of your TypeScript/JavaScript code in the "Script" tab.

style.css

body {
    padding: 5px 10px;
}

.ms-Button, .ms-Button:focus {
    background: #2b579a;
    border: #2b579a;
}
    .ms-Button > .ms-Button-label,
    .ms-Button:focus > .ms-Button-label,
    .ms-Button:hover > .ms-Button-label {
        color: white;
    }
    .ms-Button:hover, .ms-Button:active {
        background: #204072;
    }