web-dev-qa-db-fra.com

table angulaire 4 avec tableau de données bootstrap 4

Je dois utiliser une table angular 4 et bootstrap 4 mais la table officielle bootstrap 4 ne semble pas très belle . J'ai trouvé ce projet git: https://www.npmjs.com/package/ angular-4-data-table-fix

mais ne trouve aucune documentation sur la façon de l’utiliser .. Quelqu'un connaît-il ce projet ou un projet similaire et peut-il aider?

Merci.

angulardatatablebootstrap-modalbootstrap-4
7
Shay

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

Fondamentalement, vous créez un nouveau composant pour la table, comme ceci (tiré 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 fichier modèle HTML: 

<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 la structure peuvent être différentes, vous devez donc ajuster ce code à la structure souhaitée.

N'oubliez pas de déclarer votre composant dans le app.module.ts et vous pourrez ensuite l'utiliser, disons dans app.component.html, comme dans l'exemple, où data-table-demo-1 est votre composant qui contient la table:

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

EDIT: Vous devez également importer le module de table de données, comme suit: 

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

Dans ce cas, app.module.ts pourrait ressembler à cela: 

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

Si vous recherchez un très bon tableau de données dynamiques, vous devriez envisager d'utiliser Angular Material. C'est une question de préférence, mais Material est plus esthétique et plus utile que Bootstrap et, en ce qui concerne les données, il est relativement facile à mettre en œuvre et à comprendre. Fonctionne plutôt bien hors de la boîte.

https://material.angular.io/components/table/overview

1
Joshua Michael Calafell

Pour une table de données, vous souhaitez probablement que les colonnes aient des fonctionnalités telles que le tri, le filtrage, la réorganisation des ordres de colonnes et la pagination. Si c'est le cas, le module ngx-datatable de swimlane est plutôt sympathique. Je l'utilise pour un catalogue de données d'entreprise et il gère de grands ensembles de données sans problèmes.

Lien vers la documentation ngx-datable

1
Bv Kay