feat(data-table): split data-table into atomic reusable components + theming

[emoralesb05]

Description

There is a need to use data-table in many different situations, so besides providing a <data-table> component that does some of the things, its better to have atomic components so the consumer can create their custom data-table with them (atoms to build a molecule).

What's included?

• Atomic components of the data-table to create own encapsulating their css classes and inputs.

Usage:

     <table td-data-table>
        <th td-data-table-column>
          column header
        </th>
        <th td-data-table-column>
          column header 2
        </th>
        <tr td-data-table-row>
          <td td-data-table-cell>
            <span class="md-body-1">cell</span>
          </td>
          <td td-data-table-cell>
            <span class="md-body-1">cell 2</span>
          </td>
        </tr>
      </table>

• <td-data-table> still works, but most of the things were abstracted from it and there are components created from those abstractions (td-search-box, td-paging-bar and TdDataTableService (TdDataTableService contains the local sorting/paging/searching logic).
• [(ngModel)] support for <td-data-table>
• Theming for data-table module included with @include covalent-theme($theme).
• Removed lodash as dependency.
• Major cleanup of css and ts code for the data-table module.
• Added rowSelect event when clicking on a row in <td-data-table>

Test Steps

• ng serve
• Go to http://localhost:4200/#/components/data-table

Screenshots or link to CodePen/Plunker/JSfiddle

Screenshots with paging-bar + search-box + tdDataTableService

[emoralesb05]

Oh, yeah. Ill change that later on haha
That was just me being lazy and not importing the interfaces.

[emoralesb05]

• Updated data table docs

[kyleledbetter]

Might be nice to have docs around custom columns like you did here:

      <table td-data-table>
        <th td-data-table-column>
          <md-icon>comment</md-icon>
          <span>Comments</span>
        </th>
        <th td-data-table-column 
            *ngFor="let column of columns"
            [numeric]="column.numeric">
          {{column.label}}
        </th>
        <tr td-data-table-row *ngFor="let row of basicData">
          <td td-data-table-cell (click)="openPrompt(row, 'comments')">
            <button md-button [class.md-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
          </td>
          <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
            {{row[column.name]}}
          </td>
        </tr>
      </table>

[kyleledbetter]

and also docs explaining how to use the other paging/search components with the datatable

<div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm" [class.md-selected-title]="selectedRows.length && selectable">
      <span *ngIf="!searchBox.searchVisible" class="push-left-sm">
        <span *ngIf="(selectable && !selectedRows.length) || !selectable" class="md-title">Title here</span>
        <span *ngIf="selectedRows.length && selectable" class="md-body-1">{{selectedRows.length}} item(s) selected</span>
      </span>
      <td-search-box #searchBox backIcon="arrow_back" class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
      </td-search-box>
      <button md-icon-button>
        <md-icon>more_vert</md-icon>
      </button>
    </div>
    <md-divider></md-divider>
    <td-data-table
      [data]="filteredData"
      [columns]="columns"
      [selectable]="selectable"
      [multiple]="multiple"
      [sortable]="true"
      [sortBy]="sortBy"
      [(ngModel)]="selectedRows"
      [sortOrder]="sortOrder"
      (sortChange)="sort($event)">
    </td-data-table>
    <td-paging-bar [pageSizes]="[5, 10, 15, 20]" [total]="filteredTotal" (change)="page($event)"></td-paging-bar>

[jeremysmartt]

maybe add a comment to what this method is doing?

[jeremysmartt]

actually this file has bunches of methods in it that probably need docs

[emoralesb05]

Yeah, ill add more comments around the code to make it easier to review 😄

[jeremysmartt]

should probably add a comment around this section explaining what is going on in this