Anular Smart Table

This repo hosts the developement page of the npm package ng-smart-table-plus.

This component is used to display data from remote back-end or from local array. Features are:

• search bar
• sorting on each column (can be enabled or disabled for each column)
• pagination
• custom template to display custom content in each cell
• click callback on each row

Usage

Install the package by running npm install ng-smart-table-plus. Then add an import for "SmartTableModule" in your app module. Now you are able to use SmartTableComponent inside your app!

Usage Example

<app-smart-table
        [getCellContent]="getCellContentTable1"
        [headers]="table2headers"
        [getData]="getTable2Data"
        [onClick]="onClickTable2"
        [maxInactiveSidePages]="1">
        <ng-template appTableColTemplate [columnName]="'Icon'" let-data='data'>
          <img class="img-fluid" [src]="data.thumbnailUrl" alt="Icon-URL"/>
        </ng-template>
</app-smart-table>

Component Properties

• headers: string[] are the headers that will be displayed
• sortOnColumn: boolean[] one flag for each column, enables or disables sorting on that column
• paginationEnabled: boolean whether pagination is enabled or not
• searchEnabled: boolean whether search is enabled or not
• localArray: T[] the array of data that should be represented. T is a generic type. Specify this only if you want to work with local data
• paginationEnabled: boolean whether pagination is enabled or not
• perPageOptions: number[] is an array that represent the options displayed in the "shows #N entries"
• getData(requestData: RequestData) : Observable<ResponseData> is a callback used when the table need to be configured with a backend. This callback has to parse the requestData object, compute the request data to be done to the backend, and return the observable of that request. The observable response has to be wrapped in a ResponseData object, in order to incude data such as total page numbers for the paginator.