Strongly typed Table component with sorting, filtering and paging for angular

Description

ngx-generic-table is a library for creating customizable strongly typed tables in Angular applications. It has filtering, sorting, and paging option both for server and client side

Installation

To install the library, run the following command:

npm install @elvis11235/ngx-generic-table

List of peerdependencies

    "@angular/animations": "^15.0.2",
    "@angular/cdk": "^15.2.5",
    "@angular/common": "^15.0.2",
    "@angular/compiler": "^15.0.2",
    "@angular/core": "^15.0.2",
    "@angular/forms": "^15.0.2",
    "@angular/material": "^15.2.5",
    "@angular/platform-browser": "^15.0.2",
    "@angular/platform-browser-dynamic": "^15.0.2",
    "@angular/router": "^15.0.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"

Import the necessary modules in your Angular module file (app.module.ts or any relevant module file). Add the following import statements:

import { NgModule } from '@angular/core';
import { NgxGenericTableModule } from '@elvis11235/ngx-generic-table';

@NgModule({
  imports: [
    // Other imports...
    NgxGenericTableModule
  ],
  // Other module configurations...
})
export class AppModule { }

API Interface

lib-ngx-generic-table

Interfaces, Classes and Enums

export enum PagingType {
  SERVER_SIDE,
  CLIENT_SIDE,
}

export class Sorting {
  column: string | undefined;
  sortDirection!: SortingType | undefined;

  constructor(
    column: string | undefined = undefined,
    sortDirection: SortingType | undefined = undefined
  ) {
    this.column = column;
    this.sortDirection = sortDirection;
  }
}

export enum SortingType {
  ASC = 'ASC',
  DESC = 'DESC',
}

export class Filter {
  field: string | undefined;
  value: string | string[] | number | Date | Date[] | undefined;
  filterOperation: FilterOperation| FilterOperation[] | undefined;
  constructor(
    field: string | undefined = undefined,
    value: string | number | Date | Date[] | undefined = undefined,
    filterOperation: FilterOperation | FilterOperation[] | undefined = undefined
  ) {
    this.field = field;
    this.value = value;
    this.filterOperation = filterOperation;
  }
}

export enum FilterOperation {
  EQUALS = '=',
  RANGE_LOWER = '_gte',
  RANGE_HIGHER = '_lte',
  EXCLUDE = '_ne',
  LIKE = '_like',
}

app-dg-column

Interfaces, Classes and Enums

export enum FilterDataType {
  TEXT = 'text',
  NUMBER = 'number',
  DATE = 'DateTime',
  SELECT = 'select'
}

export class SelectFilterOptions {
    id?: string | number;
    text?: string | number;
    constructor(id: string | number, text: string | number ) {
        this.id = id;
        this.text = text;
    }
}

export enum FixedPosition {
  LEFT,
  RIGHT,
}

Useage od @elvis11235/ngx-generic-table

Use the library component in your template

<app-layout>
  <lib-ngx-generic-table
    [data]="users"
    [totalElements]="records"
    [pageSize]="pageSize"
    [pagingType]="pagingType"
    (pageChange)="pageChanged($event)"
    (sorting)="serverHandledSorting($event)"
    (filtering)="serverHendledFiltering($event)"
  >
    <!-- Define your columns here -->
    <app-dg-column
      [field]="'name'"
      header="First Name"
      [width]="90"
      [minWidth]="80"
      [sortable]="true"
      [textAlign]="'left'"
      [dataType]="FilterDataType.TEXT"
      [filterOptOn]="true"
    ></app-dg-column>
    <!-- Add more columns... -->
  </lib-ngx-generic-table>
</app-layout>

Customize the app-dg-column components based on your requirements:

<app-dg-column [field]="'name'" header="First Name" [width]="90" [minWidth]="80" [sortable]="true"
  [textAlign]="'left'" [dataType]="FilterDataType.TEXT" [filterOptOn]="true"></app-dg-column>
<!-- Add more app-dg-column components as needed -->

If you want more custom table column, provide template to app-dg-column, for example like this:

<app-dg-column [header]="'Action'" [width]="120" [minWidth]="120" >
  <ng-template [appTableRow]="users" [template]="Template.BODY" let-rowData let-ri="rowIndex">
    <div class="info" *ngIf="switch[ri]">
      <p>Position {{rowData.position}}</p>
      <div>
        <img src="{{rtnImageSrc(rowData.name)}}" alt="employee-image" (click)="seePosition(rowData)">
      </div>
    </div>
    <div class="btn-continer" *ngIf="!switch[ri]">
      <button class="test" (click)="seePosition(rowData)">
        See Position
      </button>
    </div>
  </ng-template>
</app-dg-column>

Example

Implementation of @elvis11235/ngx-generic-table library. Showcase example on how this strongly typed generic table library can be used https://github.com/Elvis112358/testGenericTable

For more details check test-table-example.component.ts

Strongly Typed

If a developer tries to access or modify properties that are not defined in the provided data class, the compiler or linter will raise an error, indicating that the property does not exist.