npm package: @gisgo/dynamic-table
Description: This Angular library make your tables easy.
Author: Bilel DHAOUADI
Latest version: 1.0.7

# Gisgo Dynamic Table

Gisgo Dynamic Table is a JSON powered  library based on Angular that make complex table simpler & maintainability to your application's tables.


## Install

Run `npm install @gisgo/dynamic-table`

## Import Module

After installing the library, go to the `AppModule` or sub-module and run import `DynamicFormModule.forChild()`
```typescript
import {DynamicTableModule} from '@gisgo/dynamic-table';

@NgModule({
  declarations: [],
  imports: [
    DynamicTableModule.forChild({})
  ]
})
export class AppModule { }
```

## Use Dynamic Table

To generate your table you need to define your table columns (fields) by creating table config:

```typescript
tableConfig: DynamicTableConfig = {
  remotePaginator: false,
  fields: [
    {
      attribute: 'first_name',
      component: 'text',
      label: 'First name',
    },
    {
      attribute: 'last_name',
      component: 'text',
      label: 'Last name'
    },
    {
      attribute: 'company.name',
      component: 'text',
      label: 'Company'
    },
    {
      attribute: 'company.address',
      component: 'text',
      label: 'Address'
    }
  ]
};
```

### Interfaces
#### DynamicTableConfig

###### Properties
| Name                                | Mandatory |  Default  | Description                                |
|-------------------------------------|:---------:|:---------:|--------------------------------------------|
| paginator: `boolean`                |    No     |  `true`   | Enable paginator.                          |
| remotePaginator: `boolean`          |    No     |  `false`  | Set paginator to be manged by external api. |
| selection: `boolean`                |    No     |  `false`  | Enable row selection.                      |
| selectionColor: `ThemePalette`      |    No     | `primary` | Selection color.                           |
| fields: `DynamicTableField[]`       |    Yes    |   `[]`    | Columns Definition.                        |
| fields: `DynamicTableExpandField[]` |    No     |   `[]`    | Columns Definition for expandable row.     |

#### DynamicTableField

###### Properties
| Name                            | Mandatory | Default  | Description                                                                                   |
|---------------------------------|:---------:|:--------:|-----------------------------------------------------------------------------------------------|
| attribute: `string`             |    Yes    |          | Unique identifier inside table data row element (can be seperated by `.` to access sub-object) |
| component: `string`             |    Yes    |          | Component reference to be loaded inside table cell.                                           |
| label: `string`                 |    Yes    |          | Header title.                                                                                 |
| sortable: `boolean`             |    No     | `false`  | Define if the column is sortable.                                                             |
| textAlign: `string`             |    No     | `'left'` | CSS text align.                                                                               |
| headerClass: `string`           |    No     |  `''`    | Column header css class.                                                                      |
| class: `string`                 |    No     |   `''`   | Column css class.                                                                             |
| custom: `{[type: string]: any}` |    No     |  `null`  |                                                                                               |

#### DynamicTableExpandField

###### Properties
| Name                            | Mandatory | Default  | Description                                                                                    |
|---------------------------------|:---------:|:--------:|------------------------------------------------------------------------------------------------|
| attribute: `string`             |    Yes    |          | Unique identifier inside table data row element (can be seperated by `.` to access sub-object) |
| component: `string`             |    Yes    |          | Component reference to be loaded inside table cell.                                            |
| textAlign: `string`             |    No     | `'left'` | CSS text align.                                                                                |
| custom: `{[type: string]: any}` |    No     |  `null`  |                                                                                                |


And loading data to be showed in the table (the data can be loaded from api):
```typescript
tableData: DynamicTableData = {
  data: [
    {
      first_name: 'Bilel',
      last_name: 'Dhaouadi',
      company: {
        name: 'Gisgo',
        address: 'State of web artisan'
      }
    },
    {
      first_name: 'John',
      last_name: 'Doe',
      company: {
        name: 'Gisgo',
        address: 'State of web artisan'
      }
    }
  ],
  meta: {
    current_page: 1,
    per_page: 10,
    size_options: [10, 20, 50],
    total: 2
  }
}
```
### Interfaces
#### DynamicTableData

###### Properties
| Name                         | Mandatory | Default | Description                                 |
|------------------------------|:---------:|:-------:|---------------------------------------------|
| data: `any[]`                |    No     |  `[]`   | Set paginator to be manged by external api. |
| meta: `DynamicTableDataMeta` |    Yes    |  `[]`   | Columns Definition.                         |

#### DynamicTableDataMeta
###### Properties

| Name                     | Mandatory | Default | Description                               |
|--------------------------|:---------:|:-------:|-------------------------------------------|
| current_page: `number`   |    No     |         | Current page.                             |
| per_page: `number`       |    Yes    |         | Total record by page.                     |
| size_options: `number[]` |    Yes    |         | Size of page can be selected by the user. |
| total: `number`          |    Yes    |         | Total count of all records.               |


####
in your component html file place `gisgo-dynamic-table` directive:

```html
<gisgo-dynamic-table [config]="tableConfig"
                     [data]="tableData"
                     (action)="tableAction($event)"
                     (pageChange)="paginatorChange($event)"
                     (sortChange)="sortChange($event)"
                     (selectionChange)="selectionChange($event)">
</gisgo-dynamic-table>
```
### Selectors
#### gisgo-dynamic-table

###### Properties
| Name                                                            | Mandatory | Description                         |
|-----------------------------------------------------------------|:---------:|-------------------------------------|
| @Input() config: `DynamicTableConfig`                           |    Yes    | Table & columns defintion / config. |
| @Input() data: `DynamicTableData`                               |    Yes    | Table Data & paginiation.           |
| @Output() action: `EventEmitter<DynamicTableAction>`            |    No     | Emits row click event.              |
| @Output() pageChange: `EventEmitter<PageEvent>`                 |    No     | Emits pagintation changes.          |
| @Output() sortChange: `EventEmitter<Sort>`                      |    No     | Emits column sort changes.          |
| @Output() selectionChange: `EventEmitter<SelectionChange<any>>` |    No     | Emits selection changes.            |

### Interfaces
#### DynamicTableAction

###### Properties
| Name            | Description                       |
|-----------------|-----------------------------------|
| event: `string` | Event type by default `row-click` |
| data: `any`     | Row data.                         |


## Import Module with custom cell view / fields

```typescript
import {DynamicTableModule} from '@gisgo/dynamic-table';

@NgModule({
  declarations: [],
  imports: [
    DynamicTableModule.forChild({
      'user': UserCellViewComponent,
      'priority': PriorityCellViewComponent,
      'actions': ActionsCellViewComponent
    })
  ]
})
export class AppModule { }
```
The custom cell view need to implement the `CellView` interface
```typescript
import {CellView} from '@gisgo/dynamic-table';

@Component({
  selector: 'user-cell-view',
  templateUrl: './user-cell-view.component.html',
})
export class UserCellViewComponent implements CellView {
  public data: any;
  public row: any;
  public field: DynamicTableField;
}
```