# Ng2-table
Module for wide-used standard tables in epom self-serves projects.

## **Getting Started**
Depends from **lodash.js**

### **Prerequisites**

| Name                 | Description                                     |
| -------------------- | ----------------------------------------------- |
| `lodash`             | we need `lodash.merge()` and `lodash.cloneDeep` |
| `epom-ng2-paginator` | table can be paginated                          |

### **Installing**

Simply install `epom-ng2-table` via npm

```sh
$ npm install -s epom-ng2-table
```

Import `TableModule` in your module, where you want to use ng2-table

```javascript
import {TableModule} from 'epom-ng2-table/table.module';

@NgModule({
  imports: [
    TableModule
  ],
  declarations: [],
  providers: []
})
export class DemoModuleName {}
```

After that, you should specify your data and config for table and pass them in your component template to table component
```html
<ng2-table [incoming]="yourDataArray" [tableConfig]="yourTableConfig" [actionList]="yourActionList"></ng2-table>

```

## **Input properties (@Input)**
| Name            | Type                      | Description                             |
| --------------- | ------------------------- | --------------------------------------- |
| **incoming**    | Subject<Array\<Object\>\> | Data stream (table rows).               |
| **tableConfig** | Array<config>             | Config for table columns                |
| **actionList**  | functionList              | List of callback functions for buttons. |
| **sortTimeout** | Number| Show spinner time in ms when sorting column (default = 0). |
| **tablePlaceholderConfig** | ConfigSpinnerPlaceholder | Config for spinner. |

Objects inside `incoming` Array could have any structure.


## **Table Config**
| Property name     | Option value  | Default value | Description       |
| ----------------- | ------------- | ------------- | ----------------- |
| **pagination**    | Object        | true          | Pagination config |
| **columnsConfig** | Array<Config> | 10            | Columns config    |

### **Pagination Config**
| Property name | Option value | Default value | Description                  |
| ------------- | ------------ | ------------- | ---------------------------- |
| **active**    | boolean      | true          | Enable or disable Pagination |
| **perPage**   | number       |               | Number of rows per page      |

### **Columns Config** - all this properties is compatible and if you need text with icon in this column \<td\> or \<th\> you should declare textContent and iconsContent for example.
| Property name      | Option value           | Description                       |
| ------------------ | ---------------------- | --------------------------------- |
| **textContent**    | Object with properties | Options of column text content    |
| **iconsContent**   | Object with properties | Options of column icons content   |
| **imagesContent**  | Object with properties | Options of column images content  |
| **videosContent**  | Object with properties | Options of column videos content  |
| **wrapperLink**    | Object with properties | Options of column link content    |
| **buttonsContent** | Object with properties | Options of column buttons content |
| **customClass**    | Object with properties | Options of column custom content  |
| **sort**           | Object with properties | Options of column sort content    |
| **filter**         | Object with properties | Options of column filter content  |

#### Text Content Config
| Property name        | Option value | Default value | Description                                  |
| -------------------- | ------------ | ------------- | -------------------------------------------- |
| **header**           | boolean      | false         | Is \<th\> of column has text inside          |
| **isHeaderLink**     | boolean      | false         | Is text inside \<th\> of column has a link   |
| **headerLink**       | string       |               | \<th\> text link                             |
| **title**            | string       |               | \<th\> text                                  |
| **body**             | boolean      | false         | Is \<td\> of column has texts inside         |
| **isBodyLink**       | boolean      | false         | Is texts inside \<td\> of column has a links |
| **isBodyAction**     | boolean      | false         | Is texts inside \<td\> of column has an action |
| **bodyLinkProperty** | string       |               | Name of property with \<td\> texts links     |
| **contentProperty**  | string       |               | Name of property with \<td\> texts           |
| **alias**            | string       |               | Name of property for **isBodyAction**. This property must consist button action|

#### Icons Content Config
| Property name        | Option value    | Default value | Description                                 |
| -------------------- | --------------- | ------------- | ------------------------------------------- |
| **header**           | boolean         | false         | Is \<th\> of column has icon inside         |
| **isHeaderLink**     | boolean         | false         | Is icon inside \<th\> of column has a link  |
| **headerLink**       | string          |               | \<th\> icon link                            |
| **title**            | string          |               | \<th\> icon                                 |
| **body**             | boolean         | false         | Is \<td\> of column has icons inside        |
| **isBodyLink**       | boolean         | false         | Is icons inside \<td\> of column has a link |
| **bodyLinkProperty** | string          |               | Name of property with \<td\> icons links    |
| **bodyProperties**   | Array\<string\> |               | Array of property names with \<td\> icons   |

#### Images Content Config
| Property name        | Option value    | Default value | Description                                  |
| -------------------- | --------------- | ------------- | -------------------------------------------- |
| **body**             | boolean         | false         | Is \<td\> of column has images inside        |
| **isBodyLink**       | boolean         | false         | Is images inside \<td\> of column has a link |
| **bodyLinkProperty** | string          |               | Name of property with \<td\> images links    |
| **bodyProperties**   | Array\<string\> |               | Array of property names with \<td\> images   |

#### Images Content Config
| Property name        | Option value    | Default value | Description                                  |
| -------------------- | --------------- | ------------- | -------------------------------------------- |
| **body**             | boolean         | false         | Is \<td\> of column has videos inside        |
| **bodyProperties**   | Array\<string\> |               | Array of property names with \<td\> videos   |

#### Wrapper Link Config - this link wrap all cell content, not only one element
| Property name        | Option value | Default value | Description                                  |
| -------------------- | ------------ | ------------- | -------------------------------------------- |
| **header**           | boolean      | false         | Is \<th\> of column has wrapper link         |
| **headerLink**       | string       |               | \<th\> link                                  |
| **body**             | boolean      | false         | Is \<td\> of column has links wrapper inside |
| **bodyLinkProperty** | string       |               | Name of property with \<td\> links           |

#### Buttons Content Config
| Property name            | Option value  | Default value | Description                                          |
| ------------------------ | ------------- | ------------- | ---------------------------------------------------- |
| **body**                 | boolean       | false         | Is \<td\> of column has buttons inside               |
| **buttonList**           | Array<Object> | []            | Array of buttons with icons config for \<td\>        |
| **textButtonsList**      | Array<Object> | []            | Array of buttons with text config for \<td\>         |
| **togglTextButtonsList** | Array<Object> | []            | Array of toggled buttons with text config for \<td\> |

#### Single Button Config (buttonList)
| Property name    | Option value | Description                                                                    |
| ---------------- | ------------ | ------------------------------------------------------------------------------ |
| **showProperty** | string       | Name of property for button visibility                                         |
| **icon**         | string       | Icon classes                                                                   |
| **title**        | string       | Tooltip text                                                                   |
| **alias**        | string       | Name of property from **actionList**. This property must consist button action |

#### Single Text Button Config (textButtonsList)
| Property name    | Option value | Description                                                                    |
| ---------------- | ------------ | ------------------------------------------------------------------------------ |
| **showProperty** | string       | Name of property for button visibility                                         |
| **text**         | string       | Button text                                                                    |
| **alias**        | string       | Name of property from **actionList**. This property must consist button action |

#### Single Button Config (buttonList)
| Property name       | Option value | Description                                                                    |
| ------------------- | ------------ | ------------------------------------------------------------------------------ |
| **showProperty**    | string       | Name of property for button visibility                                         |
| **textOn**          | string       | Button On text                                                                 |
| **textOff**         | string       | Button Off text                                                                |
| **alias**           | string       | Name of property from **actionList**. This property must consist button action |
| **toggledProperty** | string       | Is button On or Off                                                            |

#### Customn Class Config
| Property name         | Option value | Default value | Description                                         |
| --------------------- | ------------ | ------------- | --------------------------------------------------- |
| **bodyClassProperty** | string       | ''            | Property with class for all \<td\> values of column |

#### Sort Config
| Property name | Option value | Default value | Description        |
| ------------- | ------------ | ------------- | ------------------ |
| **active**    | boolean      | false         | Is column sortable |
| **sortKey**   | string       |               | Property for sort  |

#### Filter Config
| Property name  | Option value  | Default value | Description                                                                    |
| -------------- | ------------- | ------------- | ------------------------------------------------------------------------------ |
| **active**     | boolean       | false         | Is column filterable                                                           |
| **alias**      | string        |               | Name of property from **actionList**. This property must consist filter action |
| **filterList** | Array<Object> |               | Have all avaliable properties for filtering                                    |

## Examples

```javascript
this.tableConfig = {
  pagination: {
    active: true,                     // enable pagination
    perPage: 10                       // set 10 rows per page
  },
  columnsConfig: [
    {
      textContent: {
        header: true,
        body: true,
        title: 'Name',
        contentProperty: 'name',
        isBodyLink: true,
        bodyLinkProperty: 'link'
      },
      sort: {
        active: true,
        sortKey: 'name'
      }
    },
    {
      textContent: {
        header: true,
        title: 'Preview',
      },
      videosContent: {
        header: true,
        isHeaderLink: false,
        body: true,
        title: 'Preview',
        bodyProperties: ['videoUrl'],
        isBodyLink: false
      },
      buttonsContent: {},
      sort: {
        active: false
      },
      commonOptions: {
        class: 'td-images'
      }
    },
    {
      iconsContent: {
        header: true,
        body: true,
        headerClass: 'status-icon',
        bodyProperties: ['statusIconClass']
      },
      textContent: {
        header: true,
        body: true,
        title: 'Status',
        contentProperty: 'status'
      },
      filter: {
        active: true,
        alias: 'filter-action',
        filterList: CAMPAIGNS_STATUSES
      },
      customClass: {
        bodyClassProperty: 'statusClass'
      }
    },
    {
      textContent: {
        header: true,
        title: 'Actions'
      },
      buttonsContent: {
        body: true,
        buttonList: [
          {
            showProperty: 'copy',
            icon: 'icon-windows',
            title: 'Copy',
            alias: 'copy-action'
          },
          {
            showProperty: 'write',
            icon: 'icon-write',
            title: 'Edit',
            alias: 'edit-action'
          },
          {
            showProperty: 'delete',
            icon: 'icon-trash',
            title: 'Delete',
            alias: 'delete-action'
          }
        ],
        togglTextButtonList: [
          {
            showProperty: 'pause',
            textOn: 'Pause',
            textOff: 'Start',
            alias: 'pause-action',
            toggledProperty: 'pauseToggl' 
          }
        ]
      },
      commonOptions: {
          class: 'actions'
      }
    }
  ]
};

this.actionList = {
    'edit-action': (row) => { // row = data Object
      // some actions
    },
    'delete-action': (row) => { // row = data Object
      // some actions
    },
  };

this.tablePlaceholderConfigConst= {
    header: [150, 150, 150, 70],
    body: [150, 150, 150, 70],
    align: ['', '', '','right']
};

this.dataStream = new BehaviorSubject([]);
// getting data array in some way
this.dataArray = somehowGetData();
this.dataStream.next(this.dataArray);
```

In HTML:
```html
<ng2-table [incoming]="dataStream" [tableConfig]="tableConfig" [actionList]="actionList" [sortTimeout]=1000 [tablePlaceholderConfig] = "tablePlaceholderConfigConst"></ng2-table>

```
