td-data-table

td-data-table element generates a data driven table layout sorting events.

Use [tdDataTableTemplate] directive for template support which gives context access to [value], [row] and [column].

API Summary

Inputs

• data: any[]
  • Rows of data to be displayed.
• columns?: ITdDataTableColumn[]
  • List of columns to be displayed.
• selectable?: boolean
  • Enables row selection events, hover and selected row states.
• multiple?: boolean
  • Enables multiple row selection. [selectable] needs to be enabled.
• sortable?: boolean
  • Enables sorting events, sort icons and active column states.
• sortBy?: string
  • Sets the active sort column. [sortable] needs to be enabled.
• sortOrder?: TdDataTableSortingOrder
  • Sets the sort order of the [sortBy] column. [sortable] needs to be enabled.
  • Defaults to ‘ASC’ or TdDataTableSortingOrder.Ascending
• clickable?: boolean
  • Enables row click events, hover.
  • Defaults to ‘false’
• compareWith: function(row, model)
  • Allows custom comparison between row and model to see if row is selected or not.

Events

• sortChange: function
  • Event emitted when the column headers are clicked. [sortable] needs to be enabled.
  • Emits an [ITdDataTableSortEvent] implemented object.
• rowSelect: function
  • Event emitted when a row is selected/deselected. [selectable] needs to be enabled.
  • Emits an [ITdDataTableSelectEvent] implemented object.
• rowClick: function
  • Event emitted when a row is clicked. [clickable] needs to be enabled.
  • Emits an [ITdDataTableRowClickEvent] implemented object.
• selectAll: function
  • Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled.
  • Emits an [ITdDataTableSelectAllEvent] implemented object.

Methods

• refresh: function
  • Refreshes data table and rerenders [data] and [columns]

Setup

Import the [CovalentDataTableModule] in your NgModule:

import { CovalentDataTableModule } from '@covalent/core/data-table';
@NgModule({
  imports: [
    CovalentDataTableModule,
    ...
  ],
  ...
})
export class MyModule {}

Usage

The ITdDataTableColumn interface for columns has the following contract:

export interface ITdDataTableColumn {
  name: string;
  label: string;
  tooltip?: string; // used to add a tooltip into the column header
  numeric?: boolean; // used to right align elements if they are numeric
  format?: (value: any) => any; // used to format the cell values
  nested?: boolean; // when this is true, the `.` characters will be taken as key separators for nested values
  sortable?: boolean; // used to make a particular column sortable
  hidden?: boolean; // used to hide the column in the data table on the fly
  filter?: boolean;
  width?: ITdDataTableColumnWidth | number; // used to configure the widths of the columns, if omitted it will fill the rest of the space
}

export interface ITdDataTableColumnWidth {
  min?: number;
  max?: number;
}

Example for HTML usage:

<td-data-table
  [data]="data"
  [columns]="columns"
  [selectable]="true|false"
  [multiple]="true|false"
  [sortable]="true|false"
  [sortBy]="sortBy"
  [sortOrder]="'ASC'|'DESC'"
  [compareWith]="compareWith"
  (sortChange)="sortEvent($event)"
  (rowSelect)="selectEvent($event)"
  (selectAll)="selectAllEvent($event)">
  <ng-template tdDataTableTemplate="columnName" let-value="value" let-row="row" let-column="column">
    <div layout="row">
      <span flex>{{value}}</span> // or <span flex>{{row[column]}}</span>
      <mat-icon>star</mat-icon>
    </div>
  </ng-template>
</td-data-table>

import { ITdDataTableColumn } from '@covalent/core/data-table';
...
})
export class Demo {
  private data: any[] = [
    { sku: '1452-2', item: 'Pork Chops', price: 32.11 },
    { sku: '1421-0', item: 'Prime Rib', price: 41.15 },
  ];
  private columns: ITdDataTableColumn[] = [
    { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit', sortable: true },
    { name: 'item', label: 'Item name', width: 200 },
    { name: 'price', label: 'Price (US$)', numeric: true, format: v => v.toFixed(2), width: { min: 100, max: 400 } },
  ];
  compareWith(row: any: model: any): boolean {
    return row.id === model.id; // or any property you want to compare by.
  }
}