angular 4 with bootstrap 4 data-table
You can see the code here: https://github.com/ggmod/angular-2-data-table-demo/tree/master/app
Basically, you create a new component for the table, like this (taken from the example above):
import { Component } from '@angular/core';import { DataTableResource } from 'angular-2-data-table';import persons from './data-table-demo1-data';@Component({ selector: 'data-table-demo-1', providers: [], templateUrl: 'app/demo1/data-table-demo1.html', styleUrls: ['app/demo1/data-table-demo1.css']})export class DataTableDemo1 { itemResource = new DataTableResource(persons); items = []; itemCount = 0; constructor() { this.itemResource.count().then(count => this.itemCount = count); } reloadItems(params) { this.itemResource.query(params).then(items => this.items = items); } // special properties: rowClick(rowEvent) { console.log('Clicked: ' + rowEvent.row.item.name); } rowDoubleClick(rowEvent) { alert('Double clicked: ' + rowEvent.row.item.name); } rowTooltip(item) { return item.jobTitle; }}And the template HTML file:
<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;"> <data-table id="persons-grid" headerTitle="Employees" [items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)" (rowClick)="rowClick($event)" (rowDoubleClick)="rowDoubleClick($event)" [rowTooltip]="rowTooltip" > <data-table-column [property]="'name'" [header]="'Name'" [sortable]="true" [resizable]="true"> </data-table-column> <data-table-column [property]="'date'" [header]="'Date'" [sortable]="true"> <template #dataTableCell let-item="item"> <span>{{item.date | date:'yyyy-MM-dd'}}</span> </template> </data-table-column> <data-table-column property="phoneNumber" header="Phone number" width="150px"> </data-table-column> <data-table-column [property]="'jobTitle'" [header]="'Job title'" [visible]="false"> </data-table-column> <data-table-column [property]="'active'" [header]="'Active'" [width]="100" [resizable]="true"> <template #dataTableHeader let-item="item"> <span style="color: rgb(232, 0, 0)">Active</span> </template> <template #dataTableCell let-item="item"> <span style="color: grey"> <span class="glyphicon glyphicon-ok" *ngIf="item.active"></span> <span class="glyphicon glyphicon-remove" *ngIf="!item.active"></span> </span> </template> </data-table-column> </data-table></div>Of course in your case the data source and structure might be different, so you need to adjust this code to the the structure you want.
Remember to declare your component in the app.module.ts and then you can use it, lets say in app.component.html, like in the example, where data-table-demo-1 is your component that has the table:
<div style="padding: 25px"> <data-table-demo-1></data-table-demo-1></div>EDIT: You also have to import the data table module, like so:
import { DataTableModule } from 'angular-2-data-table'; // or angular-4-data-table
So then the app.module.ts could look like that:
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { TableComponent } from './table/table.component';import { DataTableModule } from 'angular-4-data-table'; // notice this@NgModule({ declarations: [ AppComponent, TableComponent ], imports: [ BrowserModule, DataTableModule // notice this one ], providers: [], bootstrap: [AppComponent]})export class AppModule { }
If you're looking for a really good dynamic data table you should look into using Angular Material. It's a preference thing, but Material is better looking and more useful than Bootstrap and as far as data goes, it's fairly easy to implement and understand. Works quite well out of the box.
For a data table, you probably want the columns to have features like sorting, filtering, rearranging column orders and pagination. If so, the ngx-datatable module by swimlane is pretty sweet. I use it for an enterprise data catalog and it handles large datasets without issues.