@stratio/egeo

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Stratio Egeo - Documentation</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body class="container-fluid"> <a href="/index.html">Go Back to index</a><br> <h1 id="tablecomponent">Table (Component)</h1> <p>The table component has been designed to display any content like images, text, graphs, etc.</p> <h2 id="inputs">Inputs</h2> <table class="table table-striped"> <thead> <tr> <th id="property">Property</th> <th id="type">Type</th> <th id="req">Req</th> <th id="description">Description</th> <th id="default">Default</th> </tr> </thead> <tbody> <tr> <td>fields</td> <td>StTableHeader[]</td> <td>False</td> <td>List of field displayed in the header</td> <td>''</td> </tr> <tr> <td>qaTag</td> <td>String</td> <td>False</td> <td>Prefix used to generate the id values for qa tests</td> <td>''</td> </tr> <tr> <td>header</td> <td>Boolean</td> <td>False</td> <td>Boolean to show or hide the header</td> <td>true</td> </tr> <tr> <td>sortable</td> <td>Boolean</td> <td>False</td> <td>Boolean to make sortable the table, To enable sorting of columns use the new "sortable" field inside stTableHeader model</td> <td>true</td> </tr> <tr> <td>filterable</td> <td>Boolean</td> <td>False</td> <td>Boolean to make filterable the table, To enable filtering of columns use the new "filterable" field inside stTableHeader model (necessary define filterConfig).</td> <td>true</td> </tr> <tr> <td>selectableAll</td> <td>Boolean</td> <td>False</td> <td>Boolean to show or hide a checkbox in the header to select or deselect all rows</td> <td>false</td> </tr> <tr> <td>currentOrder</td> <td>Order</td> <td>False</td> <td>It specifies what is the current order applied to the table</td> <td>''</td> </tr> <tr> <td>templateContentFilter</td> <td>TemplateRef</td> <td>False</td> <td>Reference to paint a custom template inside popover content</td> <td>undefined</td> </tr> <tr> <td>statusFilter</td> <td>Boolean[]</td> <td>False</td> <td>List of status filter by column, needed with templateContentFilter</td> <td>''</td> </tr> <tr> <td>iconClasses</td> <td>StTableIconClasses</td> <td>False</td> <td>List of icon classes</td> <td>''</td> </tr> <tr> <td>fixedHeader</td> <td>Boolean</td> <td>False</td> <td>Boolean to fix the table header</td> <td>false</td> </tr> <tr> <td>stickyHoverMenu</td> <td>Boolean</td> <td>False</td> <td>Boolean to fix hover menu always visible</td> <td>false</td> </tr> <tr> <td>customClasses</td> <td>String</td> <td>False</td> <td>Classes for adding styles to table tag from outside. These can be: separated-rows</td> <td></td> </tr> <tr> <td>selectedAll</td> <td>Boolean</td> <td>False</td> <td>It specifies if all rows are selected</td> <td>false</td> </tr> <tr> <td>hasHoverMenu</td> <td>Boolean</td> <td>False</td> <td>It specifies if a menu has to be displayed when user puts the mouse over the rows. Remember to add a cell with the selector st-table-row-hover for adding content to the menu</td> <td>false</td> </tr> </tbody> </table> <h2 id="outputs">Outputs</h2> <table class="table table-striped"> <thead> <tr> <th id="property">Property</th> <th id="type">Type</th> <th id="description">Description</th> </tr> </thead> <tbody> <tr> <td>changeOrder</td> <td>Order</td> <td>Event emitted with the new order which has to be applied to the table rows</td> </tr> <tr> <td>selectAll</td> <td>Boolean</td> <td>Event emitted when user interacts with the checkbox to select or deselect all rows</td> </tr> <tr> <td>clickFilter</td> <td>String</td> <td>Event emitted when clicking on filters icon</td> </tr> <tr> <td>selectFilters</td> <td>StTableHeader[]</td> <td>Event emitted when user interacts with filter button without a custom template</td> </tr> </tbody> </table> <h2 id="example">Example</h2> <pre><code class="html language-html"><st-table [fields]="fields" [sortable]="true" (changeOrder)="yourFunctionToOrder($event)"> <tr st-table-row ngFor="let userData of data"> <td st-table-cell st-table-row-content> <label>{{userData.id}}</label> </td> <td st-table-cell st-table-row-content> <label>{{userData.name}}</label> </td> <td st-table-cell st-table-row-content> <label>{{userData.lastName}}</label> </td> <td st-table-cell st-table-row-content> <label>{{userData.phone}}</label> </td> <td st-table-cell st-table-row-content> <label>{{userData.company}}</label> </td> <td st-table-cell st-table-row-content> <label>{{userData.completedProfile}}</label> </td> <td st-table-row-hover> <i class="icon icon-arrow2_right"></i> </td> </tr> </st-table> </code></pre> <h2 id="models">Models</h2> <p><em>StTableHeader</em> (StTableHeader)</p> <pre><code class="typescript language-typescript">export interface StTableHeader { id: string; label: string; sortable ? : boolean; filters ? : StFilterHeader; filterable ? : boolean; templateRef ? : string; } </code></pre> <p><em>StDynamicTableHeader</em> (StFilterElement)</p> <pre><code class="typescript language-typescript">export interface StFilterElement { id: String | number; name: String | number; selected ? : boolean; } </code></pre> <p><em>StFilterHeader</em> (StFilterHeader)</p> <pre><code class="typescript language-typescript">export interface StFilterHeader { filterConfig ? : StFilterElement[]; showSettingBtn ? : boolean; title: string; buttonText ? : string; templateRef ? : string; } </code></pre> <p><em>StTableFilterIconClasses</em> (StTableFilterIconClasses)</p> <pre><code class="typescript language-typescript">export class StTableFilterIconClasses { selected: string; enabled: string; constructor() { this.selected = 'icon-facets-2'; this.enabled = 'icon-arrow4_down'; } </code></pre> <p><em>StTableIconClasses</em> (StTableIconClasses)</p> <pre><code class="typescript language-typescript">export class StTableIconClasses { filter: StTableFilterIconClasses; sort: { asc: string; desc: string; } </code></pre> </body> </html>