angulaire 4 avec bootstrap 4 table de données

Vous pouvez voir le code ici: https://github.com/ggmod/angular-2-data-table-demo/tree/master/app

En gros, vous créez un nouveau composant pour le tableau, comme ceci (prises à partir de l'exemple ci-dessus):

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

Et le modèle HTML fichier:

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

Bien sûr, dans votre cas, la source de données et de la structure peut être différent, de sorte que vous besoin de modifier ce code à la structure que vous souhaitez.

N'oubliez pas de déclarer votre composant dans le app.module.ts et puis vous pouvez l'utiliser, permet de dire que dans app.component.html, comme dans l'exemple, où data-table-demo-1 est votre composant qui possède la table:

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

MODIFIER: Vous devez également importer les données de la table de module, comme suit:

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

Alors l'application.le module.ts pourrait ressembler à ça:

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

OriginalL'auteur Apostrofix

Pour une table de données, vous souhaitez probablement que les colonnes ont des caractéristiques telles que le tri, le filtrage, le réarrangement de la colonne des commandes et de la pagination.
Si oui, la ngx-datatable module par swimlane est assez doux. Je l'utilise pour une entreprise dans le catalogue de données et gère les grands ensembles de données sans problèmes.

Lien vers le ngx-datable de la documentation

OriginalL'auteur Bv Kay