AngularTable

A bootstrap based table component for Angular 2+

Getting Started

Installation

Install via [npm][npm] package manager

npm install @laijuthomas/angular-table --save

Usage

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 | `` | yes | Set the total count of the data array | | 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 | | no | Set additional css class to the table component | | theadClassName | `string` | | no | Set css class to the table head | | searchClassName | string | `` | no | Set css class to the table search block |

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

• https://github.com/laijuthomas