eckig 4 ​​mit Bootstrap 4 Datentabelle

Question

Ich brauche eine Tabelle mit eckigen 4 und Bootstrap 4, aber die Bootstrap 4 offiziellen Tabelle sieht nicht so gut aus. Ich fand dieses Git-Projekt: https://www.npmjs.com/package/angular-4-data-table-fix

aber kann keine Dokumentation finden, wie man es benutzt. kennt jemand dieses Projekt oder ein ähnliches und kann helfen?

Danke.

Answer 1

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

Grundsätzlich erstellen Sie eine neue Komponente für die Tabelle, wie dies (aus dem obigen Beispiel genommen):

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 Ihrem Fall die Datenquelle und die Struktur könnte anders sein, so dass Sie diesen Code auf die Struktur anpassen müssen Sie wollen .

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

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

EDIT: Sie haben auch die Datentabelle Modul zu importieren, etwa so:

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

so dann die app.module.ts co So sieht das aus:

Answer 2

Wenn Sie nach einer wirklich guten dynamischen Datentabelle suchen, sollten Sie sich mit Angular Material beschäftigen. Es ist eine Vorliebe Sache, aber Material ist besser aussehend und nützlicher als Bootstrap und soweit Daten gehen, ist es ziemlich einfach zu implementieren und zu verstehen. Funktioniert ziemlich gut aus der Box.

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

Answer 3

Für eine Datentabelle, möchten Sie wahrscheinlich die Spalten Funktionen wie Sortieren, Filtern, die Neuordnung Säulenordnungen und Paginierung haben. Wenn ja, ist das ngx-Datatable-Modul von Swimlane ziemlich süß. Ich verwende es für einen Unternehmensdatenkatalog und es verarbeitet große Datenmengen ohne Probleme.

Link to the ngx-datable documentation