Skip to content

Latest commit

 

History

History
91 lines (74 loc) · 2.92 KB

README.md

File metadata and controls

91 lines (74 loc) · 2.92 KB
Raw

Angular zlTable, play now with tables

This module allows you to display tables and play with multiple datasources and filters.

Demo

Requirements

  • AngularJS 1.3

Features

  • Line selection (with multi-select and alt key support)
  • Live columns adding, deleting, and reordering via drag and drop
  • Grid mode display

Usage

Directly from Bower.

Care with current version! Still WIP...

bower install zl-table
<table zl-table="myData" 
    update="updateFunction($pagination)" 
    selected-data="selected"
    zl-pagination="pagination" 
    columns="columns" 
    grid-template="gridTemplate" 
    grid-mode="gridMode"
    zl-row-click="click($event, $elt)"
    >
        <thead>
        <tr>
            <th id="favoriteFruit">Favorite Fruit</th>
            <th id="greeting">Greeting</th>
            <th id="friends">Friends</th>
            <th id="tags">Tags</th>
           
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>{{elt.favoriteFruit}}</td>
            <td>{{elt.greeting}}</td>
            <td>{{elt.friends.length}}</td>
            <td>
                <span ng-repeat="tag in elt.tags track by $index" class="label label-info" style="margin:0 1% 0 1%">
                    {{tag}}
                 </span>
            </td>
           
        </tr>
        </tbody>
</table>

Parameters

  • zl-table Main attribute. Contains the data you wish to display.
  • update Function to be called when pagination changes. This function is responsible for the data updates Param: $pagination: the pagination object you passed to the directive
  • zl-pagination two-way bound object to communicate the pagination to the directive.
    • currentPage (int) 0 indexed
    • perPage (int) number of elements per page
    • totalElements (int) the update function is responsible for updating the totalElements count since the directive has no way to figure it out
  • columns A sorted array containing the columns you want to display in order. Columns are identified by the id you have set in the elements. This array is two-way bound so that if the user drags and drops a column, you will be notified.
  • selected-data An array containing the ids of the elements the user has selected. Two-way bound, so you can pre-select data. And get the selected data anytime.
  • selection-changed Callback function called when the user selects an element. Params: $selectedData, the selected-data array
  • grid-mode boolean. Should the table display in grid mode instead
  • grid-template string. The id of the angular template used for displaying the grid.
  • row-click-fn Callback for when the user clicks on a row.
  • id-field The key of the field to be used as an id for the selection of elements.