Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question