AngularJS directive to create quickly data tables without giving up the beauty and functionality.
- angular (^1.5.8)
- angular-sanitize (^1.5.8)
- bootstrap (^3.3.7)
- font-awesome (^4.6.3)
$ bower install angular-veasy-table --saveangular.module('yourModule', ['veasy.table'])
.controller('yourController', function() {
$scope.config = {
// This 'id' is not necessary. Use it only if you want to set a specific id for this component.
// If you not set a specific id, it will be randomly generated.
id: 'my-specific-id',
// Columns configuration
columns: [
{
// That's the label of your column.
header: 'Id',
// That's the field of your column, and it's used to get value
// from your result array.
value: 'id',
// This property is used to add to this column a dropdown filter.
dropdown: true,
// This property is used to define the default value to the column when necessary.
// The default value will be applied when the column value is: undefined, null, false or '' (empty string).
default: 'Not Informed',
// It's used only if you want to hide this column in a specific screen size.
// The screen sizes are separated by spaces.
// Ex: hideOn: 'lg md sm xs'.
hideOn: 'xs',
// It's used only if you want to apply an angular filter to this column.
filter: {
type: 'number',
fractionSize: 0
},
// It's used to define percentual size to the column.
size: 5
},
{ header: 'First Name', value: 'first_name' },
{ header: 'Last Name', value: 'last_name', hideOn: 'xs' },
{ header: 'Email', value: 'email', hideOn: 'sm xs' },
{ header: 'Gender', value: 'gender', hideOn: 'sm xs' },
{ header: 'Money', value: 'money', hideOn: 'xs', filter: { type: 'currency', symbol: 'R$', fractionSize: 2 } },
{ header: 'Date', value: 'date', hideOn: 'lg md sm xs', filter: { type: 'date', format: 'dd/MM/yyyy HH:mm:ss' } }
]
};
});<head>
<link rel="stylesheet" href="bower_components/angular-veasy-table/dist/css/veasy-table.min.css" media="screen" charset="utf-8"/>
</head>
<body>
...
<veasy-table list="items" config="config"></veasy-table>
...
<script src="bower_components/angular-veasy-table/dist/js/veasy-table-tpls.min.js" charset="utf-8"></script>
<script src="bower_components/angular-veasy-table/dist/js/veasy-table.min.js" charset="utf-8"></script>
</body>All of these configurations, you need put inside your config object, like '$scope.config'.
toggleColumns: {
enable: true, // Enable this feature. (Default is false).
position: 'begin', // Use it if you want to put the 'toggle' icon at the begin of the table. Default is undefined.
icons: { // Use it if you want to replace the default icons.
opened: 'fa fa-chevron-down',
closed: 'fa fa-chevron-right'
}
}contextMenu: {
enable: true, // Enable this feature. (Default is false).
icon: 'fa fa-ellipsis-v', // Use it to set an icon to your menu.
options: [
{
icon: 'fa fa-trash-o', // Use it to set an icon to your menu item.
label: 'Delete', // Use it to set a text to your menu item.
action: function(row) { // Use it to set a action to your menu item. The first parameter aways will be the selected row.
...
alert('Your row has been deleted!');
}
}
]
}pagination: {
enable: true, // Enable this feature. (Default is false).
currentPage: 0, // Load in current page. (Default is 0)
itemsPerPage: 10, // How many items per page you want to see. Minimum is 1 and maximum is 50. (Default is 10)
}filter: {
enable: true, // Enable this feature. (Default is false).
conditional: true, // Conditional filter 'AND' or 'OR'. (Default is AND)
isCaseSensitive: false, // To make the query case sensitive (Default is true)
ignoreSpecialCharacters: true, // To ignore special characters and accentuations (Default is false)
delay: 300 // Delay in milliseconds. (Default is 300ms)
}columnFilter: {
enable: true, // Enable this feature. (Default is false).
modalOptions: {
size: 'md', // The size of modal: 'sm', 'md' or 'lg'. (Default is 'md')
autoOpen: false, // Open automatically column filter modal, if not have visible columns. (Default is false)
keyboard: true, // Enable to use keyboard on filter modal. (Default is true)
backdrop: true // Enable to use backdrop on filter modal. (Default is true)
}
}clickRow: {
enable: true // Enable this feature. (Default is false).
}checkbox: {
enable: true, // Enable this feature. (Default is false).
}sort: {
enable: true // Enable this feature. (Default is false).
}labels: {
filter: {
by: 'Filtrar por...',
all: 'Todas',
and: 'E',
or: 'OU'
},
pagination: {
itemsPerPage: 'Itens por Página',
totalItems: 'Total de Itens'
},
modal: {
title: 'Quais colunas você deseja exibir?',
okButton: 'Aplicar',
cancelButton: 'Cancelar'
}
}All of veasy-table events are use $emit, and to listen these events you need to use $on
$scope.$on('veasyTable:onClickRow', function(event, data) {
console.log('Some row was clicked', data);
});$scope.$on('veasyTable:selectedItems', function(event, data) {
console.log('Some items were selected', data);
});$scope.$on('veasyTable:onApplyColumnFilter', function(event, data) {
console.log('Some columns was applied', data);
});$scope.$on('veasyTable:onStartPagination', function(event) {
console.log('Pagination event was started');
});
$scope.$on('veasyTable:onEndPagination', function(event) {
console.log('Pagination event was done');
});$scope.$on('veasyTable:onStartSearch', function(event) {
console.log('Search event was started');
});
$scope.$on('veasyTable:onEndSearch', function(event) {
console.log('Search event was done');
});$scope.$on('veasyTable:onStartSort', function(event) {
console.log('Sort event was started');
});
$scope.$on('veasyTable:onEndSort', function(event) {
console.log('Sort event was done');
});Enable angular $filter at columns?
All of these configurations, you need put inside your target column, in your $scope.config object.
filter: {
name: 'currency',
symbol: 'R$',
fractionSize: 0
}filter: {
name: 'date',
format: 'dd/MM/yyyy HH:mm:ss',
timezone: ''
}filter: {
name: 'json',
spacing: 2
}filter: {
name: 'number',
fractionSize: 2
}filter: {
name: 'limitTo',
limit: 10,
begin: 0
}filter: {
name: 'lowercase'
}filter: {
name: 'uppercase'
}filter: {
name: 'url',
text: '',
target: '_blank'
}Just remove the 'selected-items' property
<!-- from -->
<veasy-table config="config" list="resultList" selected-items="selectedItems"></veasy-table>
<!-- to -->
<veasy-table config="config" list="resultList"></veasy-table>// FROM
angular.module('yourModule', [ 'veasyTable' ]);
// TO
angular.module('yourModule', [ 'veasy.table' ]);// FROM
columns: [
{
header: 'Id',
value: 'id',
size: 5
// TODO: REMOVE
// show: true
}
]
// TO
columns: [
{
header: 'Id',
value: 'id',
size: 5,
// Use something like this, if you want to use responsive columns and/or angular filters
hideOn: 'lg md sm xs',
filter: { type: 'number', fractionSize: 0 }
}
]// FROM
checkbox: {
enable: true
// TODO: REMOVE
// size: 20
}
// TO
checkbox: {
enable: true
}// FROM
columnFilter: {
enable: true,
// TODO: MOVE
// autoOpen: true,
// TODO: MOVE and RENAME
// modalSize: 'md'
}
// TO
columnFilter: {
enable: true,
modalOptions: {
size: 'md',
autoOpen: false,
keyboard: true,
backdrop: true
}
}// TODO: REMOVE
// resizable: {
// enable: true,
// minimumSize: 5
// },// FROM
translate: {
filter: {
by: 'Filtrar por...',
and: 'E',
or: 'OU'
},
pagination: {
itemsByPage: 'Itens por Página',
totalItems: 'Total de Itens'
},
columnFilter: {
title: 'Quais colunas você deseja exibir?',
okButton: 'Ok',
cancelButton: 'Cancelar'
}
}
// TO
labels: {
filter: {
by: 'Filtrar por...',
all: 'Todas',
and: 'E',
or: 'OU'
},
pagination: {
itemsPerPage: 'Itens por Página',
totalItems: 'Total de Itens'
},
modal: {
title: 'Quais colunas você deseja exibir?',
okButton: 'Aplicar',
cancelButton: 'Cancelar'
}
}On events config, just remove, because now, all events use $emit, and to listen these events you need to use $on.
// FROM
// TODO: REMOVE
// events: {
// onClickRow: function(row) {
// alert('Row Clicked: ' + JSON.stringify(row.id) + '. More details in your console.');
// console.log(JSON.stringify(row, null, 2));
// console.log('---------------------------------');
// console.log('');
// },
// onApplyColumnFilter: function(columns) {
// alert('Applied Columns! More details in your console.');
// console.log(JSON.stringify(columns, null, 2));
// console.log('---------------------------------');
// console.log('');
// },
// onTableStateChange: function(columns) {
// alert('State changed! More details in your console.');
// console.log(JSON.stringify(columns, null, 2));
// console.log('---------------------------------');
// console.log('');
// }
// }
// TO
$scope.$on('veasyTable:onClickRow', function(event, data) {
console.log('Some row was clicked', data);
});
$scope.$on('veasyTable:onApplyColumnFilter', function(event, data) {
console.log('Some columns was applied', data);
});