web-dev-qa-db-ja.com

angular 4 with bootstrap 4 data-table

angular 4 and bootstrap 4のテーブルを使用する必要がありますが、bootstrap 4公式テーブルは見栄えがよくありません。このgitプロジェクトを見つけました： https://www.npmjs.com/package/angular-4-data-table-fix

使用方法に関するドキュメントは見つかりません。このプロジェクトまたは類似のプロジェクトを知っている人はいますか？

ありがとう。

angulardatatablebootstrap-modalbootstrap-4
8
Shay

ここでコードを見ることができます： https://github.com/ggmod/angular-2-data-table-demo/tree/master/app

基本的に、次のようにテーブルの新しいコンポーネントを作成します（上記の例から取得）。

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

テンプレート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>

もちろん、データソースと構造が異なる場合があるため、このコードを目的の構造に調整する必要があります。

コンポーネントをapp.module.tsで宣言することを忘れないでください。次に、例のようにapp.component.htmlで言うことができます。ここで、data-table-demo-1はテーブルを持つコンポーネントです。

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

[〜＃〜] edit [〜＃〜]：データテーブルモジュールもインポートする必要があります。

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

したがって、app.module.tsは次のようになります。

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

非常に優れた動的データテーブルを探している場合は、Angular Materialの使用を検討する必要があります。それは好みのことですが、マテリアルはBootstrapよりも見栄えが良く便利であり、データに関する限り、実装と理解はかなり簡単です。箱から出してすぐに動作します。

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

1
Joshua Michael Calafell

データテーブルの場合、列に並べ替え、フィルタリング、列の順序の並べ替え、ページネーションなどの機能を持たせることができます。その場合、swimlaneによるngx-datatableモジュールは非常に便利です。エンタープライズデータカタログに使用し、大きなデータセットを問題なく処理します。

ngx-datableドキュメントへのリンク

1
Bv Kay