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 configurationcolumns: [{// 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><linkrel="stylesheet" href="bower_components/angular-veasy-table/dist/css/veasy-table.min.css" media="screen" charset="utf-8"/></head><body>
...
<veasy-tablelist="items" config="config"></veasy-table>
...
<scriptsrc="bower_components/angular-veasy-table/dist/js/veasy-table-tpls.min.js" charset="utf-8"></script><scriptsrc="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-tableconfig="config" list="resultList" selected-items="selectedItems"></veasy-table><!-- to --><veasy-tableconfig="config" list="resultList"></veasy-table>// FROMangular.module('yourModule',['veasyTable']);// TOangular.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 filtershideOn: '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);});