npm package: @squareconcepts/smart-table
Description: This package is still under construction and isn't working properly.
Latest version: 1.0.0

# UNDER CONSTRUCTION

This package is still under construction and isn't working properly.

# SQUAREConcepts Smart table

Provides a smart datatable that displays data received via http requests.

## Compatible
This version of smart table is compatible with
``todo ``

## Install
To install this package simply run 
```bash
npm install @squareconcepts/smart-table
```

In case of any dependency errors try installing without dependencies. In this case you have to install `@sreyaj/ng-shimmer` manually.
```bash
npm install @squareconcepts/smart-table @sreyaj/ng-shimmer --legacy-peer-deps
```

## Usage
### Module

```typescript
// root app NgModule
import {SmartTableModule} from "@squareconcepts/smart-table";

imports: [
  SmartTableModule,
]
```

Or in case you would like to change any of the options

```typescript
// root app NgModule
import {SmartTableModule} from "@squareconcepts/smart-table";

imports: [
  SmartTableModule.forRoot(
    {
      createNewButtonText: 'Create',
      actionsColumnTitle: 'Actions',
      searchButtonText: 'Search',
      perPageText: 'Per page',
      pageText: 'Page',
      totalText: 'Total',
      previousText: 'Previous',
      nextText: 'Next'
    })
]
```


### Component

```typescript
import {Component, OnInit, ViewChild} from '@angular/core';
import {SmartTableComponent} from '@squareconcepts/sc-smart-table';

import {ApiService} from './services/api.service';

@Component({
  selector: 'app-table-page',
  templateUrl: './table-page.component.html',
  styleUrls: ['./table-page.component.scss']
})
export class TablePageComponent implements OnInit {
  @ViewChild('smartTable') private smartTable: SmartTableComponent; //Optional
  public settings = {
    actionsColumnTitle: 'Other title', //Can be set to default in module
    defaultSorting: {
        column: 'id',
        direction: 'ASC'
    },
    searchButtonText: 'Search',
    createNewButtonText: 'Create new',
    customCardButtons:[{
        buttonContent: '<i class="fa fa-download"></i> Export data',
        loadingState: boolean,
        method: () => {
            //do something
             },
    },],
    columns: {
      title: {
        title: 'Title',
        filter: true
      },
      description: {
        title: 'Description',
        filter: true
      },
      create_at: {
        title: "Create date",
        type: 'date|dd-MM-yyy', // First is type name second is format as Angular Date
        filter: {
          display: true,
          type: 'date'
        },
      },
      time: {
        title: 'Van',
        type: 'date|HH:mm',
        filter: {
          display: true,
          type: 'time'
        },
        valuePrepareFunction: (cell, row) => {
          return row.created_at;
        },
      },
      some_html: {
        title: 'Html in field',
        type: 'html',
        sort: false,
        filter: true,
        valuePrepareFunction: (cell, row) => {
          return '<p> with some html</p>'
        },
      }
    },
    create: true,
    edit: true,
    delete: {buttonContent: '<i class="fa fa-trash"></i>'},
    actions: [ //Custom buttons that will be added to the actions column
      {
        title: '<p>this can contain html</p>',
        method: (row) => {
          //do something on click. Function will provide the entire row.
        },
      }
    ]
  };

  constructor(
      public apiService: ApiService
  ) {
  }
  
  editClicked(rowId: number){
      //do something when edit is clicked
  }

  deleteClicked(rowId: number){
    //do something when delete is clicked
  }

  createClicked(){
    //do something when create is clicked
  }

}
```

### Service

Make sure the service implements `ScSmartTableInterface`

```typescript
import {ScSmartTableInterface} from "@squareconcepts/sc-smart-table.interface";

@Injectable({
  providedIn: 'root'
})
export class ServiceName implements ScSmartTableInterface {
    //impement methods
}
```

## Options

```html
<sc-smart-table 
  [title]="'title'" 
  [noItemsFoundString]="'No items found'" 
  [service]="service"
  [settings]="settings"
  (editClicked)="editClicked($event)"
  (createClicked)="creteClicked($event)"
  (deleteClicked)="editClicked($event)"
  #smartTable
></sc-smart-table>
```

### Explanation of options

| Option                 | Type                    | Required | Description                                                                                         |
|------------------------|-------------------------|----------|-----------------------------------------------------------------------------------------------------|
| title                  | `string`                | `true`   | The title of the page                                                                               |
| notItemsFoundString    | `string`                | `false`  | String shown in case of no items                                                                    |
| settings               | `object`                | `true`   | Settings object that will be used to build the table.                                               |
| service                | `ScSmartTableInterface` | `true`   | A service to get the data from your api. The service has to implement the `ScSmartTableInterface`   |
| #smartTableComponent   | Identifier              | `false`  | Can be edit to perform a method on the smart table                                                  |


### Explanation of methods
| Function        | Parameter        | Description                                          |
|-----------------|------------------|------------------------------------------------------|
| `CreateClicked` | `boolean`        | Wil be emitted when the new item button is clicked   |
| `editClicked`   | rowId: `number`  | Wil be emitted when the edit button is clicked       |
| `deleteClicked` | rowId: `number`  | Wil be emitted when the delete button is clicked     |


### Settings options

| Field              | Required | Options                                                                                     | Description                                                                                                                        |
|--------------------|----------|---------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------|
| actionsColumnTitle | `false`  | Any String                                                                                  | Title displayed in the table head in the actions column. Default will be `Actions` This can be change in the Module.forRoot method |
| createButtonText   | `false`  | Any String                                                                                  | Text that is showed in the create button. Default: `Create new`                                                                    |
| searchButtonText   | `false`  | Any String                                                                                  | Text that is showed in the search button. Default: `Search`                                                                        |
| actionsColumnTitle | `false`  | Any String                                                                                  | Title displayed in the table head in the actions column.                                                                           |
| customCardButtons  | `false`  | `[] of customCardActions {buttonContent: string, loadingState: boolean,  method: () => {}}` | Buttons that will be displayed at the top right corner of the card                                                                 |
| defaultSorting     | `false`  | `{column: 'id', direction: 'ASC'}`                                                          | Adds default sorting to the request on the initial data.                                                                           |
| columns            | `true`   | Fields is in `See Colums options`                                                           | Fields to fill the table `See Colums options`                                                                                      |
| create             | `true`   | `true` or `false`                                                                           | Whether or not to display the add new button                                                                                       |
| edit               | `true`   | `true/false`   or <br/> `{buttonContent: string}` (html is allowed)                         | Whether or not to display the edit button and/if with content                                                                      |
| delete             | `true`   | `true/false`   or <br/> `{buttonContent: string}` (html is allowed)                         | Whether or not to display the delete button and/if with content                                                                    |
| actions            | `false`  | `[] of actions {title: string, method: Function}`                                           | Custom actions that need to be added to the actions column.                                                                        |
| rowClassFunction   | `false`  | `(row) => {//function}`                                                                     | class will be added to the row.                                                                                                    |

### Column Options

| Field                | Required | Options                                                                                 | Description                                        |
|----------------------|----------|-----------------------------------------------------------------------------------------|----------------------------------------------------|
| title                | `true`   | `true` or `false`                                                                       | Title will be displayed in the table had.          |
| filter               | `false`  | `true` or `false`  <br/>or <br/> `{display: boolean, type: string}`<br/>Default: `true` | Will display a input on to filter.                 |
| sort                 | `false`  | `true` or `false`                                                                       | Can be sorted by this field.                       |
| type                 | `false`  | ```date [pipe] dd-MM-yyyy``` or `rating` or `html`                                      | what type of data will be displayed in the column. |
| valuePrepareFunction | `false`  | `(cell, row) => {return value you like to display}`                                     | The data needs to be displayed differently.        |


### Filter Type Options
| Option | Description         | Example                                                                                                                                            |
|--------|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
| list   | Shows a dropdown    | ```filter: { 'type': 'list', 'config': { 'placeholder': '', 'selectText': 'Select an item', 'list': [{title: 'first item', value: 'item 1'}]}},``` |
| date   | Shows a date field  | `filter: {type: date: display: true}`                                                                                                              |
| time   | Shows time field    | `filter: {type: time: display: true}`                                                                                                              |