# UX Rocket Treelist UX Rocket Treelist component provides an expandable/collapsible row systems for the tables. Semantically, all rows are in the same level but visually they are bound with `id` and *parent*/*child* relation. ## Installation According to your usage, you can use directly __dist__ version or, add __lib__ to your project. First you need to checkout the packages from either [npm](https://www.npmjs.com/) or [bower](https://bower.io) __npm__ ```Shell npm install uxrocket.treelist ``` or __bower__ ```Shell bower install uxrocket.treelist ``` ## For Development If you want to add your project source, import JS and Sass files in __lib__ folder to your project. For the Sass files, use `_uxrocket-treelist.scss` partial file instead of `uxrocket.treelist.scss` ```SCSS // styles.scss // Plugin styles @import "/lib/_uxrocket-treelist"; // Your project styles ``` ```JS // app.js // If you use Grunt or Gulp, add /lib/uxrocket.treelist.js to your config // For Codekit or similar tools // @codekit-append '/lib/uxrocket.treelist.js' ``` ## For Direct Usage In your __HTML__ after jQuery add `uxrocket.treelist.min.js` and add styles to your `head` ```HTML ... ... ``` ## Usage Sample HTML structure as follows, ```HTML

Name	Version	Type
UX Rocket Treelist	0.1.0	Plugin
jQuery	Latest	Dependency
UX Rocket Autocomplete	2.0.2	Plugin
jQuery	Latest	Dependency
UX Rocket Modal	0.8.0	Plugin

``` After preparing above HTML, bind plugin to your table ```JavaScript $(function(){ // standard $('.treelist').treelist(); }); ``` By default, _treelist_ does not have a configurable options. You can define, `onReady` and `onRemove` callbacks for related events. However, you can add options via `data` attributes to nodes. ### Options Property | Default | Description -------------- | ----------- | ------------------------------------------------------------------------ header | null | Custom class names for parent rows content | null | Custom class names for child rows toggle | null | Custom class names for toggle Data Attributes | Description ----------------- | ------------------------------------------------------------------------ data-on-expand | Function/method called after parent row expaned. Applies to parent row data-on-collapse | Function/method called after parent row collapsed. Applies to parent row data-active | If set `true` parent row and its sub rows will be expanded on load. data-uxrtl-id | Generic ID attribute for rows. Only required if row is a parent data-uxrtl-parent | Parent ID for the child rows. Required for obtaining parent/child relation data-on-ready | Function called after plugin binded to table. Applies to table itself data-on-remove | Function called when plugin destroyed. Applies to table itself Callback | -------------- | ------------------------------------------------------------------------ onReady | Function called after plugin binded to table. Applies to table itself onRemove | Function called when plugin destroyed. Applies to table itself Events | ---------------- | ----- uxrready | Triggered when plugin bind to table uxrexpanded | Triggered when a row expanded uxrcollapsed | Triggered when a row collapsed uxrleafcollapsed | Triggered when a child row, is also a parent row, collapsed uxrremove | Triggered when plugin destroyed/removed from table ### Public Methods Method | Description ----------------------------- | ------------------------------------------------------- $(selector).treelist(options) | Binds plugin to a table $.uxrtreelist | Plugin name $.uxrtreelist.version | Displays the plugin version $.uxrtreelist.settings | Displays the default plugin settings