1.1.0 • Published 3 months ago
@laijuthomas/angular-table v1.1.0
AngularTable
A bootstrap based table component for Angular 2+
Getting Started
Installation
Install via npm package manager
npm install @laijuthomas/angular-table --saveUsage
Import angular-table module
import { HttpClientModule} from '@angular/common/http';
import { AngularTableModule } from '@laijuthomas/angular-table';
@NgModule({
imports: [ HttpClientModule, AngularTableModule ]
})Then in HTML
<angular-table [totalResults]="listData.count" [loading]="loading" [params]="params" [columns]="columns"
[page]="page" [config]="config" [data]="listData['results']" (paramsChanged)="onParamsChange($event)">
<tbody table body>
<tr *ngFor="let request of listData['results']; let i=index">
</tr>
<tr *ngIf="listData.count === 0">
<td [attr.colspan]="columns.length">No data available in table</td>
</tr>
</tbody>
</angular-table>Inputs
| Input | Type | Default | Required | Description |
|---|---|---|---|---|
| totalResults | number | | ||
| loading | boolean | false | no | Set to show loader in the table |
| params | HttpParams | - | no | Set existing data params |
| columns | array | - | yes | Set table header column data |
| page | number | - | no | Set current page number |
| data | array | - | no | Set data to show in the table |
| config | AngularTableConfig | default config | no | config for the table |
Outputs
| Output | Description |
|---|---|
| (paramsChanged) | Fired when pagination, search, sort etc. changes |
Other
| Name | Type | Description |
|---|---|---|
| AngularTableConfig | configuration | Configuration for the AngularTable component. |
Configuration
| Input | Type | Default | Required | Description |
|---|---|---|---|---|
| paging | boolean | true | no | Set pagination enabled or not |
| search | boolean | true | no | Set search enabled or not |
| sorting | boolean | yes | no | Set table sort enabled or not |
| responsive | boolean | false | no | Set bootstrap table responsive class |
| limit | boolean | false | no | Set whether to show the option to change the row count |
| additionalFilters | boolean | false | no | Set additional filter block enabled or not |
| defaultRowCount | number | 25 | no | Set number of rows to show in the table |
| className | string | | ||
| theadClassName | string | | ||
| searchClassName | string | |
What's included
Within the download you'll find the following directories and files. You'll see something like this:
angular-table/
└── projects/
├── angular-table/
└── angular-table-app/angular-table/ - library
angular-table-app/ - demo application
Creators
Laiju Thomas