Package Exports

ng-paginable
ng-paginable/package.json

Readme

Paginable

This is an Angular module that provides a table component with sorting and filtering capabilities. Añadir que es inmediata su integración con las respuestas de Laravel y otros frameworks y que está maquetada con Boostrap.

Versions

Angular	ng-pagination
>=14.0.0 <15.0.0	v1.x

Features
Getting started
Change detection
Custom styles
- Validation state
Contributing
Development
Inspiration

Features

Customizable pagination object
server or local pagination option
Filtering and sorting
Customization of headers, cells, filters, error message and no items message through templates
Columns with action buttons
Individual and multiple row selection
Integration of selection with reactive forms
Batch action buttons and dropdowns
Column resizing
Global and column-specific search engine
Adapted to Bootstrap 5,
Responsive table
Pagination customization options
Accessibility
Expandable columns

Getting started

Installation

To install this component, run the following command in your project directory:

npm install ng-paginable --save

Usage

To use this component, import it into your module:

import { NgPaginableModule } from 'ng-paginable';  
@NgModule({   
    imports: [NgPaginableModule] 
}) 
export class AppModule {}

código del componente

<paginable-table [headers]="headers" [pagination]="pagination">
</paginable-table>

Inputs

Name	Type	Default	Required	Description
headers	PaginableTableHeader	-	true	A boolean value that determines whether or not the table will display column headers.
pagination	PaginableTablePagination \| Observable<PaginableTablePagination>	-	true	A boolean value that determines whether or not the table will display pagination control.
ordination	PaginableTableOrdination	-	false	A object representing the initial ordination.
rows	Array<any>	null	true	An array of objects, each object representing a row in the table. En este caso la paginación se generará automáticamente
batchActions	Array<PaginableTableDropdown \| PaginableTableButton>	[]	false	An array of objects, each object representing a batch action that can be applied to multiple rows at once.
perPageOptions	Array<number>	[10, 20, 50, 100]	false	An array of numbers, each number representing an option for how many rows should be displayed per page.
responsive	string	''	false	A boolean value that determines whether or not the table will be responsive to different screen sizes.
id	string	null	false	A string value that is used as an identifier for the table component instance.
showSearchInput	boolean	true	false	A boolean value that determines whether or not a search input will be displayed at the top of the table.
selectable	boolean	false	false	Determines whether or not rows can be selected by clicking on them.
multiple	boolean	false	false	Determines whether or not multiple rows can be selected at once by clicking on them.
selectableProperty	string	null	false	The name of a property on each row object which indicates whether or not it is selectable.
paginationPosition	'bottom' \| 'top' \| 'both'	'bottom'	false	The position where pagination controls should be displayed (e.g., "top" or "bottom").
paginationInfo	boolean	true	false	Determines whether or not pagination information is displayed.

Outputs

Output	Type	Description
(itemClick)	T	Fired when item is added while `[multiple]="true"`. Outputs added item
(onPageClick)	number	Fired on select blur
(onSelected)	T \| Array	Triggered when a row or multiples rows are selected or unselected
(onParamsChange)	PaginationParamsChangeEvent	Triggered when ordination or page change
(filterChange)	FilterChangeEvent	Triggered when filters change

Methods

Name	Description
open	Opens the select dropdown panel
close	Closes the select dropdown panel
focus	Focuses the select element
blur	Blurs the select element

Templates

Each of the following templates can be used for different purposes:

No data message

The no data message template can be used to display a custom message when no results are found.

<paginable-table [rows]="[]" [headers]="headers">
    <ng-template paginableTableNotFound>
        <div class="d-flex flex-column p-4 text-center">
            <img src="https://media.giphy.com/media/3ohA2ZD9EkeK2AyfdK/giphy.gif" alt="Sorry!" class="m-auto"
                style="width: 256px;">
            <div>
                <i class="fa fa-info-circle" aria-hidden="true"></i> Nothing has been found...
            </div>
        </div>
    </ng-template>
</paginable-table>

The header cell template can be used to customize each individual cell within the header.

<paginable-table [headers]="headers" [rows]="items">
    <ng-template paginableTableHeader header="name" let-header="header">
        <div class="animate-character">Name</div>
    </ng-template>
</paginable-table>

Row

The row template can be used to customize the entire content of a row.

<paginable-table [headers]="headers" [rows]="items">
    <ng-template paginableTableRow let-item>
        <tr>
            <td>
                <img [src]="'assets/avatars/64_' + (item.id % 16 + 1) + '.png'" [alt]="item.name">
            </td>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>
                <a class="btn btn-link" (click)="item.unfold  = !item.unfold">
                    <i class="fa" [ngClass]="{'fa-chevron-down': !item.unfold, 'fa-chevron-up': item.unfold}"></i>
                </a>
            </td>
        </tr>
        <ng-container *ngIf="item.unfold">
            <tr>
                <td colspan="4">
                    Columna personalizada
                </td>
            </tr>
            <tr>
                <td>
                    Columna personalizada 1
                </td>
                <td>
                    Columna personalizada 2
                </td>
                <td>
                    Columna personalizada 3
                </td>
                <td>
                </td>
            </tr>
        </ng-container>
    </ng-template>
</paginable-table>

Cell

The cell template can be used to customize each individual cell within a row.

<paginable-table [headers]="headers" [rows]="items">
    <ng-template paginableTableCell header="avatar" let-item="item">
        <img
            [src]="'assets/avatars/64_' + ((item.id % 16) + 1) + '.png'"
            [alt]="item.name"
        />
    </ng-template>
    <ng-template paginableTableCell header="name" let-property="property">
        <span class="badge badge-pill badge-info"> customized column </span>
        {{ property }}
    </ng-template>
    <ng-template paginableTableCell header="email" let-item="item">
        {{ item.email }}
        <span class="badge badge-pill badge-warning"> also customized </span>
    </ng-template>
</paginable-table>

Loading

The loading template can be used to display a loading animation while results are being fetched.

<paginable-table [headers]="headers" [pagination]="pagination">
    <ng-template paginableTableLoading>
        <div class="text-center">
            <img src="../images/loading.svg">
        </div>
    </ng-template>
</paginable-table>

Error message

The error message template can be used to display a custom error message if there is an issue fetching results.

<paginable-table [headers]="headers" [pagination]="pagination">
    <ng-template paginableTableError>
        <div class="text-center">
            <img src="../images/error.svg">
        </div>
    </ng-template>
</paginable-table>

Expandable row

The expandable row template can be used to define the content that appears when a row is expanded.

<paginable-table [headers]="headers" [rows]="items">
    <ng-template paginableTableExpandingRow let-item="item">
        <tr class="bg-warning">
            <td [attr.colspan]="headers.length + 1">
                <div class="d-flex">
                    <div class="align-self-center pr-4">
                        <img [src]="'assets/avatars/64_' + (item.id % 16 + 1) + '.png'" [alt]="item.name">
                    </div>
                    <div class="flex-grow">
                        <h3>{{ item.email }}</h3>
                        <h4>{{ item.name }}</h4>
                    </div>
                </div>
            </td>
        </tr>
    </ng-template>
    <ng-template paginableTableExpandingRow let-item="item">
        <tr class="bg-warning">
            <td [attr.colspan]="headers.length + 1" class="bg-success">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo leo eget elementum
                    condimentum.
                </p>
            </td>
        </tr>
    </ng-template>
</paginable-table>

Filters

The filters template can be used to customize the appearance and behavior of filters for each column.

<paginable-table
    (filterChange)="onFilterChange($event)"
    (onParamsChange)="fetch($event)"
    [selectable]="true"
    [headers]="headers"
    [pagination]="pagination"
    [searchKeys]="searchKeys"
>
    <ng-template
        paginableTableFilter
        header="email"
        let-header="header"
        let-formControl="formControl"
    >
        ...
        <div
            class="form-check"
            *ngFor="let option of header.filter.options | async"
        >
            <input
                class="form-check-input"
                type="checkbox"
                [value]="option.value"
                [formControl]="formControl"
            />
            <label class="form-check-label">
                {{ option.text }}
            </label>
        </div>
    </ng-template>
    ...
</paginable-table>

Other

...

Configuration (Optional)

You can also set global configuration and localization messages by passing a config to forRoot method of NgPaginableModule, typically in your root component, and customize the values of its properties in order to provide default values.

  @NgModule({
    declarations: [UserListComponent],
    imports: [
        CommonModule,
        NgPaginableModule.forRoot({
            mapping: {
                currentPage: 'page',
                data: 'content',
                lastPage: 'last',
                total: 'total'
            }
        })
    ],
    exports: [UserListComponent],
    providers: []
})
export class UserListModule {}

Change Detection

Ng-paginable component implements OnPush change detection which means the dirty checking checks for immutable data types. That means if you do object mutations like:

this.rows.push({id: 1, name: 'New item'})

Component will not detect a change. Instead you need to do:

this.rows = [...this.rows, {id: 1, name: 'New item'}];

Inspiring

This component was created to make it easier for developers to display data from Laravel paginated objects in an Angular table without having to write custom code. Over time, options for configuration were added to make it easier to use with any framework or with custom pagination structures.s

Support

If you find this library helpful and want to support its development, consider buying me a coffee. Thank you for your support!

About the author

Carlos Morcillo is a web developer and open source contributor. You can find more of his work on this website.

JSPM

ng-paginable