angular 4 with bootstrap 4 data-table

Question

I need to use a table with angular 4 and bootstrap 4 but the bootstrap 4 official table is not looking too good. I found this git project: https://www.npmjs.com/package/angular-4-data-table-fix

but can't find any documentation on how to use it. does anyone knows this project or a similar one and can help?

Thanks.

Solution 1

You can see the code here: https://github.com/ggmod/angular-2-data-table-demo/tree/master/app

Basically, you create a new component for the table, like this (taken from the example above):

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

And the template HTML file:

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

Of course in your case the data source and structure might be different, so you need to adjust this code to the the structure you want.

Remember to declare your component in the app.module.ts and then you can use it, lets say in app.component.html, like in the example, where data-table-demo-1 is your component that has the table:

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

EDIT: You also have to import the data table module, like so:

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

So then the app.module.ts could look like that:

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

Solution 2

For a data table, you probably want the columns to have features like sorting, filtering, rearranging column orders and pagination. If so, the ngx-datatable module by swimlane is pretty sweet. I use it for an enterprise data catalog and it handles large datasets without issues.

Link to the ngx-datable documentation

Solution 3

If you're looking for a really good dynamic data table you should look into using Angular Material. It's a preference thing, but Material is better looking and more useful than Bootstrap and as far as data goes, it's fairly easy to implement and understand. Works quite well out of the box.

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

Comments

[Jay]

Did you try PrimeNG by Primefaces? primefaces.org/primeng/#

[Shay]

yes, I have. I guess I need to import something but can't find out what.

[Apostrofix]

Sorry, I missed to mention that you also have to import the data table module in app.module.ts and then it works. I am editing my answer at the moment, check it out.

[Shay]

it's working, needed to import DataTableModule. Thank you. I spent a lot of time on that.

[buzibuzi]

and here is a good usage of it using CRUD operations github.com/marinantonio/angular-mat-table-crud, i wish i had found this earlier

[Hemant Kumar Singh]

I may agree but what if we already using bootstrap 4 in project, is material table can be used with bootstrap 4?

[skydev]

Material seems way more suitable for angular in general as and you pointed out the data aspect is a winner