dataSelected on table

I have a powerbi embedded report that works fine -it renders as a table with a few columns . I would like to be able to click a row in the table and see the data related to that row. I have tried to utilise dataSelected:

(

<script> 
        $(function() {
            var reportConfig = {
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: false,
                    dataSelectedEnabled: true
                }
            };
            var reportElement = document.getElementById('pbi-report');
            var pageName = document.getElementById('page-name');

            // Embed report
            var report = powerbi.embed(reportElement, reportConfig);
            var pages = [];
            var pageIndex = 0;
            var currentPage = null;
            report.on('loaded',
                function() { 
                    report.getPages()
                        .then(function (reportPages) {
                            pages = reportPages;
                        });
                });

            report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(data);
            });
            report.on('pageChanged',
                function(e) {
                    currentPage = e.detail.newPage;
                    //pageName.innerText = e.detail.newPage.displayName;
                    if (pages.length === 0) {
                        return;
                    }
                    pageIndex = pages.findIndex(function(el) {
                        return el.name === e.detail.newPage.name;
                    });
                });
            function changePage(direction) {
                var nextPageIndex = pageIndex + direction;
                if (nextPageIndex < 0) nextPageIndex = pages.length - 1;
                if (nextPageIndex >= pages.length) nextPageIndex = 0;

                pages[nextPageIndex].setActive();
            }
            function addFilter() {
                var target = $('#filter-target').val();
                var table = $('#filter-table').val();
                var column = $('#filter-column').val();
                var value = $('#filter-value').val();

                var basicFilter = {
                    $schema: "http://powerbi.com/product/schema#basic",
                    target: {
                        table: table,
                        column: column
                    },
                    operator: 'In',
                    values: [value]
                };

                var filterTarget = target === 'page' ? currentPage : report;
               
                filterTarget.getFilters().then(function(allTargetFilters) {
                    allTargetFilters.push(basicFilter);
                    filterTarget.setFilters(allTargetFilters);
                });
                $('#filter-form')[0].reset();
            }

            function clearFilters() {
                report.removeFilters();
                pages.forEach(function(page) {
                    page.removeFilters();
                });
            }
            function updateSetting(e, settingName) {
                var settings = {};
                settings[settingName] = e.target.checked;
                report.updateSettings(settings);
            }
        });
    </script>

and followed https://microsoft.github.io/PowerBI-JavaScript/demo/dataselection.html to the best of my ability. But I'm getting nothing firing when I click on a row. what am I missing? Any help appreciated.