Во framawork 'LUMX' возникла проблема с компонетном "data-table"

[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);
        }
        
    }]);
  
})();

[destus]

okuznetsov1,
Где инжект фильтра $filter?

[okuznetsov1]

Честно говоря мало что понял по поводу этого фильтра из офф источника.

у себя в коде сделал так (но не на что не повлияло):

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

Вообще вот его инжект из демо с офф. сайта:

(function()
{
    'use strict';

    angular
        .module('Controllers')
        .controller('DemoDataTableController', DemoDataTableController);

    DemoDataTableController.$inject = ['$filter', '$scope'];

    function DemoDataTableController($filter, $scope)
    {
        var vm = this;

        vm.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
        }];
        vm.advancedDataTableThead = angular.copy(vm.dataTableThead);
        vm.advancedDataTableThead.unshift(
        {
            name: 'image',
            format: function(row)
            {
                return '<img src="' + row.image + '" width="40" height="40" class="img-round">';
            }
        });
        vm.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') {
                vm.selectedRows = _selectedRows;
            }
        }

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

[destus]

okuznetsov1,
Сортировка заработала http://codepen.io/anon/pen/NdQMaL. По кнопочкам редактирования, картинкам и т.д. нужно scss/css библиотеки подключать: Material Design, Bourbon...

[okuznetsov1]

> по сортировке:

спасибо

> по поводу кнопочек редактирования и удаления

изначально планировал как-то так реализовывать (т.е. по клику вызывать функцию и дальше уже обрабатывать)
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="selectedRows.length === 1" ng-click="editCell()">
<i class="mdi mdi-pencil"></i>
</lx-button>

Но вы сказали, что можно с помощью scss/css библиотек: Material Design, Bourbon.
Вы можете дать ссылку на документацию по этому поводу или показать на примере (хотя бы схематично) как реализовывается, например, редактирование в одной из ячеек таблицы?

[destus]

Но вы сказали, что можно с помощью scss/css библиотек: Material Design, Bourbon.

Имелось ввиду внешнее оформление. А логику самому допиливать

Вы можете дать ссылку на документацию по этому поводу или показать на примере (хотя бы схематично) как реализовывается, например, редактирование в одной из ячеек таблицы?

подпишись на событие lx-data-table__selected и в коллбэке

function updateActions(_event, _dataTableId, _selectedRows) { }

в _selectedRows получишь массив выбранного. А так как это массив обычных JS объектов, можешь мутировать их состояние прямо в контроллере с выводом всяких формочек, модальных окон и т.д.

[okuznetsov1]

Это понятно, с этим я разобрался перед тем как писал вам предыдущее сообщение, но мне кажется должно быть решение проще.

Может быть можно включить редактируемые поля в таблице? (на пример как в материал дизайне - http://iamisti.github.io/mdDataTable/ (см. пример "Editable fields - small dialog ")


Что-то такого плана как параметр "edittable":

$scope.dataTableThead = [
{
name: 'dessert',
label: 'Dessert',
sortable: true
edittable: true
},
...............................
{
name: 'comments',
label: 'Comments',
icon: 'comment-text',
sortable: false
}];

[destus]

okuznetsov1,
Обычно о таких вещах пишут в документации к компоненту большими буквами, но здесь об этом ни слова. Поэтому врятли.

[okuznetsov1]

okuznetsov1,
Обычно о таких вещах пишут в документации к компоненту большими буквами, но здесь об этом ни слова. Поэтому врятли.

документация не особо хорошая (если бы примеров не было, то можно было сказать, что она вообще отсутствует). предположил, что возможно не указали про эту возможность со вставкой редактируемых полей. Сделал такой вывод на основании того, что про параметры "lxDataTableDisabled: true" и "sortable: true" в "data-table" тоже не чего не сказано, но они присутствуют.

[okuznetsov1]

Сейчас заметил, что сортировка в столбцах datatable работает как то не совсем правильно, сортирует как строку - даже несмотря на то, что в столбце числа (например ID)

Как можно подкорректировать filter?