This snippet shows how to register a handler for the data-changed event. - Shared with Script Lab

Handle the data changed event.yaml

name: Handle the data changed event
description: This snippet shows how to register a handler for the data-changed event.
author: deinspanjer
host: EXCEL
api_set: {}
script:
    content: |
        $("#setup").click(() => tryCatch(setup));
        $("#register-data-changed-handler").click(() => tryCatch(registerDataChangedHandler));

        async function registerDataChangedHandler() {
            await Excel.run(async (context) => {
                const sheet = context.workbook.worksheets.getItem("Sample");    
                const salesTable = sheet.tables.getItem("SalesTable");
                const dataRange = salesTable.getDataBodyRange();
                const salesByQuarterBinding = context.workbook.bindings.add(dataRange, "range", "SalesByQuarter");
                salesByQuarterBinding.onDataChanged.add(onSalesDataChanged);

                OfficeHelpers.UI.notify("The handler is registered.", "Change the value in one of the data cells and watch this message banner. (Be sure to complete the edit by pressing Enter or clicking in another cell.)");

                await context.sync();
            });
        }

        async function onSalesDataChanged(eventArgs) {
            await Excel.run(async (context) => {
                OfficeHelpers.UI.notify("Data was changed", eventArgs.binding.id);

                await context.sync();
            });
        } 

        async function setup() {
            await Excel.run(async (context) => {
                const sheet = await OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, "Sample");
                let salesTable = sheet.tables.add('A1:E1', true);        
                salesTable.name = "SalesTable";
                salesTable.getHeaderRowRange().values = [["Sales Team", "Qtr1", "Qtr2", "Qtr3", "Qtr4"]];

                salesTable.rows.add(null, [
                    ["London", 500, 700, 654, null ],
                    ["Hong Kong", 400, 323, 276, null ],
                    ["New York", 1200, 876, 845, null ],
                    ["Port-of-Spain", 600, 500, 854, null ],
                    ["Nairobi", 5001, 2232, 4763, null ]
                ]);  

                salesTable.getRange().format.autofitColumns();
                salesTable.getRange().format.autofitRows();
                sheet.activate();

                await context.sync();
            });
        }

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback) {
            try {
                await callback();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    language: typescript
template:
    content: |-
        <section class="ms-font-m">
            <p>This sample shows how to register and use a handler for the data-changed event.</p>
        </section>

        <section class="setup ms-font-m">
            <h3>Set up</h3>
            <button id="setup" class="ms-Button">
                <span class="ms-Button-label">Create table</span>
            </button>
        </section>

        <section class="samples ms-font-m">
            <h3>Try it out</h3>
            <button id="register-data-changed-handler" class="ms-Button">
                <span class="ms-Button-label">Register data-changed handler</span>
            </button>
        </section>
    language: html
style:
    content: |
        /* Your style goes here */
    language: css
libraries: |
    # Office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js

    # CSS Libraries
    [email protected]/dist/css/fabric.min.css
    [email protected]/dist/css/fabric.components.min.css

    # NPM libraries
    [email protected]/client/core.min.js
    @microsoft/[email protected]/dist/office.helpers.min.js
    [email protected]

    # IntelliSense: @types/library or node_modules paths or URL to d.ts files
    @types/office-js
    @types/core-js
    @microsoft/[email protected]/dist/office.helpers.d.ts
    @types/jquery