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.

Install

To install this package simply run

npm install @squareconcepts/sc-smart-table

In case of any errors try again as following:

npm install @squareconcepts/sc-smart-table --legacy-peer-deps

Usage

Module

// root app NgModule
import {ScSmartTableModule} from "@squareconcepts/sc-smart-table";

imports: [
  ScSmartTableModule
]

Component

import {Component, OnInit, ViewChild} from '@angular/core';
import {ScSmartTableComponent} 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('smartTableComponent') private smartTable: ScSmartTableComponent; //Optional
  public settings = {
    mode: 'external | internal',
    actionsColumnTitle: 'Actions',
    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

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

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

Options

<sc-smart-table 
  [title]="'title'" 
  [notItemsFoundString]="'No items found'" 
  [service]="service"
  [settings]="settings"
  (editClicked)="editClicked($event)"
  (createClicked)="creteClicked($event)"
  (deleteClicked)="editClicked($event)"
  #smartTableComponent
></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 | |--------------------|-----------|----------------------------------------------------------------------|-----------------------------------------------------------------| | mode | false | nb | Currently no function. | | actionsColumnTitle | false | Any String | Title displayed in the table head in the actions column. | | 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 {buttonContent: string} (html is allowed) | Whether or not to display the edit button and/if with content | | delete | true | true/false or {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 or {display: boolean, type: string}Default: true | Will display a input on to filter. | | sort | false | true or false | Can be sorted by this field. | | type | false | 'html' or 'custom' | what title 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 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} |