README
Veasy Angular Components
- Veasy Moment Format
- Veasy Calendar
- Veasy Datepicker (pending)
- Veasy Table
- Veasy Modal (pending)
- Veasy Input Search (pending)
angular-veasy-table
AngularJS directive to create quickly data tables without giving up the beauty and functionality.
Dependencies
- angular (^1.5.8)
- angular-sanitize (^1.5.8)
- bootstrap (^3.3.7)
- font-awesome (^4.6.3)
Images
Demonstration
Instalation
$ bower install angular-veasy-table --save
In your angular app
angular.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