What Is Ng2 Expandable DataTable

The ng2 data table is an angular2 component which is used for presenting vast and complex data into the table. It has all the features which are present in any other data table but in the light package.This table is extremely flexible and light. It does not give any notion about the data that how it is going to be filter, sort or page it.
It was mainly built for modern browsers using TypeScript, CSS3 and HTML5 and Angular.
It has some special features.
1. Horizontal and Vertical Scrolling.
2. Handle datasets in bulk.
3. It supports both client and server-side pagination and sorting.
4. Light codebase.
5. Column Reordering and Resizing.
Now, there are some steps which need to be followed during installation of the collapsable or expandable data table.
(i) Installation 
npm install angular-2-data-table --save

(ii) app.component.html

<div style="margin: auto; max-width: 1000px; margin-top:50px">
    <data-table id="films-grid"
        headerTitle="Films"
        [items]="films"
        [itemCount]="filmCount"
        (reload)="reloadFilms($event)"
        [limit]="8"
        [sortBy]="'rating'"
        [sortAsc]="false"
        [selectColumn]="true"
        [multiSelect]="false"
        [substituteRows]="false"
        [expandableRows]="true"
        [translations]="translations"
        [indexColumnHeader]="'#'"
        [selectOnRowClick]="true">
        <template #dataTableExpand let-item="item">
            <div [textContent]="item.description" style="padding: 5px; color: gray"></div>
        </template>
        <data-table-column
            [property]="'title'"
            [header]="'Title'"
            [sortable]="true">
        </data-table-column>
        <data-table-column
            [property]="'year'"
            [header]="'Release year'"
            [sortable]="true">
        </data-table-column>
        <data-table-column
            [property]="'rating'"
            [header]="'Rating'"
            [sortable]="true"
            [cellColors]="cellColor">
        </data-table-column>
        <data-table-column
            [property]="'director'"
            [header]="'Director'">
        </data-table-column>
    </data-table>
    <div style="margin-top: 10px">
        <b>Selected:</b>
        <span *ngIf="filmsTable.selectedRow == null"><i>No item selected</i></span>
        <span [textContent]="filmsTable.selectedRow && filmsTable.selectedRow.item.title"></span>
    </div>
</div>

(iii) app.component.ts

import { Component, ViewChild } from '@angular/core';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-2-data-table';
import { films } from './data-table-demo3-data';
@Component({
  selector: 'data-table-demo-3',
  templateUrl: 'app/demo3/data-table-demo3.html',
  styleUrls: ['app/demo3/data-table-demo3.css']
})
export class DataTableDemo3 {
    filmResource = new DataTableResource(films);
    films = [];
    filmCount = 0;
    @ViewChild(DataTable) filmsTable;
    constructor() {
        this.filmResource.count().then(count => this.filmCount = count);
    }
    reloadFilms(params) {
        this.filmResource.query(params).then(films => this.films = films);
    }
    cellColor(car) {
        return 'rgb(255, 255,' + (155 + Math.floor(100 - ((car.rating - 8.7)/1.3)*100)) + ')';
    };
    // special params:
    translations = <DataTableTranslations>{
        indexColumn: 'Index column',
        expandColumn: 'Expand column',
        selectColumn: 'Select column',
        paginationLimit: 'Max results',
        paginationRange: 'Result range'
    };
}

(iii) app-data.component.ts

export var films = [
 { title: 'The Story Books', year: 1993, rating: 4.2, director: 'Frank John', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  },
 { title: 'The Godfather Books: Part II', year: 1984, rating: 8.0, director: 'Francis Ford Tery', description: 'Ut enim ad minim veniam, quis nostrud 
   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'},
 ];

(iv) app.module.ts
import { DataTableModule } from 'angular-2-data-table';
imports: [ BrowserModule, CommonModule, FormsModule, DataTableModule ],