ngx-smart-generic-table
TypeScript icon, indicating that this package has built-in type declarations

4.0.3 • Public • Published

Ngx Smart Generic Table

Linkedin Github Typescript Angular

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):


Pablo Contreras

💻

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

Package Sidebar

Install

npm i ngx-smart-generic-table

Weekly Downloads

25

Version

4.0.3

License

MIT

Unpacked Size

483 kB

Total Files

44

Last publish

Collaborators

  • pablocl