# Dynamic Table (Component)

   The table component has been designed to be able to create a table deducing its columns using a json schema

## Inputs

| Property              | Type                         | Req   | Description                                                                                                                                                                   | Default         |
| --------------------- | ---------------------------- | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| items                 | Object([key: string]: any)[] | False | Item list displayed as table rows                                                                                                                                             | ''              |
| qaTag                 | String                       | False | Prefix used to generate the id values for qa tests                                                                                                                            | ''              |
| header                | Boolean                      | False | Boolean to show or hide the header                                                                                                                                            | true            |
| sortable              | Boolean                      | False | Boolean to make sortable the table, To enable sorting of columns use the new "sortable" field inside stTableHeader model                                                      | true            |
| filterable            | Boolean                      | False | Boolean to make filterable the table, To enable filtering of columns use the new "filterable" field inside stTableHeader model (necessary define filterConfig).               | false           |
| selectable            | Boolean                      | False | Boolean to show or hide a checkboxes in the first cell of rows                                                                                                                | false           |
| selectableAll         | Boolean                      | False | Boolean to show or hide a checkbox in the header to select or deselect all rows                                                                                               | false           |
| selected              | Boolean[]                    | False | Boolean list to indicate if a row is selected                                                                                                                                 | ''              |
| currentOrder          | Order                        | False | It specifies what is the current order applied to the table                                                                                                                   | ''              |
| customClasses         | String                       | False | Classes for adding styles to table tag from outside. These can be: separated-rows                                                                                             |                 |
| fixedHeader           | Boolean                      | False | Boolean to fix the table header                                                                                                                                               | false           |
| stickyHoverMenu       | Boolean                      | False | Boolean to fix hover menu always visible                                                                                                                                      | false           |
| iconClasses           | StTableIconClasses           | False | List of icon classes                                                                                                                                                          | ''              |
| activeHoverMenu       | Number                       | False | Position of the current active hover menu                                                                                                                                     |                 |
| hasHoverMenu          | Boolean                      | False | 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 |                 |
| hoverButton           | String                       | False | It specifies the icon class of the hover button displayed when user puts mouse over a row                                                                                     | 'icon-ellipsis' |
| selectedAll           | Boolean                      | False | It specifies if all rows are selected                                                                                                                                         |                 |
| locale                | String                       | False | Locale used to format dates                                                                                                                                                   | en-US           |
| templateContentFilter | TemplateRef                  | False | Reference to paint a custom template inside popover content                                                                                                                   | undefined       |
| jsonSchema            | JSONSchema4                  | False | Json schema to define its structure                                                                                                                                           |                 |
| uiDefinitions         | StDynamicTableUserInterface  | False | UI definition for each field                                                                                                                                                  | ''              |
| activeFilterFields    | String[]                     | False | List of current filtered fields                                                                                                                                               |                 |

## Outputs

| Property      | Type                                  | Description                                                                         |
| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------- |
| changeOrder   | Order                                 | Event emitted with the new order which has to be applied to the table rows          |
| selectAll     | Boolean                               | Event emitted  when user interacts with the checkbox to select or deselect all rows |
| fields        | EventEmitter<StTableHeader[]>   | Event emitted when header fields are being loaded                                   |
| clickFilter   | String                                | Event emitted when using filters custom template                                    |
| selectFilters | StTableHeader[]                       | Event emitted  when user interacts with filter button without a custom template     |
| showHoverMenu | EventEmitter<number                | Event emitted when user clicks on hover button of a row                             |
| selectRow     | Object(checked: boolean, row: number) | Event emitted when user clicks on checkbox of a row                                 |
| clickCell     | StDynamicTableClickCellEvent          | Event emitted when user clicks on a cell                                            |

## Example


```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>
```

## Models

*StDynamicTableHeader* (StDynamicTableHeader)

```typescript

```

*StDynamicTableUISpecification* (StDynamicTableUISpecification)

```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;
}
```

*StDynamicTableUserInterface* (StDynamicTableUserInterface)

```typescript
export interface StDynamicTableUserInterface {
    [key: string]: StDynamicTableUISpecification;
}
```