Winkel 4 mit der bootstrap-4-Daten-Tabelle

Sehen Sie den code hier: https://github.com/ggmod/angular-2-data-table-demo/tree/master/app

Im Grunde erstellen Sie eine neue Komponente für die Tabelle, wie dieser (aus dem Beispiel oben):

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; }
}

Und die Vorlage HTML Datei:

<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>

Natürlich in deinem Fall die Datenquelle und die Struktur kann unterschiedlich sein, so müssen Sie diesen code, um die Struktur, die Sie wollen.

Denken Sie daran, zu erklären, Ihre Komponente app.module.ts und dann können Sie es verwenden, sagen wir im app.component.html, wie in dem Beispiel, wo data-table-demo-1 ist die Komponente, die die Tabelle:

<div style="padding: 25px">
  <data-table-demo-1></data-table-demo-1>
</div>

BEARBEITEN: haben Sie auch Daten importieren Tabellen-Modul, etwa so:

import { DataTableModule } from 'angular-2-data-table'; //or angular-4-data-table

Damit dann auch die app.- Modul.ts könnte beispielsweise so Aussehen:

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 { }

Für eine Daten-Tabelle, die Sie wahrscheinlich wollen, dass die Spalten für Funktionen wie Sortieren, filtern, umordnen Spalte Aufträge und Paginierung.
Wenn ja, ist die ngx-datatable-Modul durch die swimlane ist ziemlich süß. Ich benutze es für ein enterprise data catalog und es verarbeitet große Datenmengen ohne Probleme.

Link zur ngx-datable Dokumentation