[okuznetsov1]

Пытаюсь запустить демо-пример с офф. сайта, но получается с большим трудом.

Удалось запустить отображение данных в "data-table", но не работает сортировка по полям, а также не появляются дополнительные кнопки после открыживания записей (для редактирования и удаления).

Это то как у меня работает:
http://codepen.io/okuznetsov/pen/EZBGGZ

А это в примере на офф. сайте:
http://ui.lumapps.com/components/data-table

Весь день тыкаюсь, но особо не продвинулся.

Демо лежит здесь - https://github.com/lumapps/lumX/


Мой index.html

<div ng-app="notes">

    <div ng-controller="MainController">

        <div class="toolbar has-divider has-divider--dark">
            <div class="toolbar__label pl">
                <span>{{ selectedRows.length || 0 }} selected item(s) </span>
            </div>
            <div class="toolbar__right">
                <lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="selectedRows.length === 1">
                    <i class="mdi mdi-pencil"></i>
                </lx-button>

                <lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="selectedRows.length >= 1">
                    <i class="mdi mdi-delete"></i>
                </lx-button>
            </div>
        </div>

        <lx-data-table id="lolo" lx-selectable="true" lx-thead="dataTableThead" lx-tbody="dataTableTbody"></lx-data-table>


    </div>

</div>

Мой app.js

(function(){

    var app = angular
            .module('notes', ['lumx', 'lumx.data-table', 'ngSanitize']);

  
    app.controller('MainController', ['$scope', '$http', '$log', function($scope, $http, $log) {

        $scope.notesContent = '';

        $scope.dataTableThead = [
        {
            name: 'dessert',
            label: 'Dessert',
            sortable: true
        },
        {
            name: 'calories',
            label: 'Calories',
            sortable: true
        },
        {
            name: 'fat',
            label: 'Fat (g)',
            sortable: true,
            sort: 'asc'
        },
        {
            name: 'comments',
            label: 'Comments',
            icon: 'comment-text',
            sortable: false
        }];
        $scope.advancedDataTableThead = angular.copy($scope.dataTableThead);
        $scope.advancedDataTableThead.unshift(
        {
            name: 'image',
            format: function(row)
            {
                return '<img src="' + row.image + '" width="40" height="40" class="img-round">';
            }
        });
        $scope.dataTableTbody = [
        {
            id: 1,
            image: '/images/placeholder/1-square.jpg',
            dessert: 'Frozen yogurt',
            calories: 159,
            fat: 6.0,
            comments: 'Lorem ipsum'
        },
        {
            id: 2,
            image: '/images/placeholder/2-square.jpg',
            dessert: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            comments: 'Lorem ipsum',
            lxDataTableDisabled: true
        },
        {
            id: 3,
            image: '/images/placeholder/3-square.jpg',
            dessert: 'Eclair',
            calories: 262,
            fat: 16.0,
            comments: 'Lorem ipsum'
        }];

        $scope.$on('lx-data-table__selected', updateActions);
        $scope.$on('lx-data-table__unselected', updateActions);
        $scope.$on('lx-data-table__sorted', updateSort);

        ////////////

        function updateActions(_event, _dataTableId, _selectedRows)
        {
            if (_dataTableId === 'lolo') {
                $scope.selectedRows = _selectedRows;
            }
        }

        function updateSort(_event, _dataTableId, _column)
        {
            $scope.dataTableTbody = $filter('orderBy')($scope.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false);
        }
        
    }]);
  
})();