O
O
okuznetsov12017-02-21 12:30:58
Angular
okuznetsov1, 2017-02-21 12:30:58

Why doesn't the demo example with "data-table" from off. site framework "Lumx"?

I'm trying to run a demo from off. site, but it turns out with great difficulty. I've been poking around for a few days, but I haven't made much progress.
It was possible to start displaying data in the "data-table", but sorting by fields does not work, and additional buttons do not appear after opening records (for editing and deleting).
This is how it works for me:
codepen.io/okuznetsov/pen/EZBGGZ
And this is in the example on off. website:
ui.lumapps.com/components/data-table
files off. demo here - https://github.com/lumapps/lumX/
My 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>

<b>app.js</b>

<code lang="javascript">
(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);
        }
        
    }]);
  
})();

</code>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question