Ngx Smart Generic Table

Generic Table to use in Angular Apps. Provides a generic structure to define table settings: data, width, translation, pagination, using the following libraries

| ngx-smart-generic-table | @angular/cli | Node | | :---------------------------------------------------------------------------------------: | :-----------------:|:-------: | | 1.x.x | 8.3.29 | 14.17.4 | | 2.x.x | 9.1.15 | 14.17.4 | | 3.x.x | 10.2.4 | 14.17.4 | | 4.x.x | 11.2.14 | 14.17.4 | | 5.x.x | 12.2.12 | 14.17.4 |

Installation

$ npm install ngx-smart-generic-table --save

Add the dependencies according to the library version. For v4.0.3 version use the following in your package.json:

    "@angular/localize": "~10.2.4",
    "@ng-bootstrap/ng-bootstrap": "^8.0.4",
    "@ng-select/ng-select": "^5.1.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "~6.0.0",
    "bootstrap": "^5.0.2",

Usage

Import

  imports: [
    .....  
    TranslateModule,
    NgxSmartGenericTableModule,
    NgbModule,
    NgSelectModule,
    NgbDropdownModule,
    NgbTooltipModule
    .....  
],
  providers: [LanguageService]

Interfaces, Classes and Enums:

export interface TableColumnSettings {
  align?: string;
  extra?: any;
  icon?: string;
  innerHTML?: string;
  function?: any;
  key: string;
  objectKey?: string;
  separator?: string;
  show: boolean;
  templateName: string;
  title: string;
  tooltip?: string;
  width: string;
}

export class TablePagination<T> {
  from = 0;
  list: Array<T> = [];
  pages = 0;
  to = 0;
  total = 0;
}

Example Usage

export class Product {
  id: number;
  name: string;
  code: string;
  price: number;
  status: boolean;
}

Create a enum with entity Keys

export enum ProductsTableColumnKey {
  Id = "id",
  Name = "name",
  Code = "code",
  Price = "price",
  Status = "status"
}

Choose a template available according to your class/interface attribute type

export enum TemplateNames {
  ActionsTemplate = 'actionsTemplate',
  CurrencyTemplate = 'currencyTemplate',
  DateTemplate = 'dateTemplate', //dd/MM/yyyy
  FullDateTemplate = 'fullDateTemplate', //dd/MM/yyyy HH:mm:ss
  NumberTemplate = 'numberTemplate',
  ObjectTemplate = 'objectTemplate', //If the object has nested objects you must indicate the Object key to access to object value
  StatusTemplate = 'statusTemplate', //If the object has a value to check if true or false
  TextTemplate = 'textTemplate',
  TimeTemplate = 'timeTemplate', //'HH:mm'
  FunctionTemplate = 'functionTemplate' //call the function defined from child to parent component
}

Choose a button type if your template chosen is 'ActionsTemplate'

export enum ButtonType {
  Href = 'href',
  Modal = 'modal',
  Swal = 'swal'
}

Product Table Settings Example:

export const PRODUCTTABLESETTINGS: TableColumnSettings[] = [
  {
    key: ProductsTableColumnKey.Code,
    title: 'MODEL.PRODUCT.CODE',
    templateName: TemplateNames.TextTemplate,
    width: 'w-15',
    show: true
  },
  {
    key: ProductsTableColumnKey.innerHTML,
    title: 'MODEL.PRODUCT.BARCODE',
    templateName: TemplateNames.FunctionTemplate,
    width: 'w-15',
    icon: 'font-size-15 fas fa-barcode text-success align-middle',
    separator: '-',
    function: 'setNombre',
    tooltip: 'MODEL.PRODUCT.BARCODE',
    align: AlignType.Center,
    show: true
  },
  {
    key: ProductsTableColumnKey.Name,
    title: 'MODEL.PRODUCT.NAME',
    templateName: TemplateNames.TextTemplate,
    width: 'w-25',
    show: true
  },
  {
    key: ProductsTableColumnKey.Price,
    title: 'MODEL.PRODUCT.PRICE',
    templateName: TemplateNames.CurrencyTemplate,
    width: 'w-15',
    show: true,
    align: AlignType.Right
  },
  {
    key: ProductsTableColumnKey.Status,
    title: 'SHARED.TABLE.STATUS',
    templateName: TemplateNames.StatusTemplate,
    width: 'w-15',
    show: true,
    align: AlignType.Center
  },
  {
    key: ProductsTableColumnKey.Id,
    title: 'SHARED.TABLE.ACTIONS',
    templateName: TemplateNames.ActionsTemplate,
    width: 'w-15',
    show: true,
    align: AlignType.Center,
    extra: [
      {
        type: ButtonType.Modal,
        tooltip: 'MODEL.PRODUCT.DETAIL',
        class: 'btn btn-sm btn-info btn-size-30',
        icon: 'far fa-window-restore'
      },
      {
        type: ButtonType.Swal,
        key: ProductsTableColumnKey.Status,
        enable: {
          tooltip: 'MODEL.PRODUCT.DISABLE',
          class: 'btn btn-sm btn-success btn-size-30',
          icon: 'fas fa-lock-open'
        },
        disable: {
          tooltip: 'MODEL.PRODUCT.ENABLE',
          class: 'btn btn-sm btn-danger btn-size-30',
          icon: 'fas fa-lock'
        },
      }
    ]
  }
];

The library and repository includes a languageService looking for the language set on localstorage, you can set your language.json inside assets folder and fill your dictionary, in this case shared and table are basics, you can add all the tables you need here.

    ├── src
    │   ├── assets
    │   │    ├── i18n
    │   │    │     ├── es.json
    │   │    │     ├── en.json

{
  "SHARED":{
    "ENABLED": "Enabled",
    "DISABLED": "Disabled"
  },
  "TABLE": {
    "SHOW": "Show",
    "ENTRIES": "entries",
    "SEARCH": "Search",
    "SHOWING": "Showing",
    "TO": "a",
    "OF": "of",
    "GO": "Go page",
    "HREF": "Go to",
    "ACTIONS": "Actions",
    "STATUS": "Status",
    "FILTERS": "Filters",
    "NORECORDS": "No records registered to show",
    "NOAPPLY": "No Apply"
  },
  "MODEL": {
    "PRODUCT": {
      "ID": "Id",
      "NAME": "Name",
      "CODE": "Supplier Code",
      "BARCODE": "Barcode",
      "PRICE": "Price",
      "DETAIL": "Product Detail",
      "ENABLE": "Enable Product",
      "DISABLE": "Disable Product"
    }
  }
}

Important Options

| Options | Type | Default | Description | | ------------------------ | ------------------------ | --------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | tableSettings | TableColumnSettings[] | undefined | Includes attribute's key, title, templateName, width and show options | | tablePagination | TablePagination<any> | undefined | Store the data and pagination info: from, to, pages, total | | pageSize | number | 10 | Size of elements shown in the table | | hasPagination | boolean | true | Conditional to show pagination or not | | hasPageSize | boolean | true | Conditional to show page size select | | hasPageSearch | boolean | true | Conditional to show page search input | | currency | string | CLP | Currency preferred if you chose CurrencyTemplate | | symbol | string | symbol-narrow | Currency symbol | | digits | string | .0-0 | Currency digits | | setPageEmitter | EventEmitter<number> | 1 | Returns the page selected from pagination to parent component | | setPageSizeEmitter | EventEmitter<number> | 10 | Returns the page size selected to parent component | | buttonClickedEmmiter | EventEmitter<any> | | Returns a json including the selected row and Button Type. Example: {data: {id: 1, name: 'Product'}, type: 'swal'}| | functionEmitter | EventEmitter<any> | | Returns a json including the selected row and Button Type. Example: {data: {index: 1, columnSetting: ColumnSetting}}|

Example

Refer to main app in this repository for working example.

<ngx-smart-generic-table [tableSettings]="settings"
                         [tablePagination]="tablePagination"
                         [pageSize]="pageSize"
                         (setPageEmitter)="setPage($event)"
                         (setPageSizeEmitter)="setPageSize($event)"
                         [hasPagination]="true"
                         (functionEmitter)="setFunction($event)"
                         (buttonClickEmitter)="onButtonClickedEmitter($event)"></ngx-smart-generic-table>

Library Contributions

• Fork repo.
• Update ./projects/smart-generic-table
• Build / test library.
• Update ./src/app with new functionality.
• Update README.md
• Pull request.

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!