NgxGenericList

ngx-generic-list is a library that works with Angular 16 and Bootstrap 5 to generate paginated lists of items with support for sorting and filters.

Installation

To install the library, run:

yarn add @jvlsoft/ngx-generic-list @ng-bootstrap/ng-bootstrap bootstrap bootstrap-icons @jvlsoft/ngx-dynamic-form

Then add the following styles:

@import "@jvlsoft/ngx-generic-list/styles/styles.scss";
@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons.css";

Usage

Here's a basic example of how to use the library in your Angular project:

import { GenericListComponent, TableContainerComponent, PaginatorTable, SortableHeader } from '@jvlsoft/ngx-generic-list';

@NgModule({
  imports: [
    GenericListComponent,
    TableContainerComponent,
    SortableHeader,
    PaginatorTable,
    // other imports
  ],
})
export class AppModule { }

In your component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-generic-lis',
  template: `
    <table-container 
        [isLoadingResults]="isLoadingResults" 
        [resultLenght]="dataSource.collectionSize" 
        [title]="title"
        [itemForm]="itemForm">
        <ng-container filters>
            <ng-container *ngFor="let field of config" [config]="field" [group]="itemForm" dynamicField></ng-container>
        </ng-container>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col" sortable="name">Name</th>
                    <!-- ...other headers -->
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of dataSource.data">
                    <td scope="col">{{ user.id }}</td>
                    <td scope="col">{{ user.name }}</td>
                    <!-- ...other columns --> 
                </tr>
            </tbody>
        </table>
        <app-paginator-table [collectionSize]="dataSource.collectionSize"></app-paginator-table>
    </table-container>
    `    
})
export class AppComponent extends GenericListComponent<User> {
  config: IFieldConfig[] = [
    // Dynamic fields for filtering
  ]
  constructor (private service: userService) {
    super();
    this.title = 'Users';
    this.singularTitle = 'this user';
    this.service = this.userService;
    this.defaultSort = 'name:asc';
    this.attributeField = 'id, name';
    this.fieldsFormSearch = { search: [null] };
  }
}

API

GenericListComponent

| Attribute | Type | Description | |-----------------------|------------------------------|----------------------------------------------| | headers |QueryList<SortableHeader<T>>| Collection of sortable headers for the list. | | paginator | PaginatorTable | Reference to the paginator component for pagination controls. | | destroy$ | Subject<void> | Subject used for managing the lifecycle and cleanup of subscriptions. | | sortChange | EventEmitter | Emits events when sorting changes occur. | | searchEmitter | EventEmitter | Triggers an event to load the data source when emitting data. | | title | string | Title for the card of the list view. | | singularTitle | string | Model name string for display in delete confirmation modal. | | deleteMessage | string | Message displayed in the delete confirmation modal. | | pageSizeOptions | number[] | Array of pagination options available for selection. | | attributeField | string | Attributes of the model to include in the response. | | includeField | string | Relations of the model to include in the query (e.g., 'Area, Municipality, Phones'). | | dataSource | IDataSource<T> | Data source supporting client-side data array with filtering, sorting, and pagination. | | itemForm | FormGroup | Form group containing fields for filters (e.g., inputs, NgSelects). | | fieldsFormSearch | any | Fields for search functionality (e.g., inputs, NgSelects). | | defaultSort | string? | Default sorting option to add to the query. | | defaultFilter | any | Default filters to apply to the query. | | editUrl | string | Path to the edit form component. | | isLoadingResults | boolean | Indicates whether data is currently being loaded. | | method | Observable<IPaginationResult<T>> | Observable method used to fetch paginated results. | | service | IFieldService<T> | Service interface used for data operations related to the model type T. |

IDataSource

| Attribute | Type | Description | |-------------------|---------|-----------------------------------------------------| | data | T[] | Array that contains the elements to show. | | page | number| Actual page in the pagination. | | pageSize | number| Number of elements in a page. | | collectionSize | number| Number of elements in the api response. |

IPaginationResult

| Attribute | Type | Description | |-----------|---------|-----------------------------------------------------------------------------| | count | number| Number of element in the api response. | | skip | number| Number of items to skip. | | limit | number| Maximum number of items that can be displayed per page. | | pages | number| Total number of pages available based on the total number of items and the | limit per page. | | rows | T[] | Array that contains the elements to show. |

ISortEvent

| Attribute | Type | Description | |-------------|--------------------|-------------------------------------------------------| | column | keyof T | Attribute of the object by which it will be sorted. | | direction | 'asc' or 'desc' | Ditection to sort. |