Ng11-smart-generic-table NPM

Smart Generic Table

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

smart-generic-table	Angular	ngx-bootstrap	boostrap	@angular/localize	ngx-translate/core	@ngx-translate/http-loader
1.x.x	11.x.x	7.1.0	5.0.2	11.x.x	13.0.0	6.0.0

Angular 12 Version

Installation

Install Dependencies

$ ng add ngx-bootstrap

If you do not wish to use Bootstrap's global CSS, we now package the project with only the relevant bootstrap styling needed for the dropdown. As such, you can remove the bootstrap styling from angular.json.

Further, Angular CLI should tree-shake the rest of Ngx-Boostrap away if you don't utilize other dependencies from the bootstrap package. This should keep this dependency a lean feature-add

Install This Library

$ npm install smart-generic-table --save

Usage

Import

Add SmartGenericTableModule and TranslateModule in your application module:

imports: [SmartGenericTableModule, TranslateModule];

Model:

export class TableColumnSettings {
  key: string;
  title: string;
  templateName: string;
  width: string;
  show: boolean;
  objectKey?: string;
  extra?: any[];
}

export class TablePagination<T> {
  list: Array<T> = [];
  from = 0;
  to = 0;
  total = 0;
  pages = 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 {
  NumberTemplate = 'numberTemplate',
  TextTemplate = 'textTemplate',
  DateTemplate = 'dateTemplate',
  FullDateTemplate = 'fullDateTemplate',
  TimeTemplate = 'timeTemplate',
  StatusTemplate = 'statusTemplate',
  CurrencyTemplate = 'currencyTemplate',
  ActionsTemplate = 'actionsTemplate'
}

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

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

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.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
  },
  {
    key: ProductsTableColumnKey.Status,
    title: 'SHARED.TABLE.STATUS',
    templateName: TemplateNames.StatusTemplate,
    width: 'w-15',
    show: true
  },
  {
    key: ProductsTableColumnKey.Id,
    title: 'SHARED.TABLE.ACTIONS',
    templateName: TemplateNames.ActionsTemplate,
    width: 'w-15',
    show: true,
    extra: [
      {
        type: ButtonType.Modal,
        tooltip: 'MODEL.PRODUCT.DETAIL',
        class: 'btn btn-sm btn-info',
        icon: 'far fa-window-restore'
      },
      {
        type: ButtonType.Swal,
        key: ProductsTableColumnKey.Status,
        enable: {
          tooltip: 'MODEL.PRODUCT.DISABLE',
          class: 'btn btn-sm btn-success',
          icon: 'fas fa-lock-open'
        },
        disable: {
          tooltip: 'MODEL.PRODUCT.ENABLE',
          class: 'btn btn-sm btn-danger',
          icon: 'fas fa-lock'
        }
      }
    ]
  }
]

The library 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"
  },
  "MODEL": {
    "PRODUCT": {
      "ID": "Id",
      "NAME": "Name",
      "CODE": "Supplier Code",
      "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
onButtonClickedEmmiter	`EventEmitter<any>`		Returns a json including the selected row and Button Type. Example: {data: {id: 1, name: 'Product'}, type: 'swal'}

Example

Refer to main app in this repository for working example.

<sg-table [tableSettings]="settings"
          [titles]="titles"
          [tablePagination]="tablePagination"
          (setPageEmitter)="setPage($event)"
          (setPageSizeEmitter)="setPageSize($event)"
          [hasPagination]="true"
          (onButtonClickedEmmiter)="onButtonClickedEmitter($event)"></sg-table>