UNPKG

ember-cli-filtertable-inbox-health

Version:
143 lines (98 loc) 4.43 kB
#Ember CLI Filter Table [![Build Status](https://travis-ci.org/gevious/ember-filtertable.svg)](https://travis-ci.org/gevious/ember-filtertable) ## Description This component is an Ember CLI add-on which presents a standard html table but allows for extra options. It includes a text input box for easy filtering, as well as hooks for dropdown filtering. It also allows for extra buttons in the header which can activate/deactivate based on selections in the table. ## Installation npm install ember-cli-filtertable-inbox-health --save-dev ##Basic Usage {{filter-table content=content bodyTemplate="mytable-body" headerTemplate="mytable-header"}} ## Demo Clone this repo and run the app sudo npm install -g ember-cli git clone git@github.com:gevious/ember-filtertable cd ember-filtertable npm install; bower install ember serve ## Options When calling the filter table, the following options are available: ### General Options #### viewLimit Type: `Number` Default: `20` This is the number of maximum records that will be shown in the table. If it is set to 0, no limit will be enforced. #### columnNum Type: `Number` Default: `2` This is the number of columns within the table. It is needed to calculate the header colspan attribute. #### selectedRecords Type: `Array` Default: `selectedRecords` This option is only needed when implementing logic that needs to know how many records are selected. By default, it will use the `selectedRecords` field on the controller if it hasn't been defined at startup. #### reloadRecords Type: `Boolean` Link this value to a variable in the controller to be able to refresh the table at will. This is particularly useful if one wants to implement some table filters (ie dropdown filters) and update the table after the filter has been selected. This value is reset to `false` every time the table is refreshed manually. #### isTree Type: `Boolean` Default: false When this is set, the table will assume the data is in a tree view. For this to work the data must have the following fields defined: - parent - a belongsTo relationship containing the parent record - children - a hasMany relationship to all its children - depth - the depth of the record in the tree (1 being a root node) - childNum - returns a count of the number of children a record has #### showSearchAncestors Type: `Boolean` Default: true With this selection activated the whole line of ancestry is shown in the table if the search filter matches a child. To only display the child record, set this to `false`. ### Text Filter Options #### showTextFilter Type: `Boolean` Default: `true` Either show or hide the text input for record filtering in the header #### filterField Type: `String` Default: `name` The field in each record on which to apply the text filtering ### Checkbox options #### showCheckboxes Type: `Boolean` Default: `true` This will show the _select all_ checkbox in the header. It is a convenience checkbox to allow for quick selecting of the whole visible record set #### toggleSelected Type: `Boolean` Default: `false` By default no records are selected, but setting this to true will mark all visible records as selected. ## Table rows Since table rows aren't called directly anymore, but rather via the component, any defined actions won't actually call the controller. We've added 5 proxies to the component which will call an action on the component. They are called: submit, remove, action1, action2, action3 To get them to work correctly, you'll need to define the action as follows: <td {{action "remove" "removeRow" r}}>(remove)</td> That definition will call the `removeRow` action on the controller with the current record. ## Tree view The table can be setup to display a tree view of records. Since this adds quite a bit of overhead, it needs to be enabled with the property `isTree`. __Note:__ At this point, the whole tree needs to be loaded into memory. In a future update the table will be able to handle lazy loading of nodes using promises. ## Within the controller The controller must implement the `applyDropdownFilter` function which will be called when the records are generated and filtered. This method doesn't have to be defined. If it is defined, it receives an array of records that match the text filter, and should return an array which has all the custom filtering applied.