Skip to content

Latest commit

 

History

History
211 lines (179 loc) · 7.77 KB

README.md

File metadata and controls

211 lines (179 loc) · 7.77 KB

angular-veasy-table

Native AngularJS directive to create quickly data tables without giving up the beauty and functionality.

alt tag alt tag

Features:

  • Native AngularJS directive
  • Selecting rows using checkbox
  • Order by specific column
  • Sort columns
  • Data paging (client-side)
  • Global data filter (filter all visible columns)
  • Possibility of changing the filter condition (AND, OR)
  • Resize columns
  • Show and hide columns
  • Accepts asynchronous request
  • Dynamic items by page
  • Translate labels
  • Select row event
  • Auto open column filter modal
  • You can save the state of the table configuration (state of columns)
  • Auto resize (proportionally, keeping percentual size of columns) if window size is changed

Todo:

  • Add dynamic '$filter' in columns data
  • Add column with action buttons (edit, remove, ...)

Dependencies

Examples

Instalation

$ bower install angular-veasy-table --save

Configuration

Attributes Description
list This is a list of data
selected-items This is a list of selected rows
config This is an object used to configure your veasy-table
In your HTML
<head>
  <link rel="stylesheet" href="./bower_components/angular-veasy-table/dist/veasy-table.min.css">
</head>
<body>
  <veasy-table list="items" selected-items="selectedItems" config="config"></veasy-table>
  <script type="text/javascript" src="./bower_components/angular-veasy-table/dist/veasy-table.min.js"></script>
  <script type="text/javascript" src="./bower_components/angular-veasy-table/dist/veasy-table-tpls.min.js"></script>
</body>
In your angular app
angular.module('myModule', ['veasyTable']);
In your controller

PS: The array of columns used below ($scope.columns) need a specific configuration.

$scope.columns = [
  {
    header: 'Id', // This string is displayed on table header name.
    
    value: 'id',  // This string is the name of property in your list declared on your html.
    
    show: false,  // This property, show or hide this column on your table.
    
    size: 20      // This property is used to define column size in percentage (%)
                  // If property 'show' is defined 'false', this size is ignored
  },
  { header: 'First Name', value: 'first_name', show: true, size: 40 },
  { header: 'Last Name', value: 'last_name', show: true, size: 40 }
];

$scope.config = {
  id: 'my-table',
  columns: $scope.columns
};

Documentation

If you need, you can add in config object the following properties:

Enable selection by checkbox:
checkbox: {
  enable: true,     // Enable = true, Disable = false. (Default is false)
  size: 20          // Set checkbox column size in pixels. (Default is 20)
}
Enable pagination:
pagination: {
  enable: true,     // Enable = true, Disable = false. (Default is false)
  currentPage: 0,   // Load in current page. (Default is 0)
  itemsPerPage: 5   // How many itens per page. Minimum is 1 and maximum is 100. (Default is 10)
}
Enable data filter:
filter: {
  enable: true,      // Enable = true, Disable = false. (Default is false)
  conditional: true  // Conditional filter 'AND', 'OR'. (Default is AND)
  delay: 500         // Delay in milliseconds. (Default is 500ms)
}
Enable column filter (show and hide columns):
columnFilter: {
  enable: true,     // Enable = true, Disable = false. (Default is false)
  autoOpen: true,    // Open automatically column filter modal, if not have visible columns. (Default is false)
  modalSize: 'sm'   // The size of modal can be setted: 'sm, md or lg' (Default is 'md')
}
Enable column sort:
sort: {
  enable: true      // Enable = true, Disable = false. (Default is false)
}
Enable column resize:
resizable: {
  enable: true,     // Enable = true, Disable = false. (Default is false)
  minimumSize: 5   // Set minimum column size in percentage '%'. (Default is 5)
}
Enable events:
events: {
  onClickRow: function (row) {} // This event is called when an row is clicked
  onApplyColumnFilter: function (columns) {} // This event is called when 'apply column' button (in modal) is clicked
  onTableStateChange: function (columns) {} // This event is called when state of columns (visibility, size, ...) is changed
}
Enable translate:
translate: {
  filter: {
    by: 'Filtrar por...',                           // Label of filter input
    and: 'E',                                       // Label of filter condition AND
    or: 'OU'                                        // Label of filter condition OR
  },
  pagination: {
    itemsByPage: 'Itens por Página',                // Label of items by page
    totalItems: 'Total de Itens'                    // Label of totel of items
  },
  columnFilter: {
    title: 'Quais colunas você deseja exibir?',     // Label of column filter modal title
    okButton: 'Ok',                                 // Label of column filter modal ok button
    cancelButton: 'Cancelar'                        // Label of column filter modal cancel button
  }
}

License

The MIT License (MIT)

Copyright (c) 2015 Fernando Machado Bernardino NandoMB. https://github.com/NandoMB/angular-veasy-table

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.