@stratio/egeo
Version:
286 lines (282 loc) • 10.6 kB
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="dynamictablecomponent">Dynamic Table (Component)</h1>
<p>The table component has been designed to be able to create a table deducing its columns using a json schema</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>items</td>
<td>Object([key: string]: any)[]</td>
<td>False</td>
<td>Item list displayed as table rows</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>false</td>
</tr>
<tr>
<td>selectable</td>
<td>Boolean</td>
<td>False</td>
<td>Boolean to show or hide a checkboxes in the first cell of rows</td>
<td>false</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>selected</td>
<td>Boolean[]</td>
<td>False</td>
<td>Boolean list to indicate if a row is selected</td>
<td>''</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>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>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>iconClasses</td>
<td>StTableIconClasses</td>
<td>False</td>
<td>List of icon classes</td>
<td>''</td>
</tr>
<tr>
<td>activeHoverMenu</td>
<td>Number</td>
<td>False</td>
<td>Position of the current active hover menu</td>
<td></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></td>
</tr>
<tr>
<td>hoverButton</td>
<td>String</td>
<td>False</td>
<td>It specifies the icon class of the hover button displayed when user puts mouse over a row</td>
<td>'icon-ellipsis'</td>
</tr>
<tr>
<td>selectedAll</td>
<td>Boolean</td>
<td>False</td>
<td>It specifies if all rows are selected</td>
<td></td>
</tr>
<tr>
<td>locale</td>
<td>String</td>
<td>False</td>
<td>Locale used to format dates</td>
<td>en-US</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>jsonSchema</td>
<td>JSONSchema4</td>
<td>False</td>
<td>Json schema to define its structure</td>
<td></td>
</tr>
<tr>
<td>uiDefinitions</td>
<td>StDynamicTableUserInterface</td>
<td>False</td>
<td>UI definition for each field</td>
<td>''</td>
</tr>
<tr>
<td>activeFilterFields</td>
<td>String[]</td>
<td>False</td>
<td>List of current filtered fields</td>
<td></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>fields</td>
<td>EventEmitter<StTableHeader[]></td>
<td>Event emitted when header fields are being loaded</td>
</tr>
<tr>
<td>clickFilter</td>
<td>String</td>
<td>Event emitted when using filters custom template</td>
</tr>
<tr>
<td>selectFilters</td>
<td>StTableHeader[]</td>
<td>Event emitted when user interacts with filter button without a custom template</td>
</tr>
<tr>
<td>showHoverMenu</td>
<td>EventEmitter<number</td>
<td>Event emitted when user clicks on hover button of a row</td>
</tr>
<tr>
<td>selectRow</td>
<td>Object(checked: boolean, row: number)</td>
<td>Event emitted when user clicks on checkbox of a row</td>
</tr>
<tr>
<td>clickCell</td>
<td>StDynamicTableClickCellEvent</td>
<td>Event emitted when user clicks on a cell</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html"><st-dynamic-table [jsonSchema]="jsonSchema"
[items]="sortedUsers"
[sortable]="true"
[filterable]="true"
[hasHoverMenu]="true"
[currentOrder]="currentOrder"
[activeHoverMenu]="activeHoverMenuPosition"
[templateContentFilter]="filterContent"
(changeOrder)="onSortTable($event)"
(showHoverMenu)="onShowHoverMenu($event)">
<st-dropdown-menu st-dynamic-table-hover-menu
class="hover-menu"
[items]="rowActions"
[active]="activeHoverMenuPosition[3] !== undefined"
[visualMode]="1">
</st-dropdown-menu>
</st-dynamic-table>
</code></pre>
<h2 id="models">Models</h2>
<p><em>StDynamicTableHeader</em> (StDynamicTableHeader)</p>
<pre><code class="typescript language-typescript">
</code></pre>
<p><em>StDynamicTableUISpecification</em> (StDynamicTableUISpecification)</p>
<pre><code class="typescript language-typescript">export interface StDynamicTableUISpecification {
sortable?: boolean;
styles?: {
[key: string]: string;
};
fk?: StDynamicTableFk;
group_field?: {
view: string;
fkTable: string;
};
templateRef?: string;
visible?: boolean;
dateFormat?: string;
clickable?: boolean;
}
</code></pre>
<p><em>StDynamicTableUserInterface</em> (StDynamicTableUserInterface)</p>
<pre><code class="typescript language-typescript">export interface StDynamicTableUserInterface {
[key: string]: StDynamicTableUISpecification;
}
</code></pre>
</body>
</html>