-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(data-table): new data-table component (#92)
* feature(data-table): new data-table component * update(data-table): removed unused search pipe * update(data-table): removed functions used in ngIfs * chore(data-table): addressed all tslint warnings * fix(data-table): removed search pipe imports * update(scss): use core @angular/material theming - and move all styles into component to reduce complexity & match code styles of material2 * update(markup): use covalent layout & match material spec - use spec for title, search and footer pagination * update(data-table): removed no longer used NO_PAGINATION constant * update(data-table): removed superfluous TdDataTableContainerComponent * fix(data-table): focus on search field wasn’t working * update(data-table): clears search when the filter area is closed * update(data-table): added sorting * update(data-table): made only the internal SPAN clickable for sorting * chore(data-table): fixed warning for empty SCSS rule * update(data-table): attribute to set sorting order * chore(data-table): fixed icon for sorting column indicator * update(data-table): improved styling for sorting column indicator * update(data-table): added formatting support and improved sorting look and feel * usage of hostbinding instead of host to follow covalent standards * update(data-table): made arrow up/down for sorting simpler and added animation * depend on materialmodule instead of covalentcore * changes string[] to string * meh.. returned to host since its less verbose and doesnt override classes in elements * follow checkboxes more to spec with color and size * usage [class.] to be more inline with covalent and cleaner html + added md-select/md-row-select * removed space so they dont appear as file changes lol * hide sort icons and block click event if _sorting is false * prevented click event prop when selecting row to avoid mismatch when clicking on checkbox * returned sorting to label and added it to sort icons + prevent selection if _rowSelection is false * moved data-table in sidenav and overview * added optional tooltip to headers * show asc icon when hovering over unselected columns since `asc` is always done when first selecting it * abstracted 'sortByColumnName' code and checked column name in 'sortBy' setter instead * removed _sortOrderName and abstracted code into sortOrder setter * update(data-table): condensed examples into one with multiple toggles * feature(data-table): allow enabling/disabling pagination * feature(data-table): added pagination switches to example * feature(data-table): default page size to 10 rows * feature(data-table): improved data type for sortOrder and data * docs(data-table): added documentation Documented all the parameters and added usage example * chore(data-table): removed extra semi-colon * chore(data-table): fixed all tslint errors and warnings * chore(data-table): fixed codelyzer tslint errors * docs(data-table): fixed README.md and small doc corrections * chore(data-table): addressed small code review feedback Removed md-ripple and renamed data sorting event interface * chore(data-table): fixed README attribute descriptions * directive fixed so class is not overrided * chore(data-table): fixed tslint error
- Loading branch information
1 parent
f151d59
commit 2bc5234
Showing
23 changed files
with
1,465 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
src/app/components/components/data-table/data-table.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| <md-card> | ||
| <md-card-title>Data Table</md-card-title> | ||
| <md-card-subtitle>Data driven table layout with search, sorting and pagination</md-card-subtitle> | ||
| <md-divider></md-divider> | ||
| <md-card-content> | ||
| <p>Basic Demo</p> | ||
|
|
||
| <td-data-table | ||
| [data]="data" | ||
| [columns]="columns" | ||
| [pagination]="pagination" | ||
| [pageSize]="pageSize" | ||
| [rowSelection]="rowSelection" | ||
| [multiple]="multiple" | ||
| [sorting]="sorting" | ||
| [sortBy]="sortBy" | ||
| [sortOrder]="sortOrder" | ||
| search="true" | ||
| title="Search and pagination enabled" | ||
| (sortChanged)="sortChanged($event)"> | ||
| </td-data-table> | ||
|
|
||
| </md-card-content> | ||
| <md-divider></md-divider> | ||
| <md-card-actions> | ||
| <button md-button color="primary" (click)="toggleSorting()"> | ||
| Toggle Sorting | ||
| ({{sorting ? 'ON' : 'OFF'}}) | ||
| </button> | ||
|
|
||
| <button md-button color="primary" (click)="toggleSortBy()" [disabled]="!sorting"> | ||
| Toggle SortBy | ||
| ({{sortBy}}) | ||
| </button> | ||
|
|
||
| <button md-button color="primary" (click)="toggleSortOrder()" [disabled]="!sorting"> | ||
| Toggle SortOrder | ||
| ({{sortOrder}}) | ||
| </button> | ||
|
|
||
| <button md-button color="primary" (click)="toggleRowSelection()"> | ||
| Toggle RowSelection | ||
| ({{rowSelection ? 'ON' : 'OFF'}}) | ||
| </button> | ||
|
|
||
| <button md-button color="primary" (click)="toggleRowSelectionMultiple()" [disabled]="!rowSelection"> | ||
| Toggle RowSelectionMultiple | ||
| ({{multiple ? 'ON' : 'OFF'}}) | ||
| </button> | ||
|
|
||
| <button md-button color="primary" (click)="toggleTooltips()"> | ||
| Toggle Tooltip | ||
| ({{areTooltipsOn() ? 'ON' : 'OFF'}}) | ||
| </button> | ||
|
|
||
| <button md-button color="primary" (click)="togglePagination()"> | ||
| Toggle Pagination | ||
| ({{pagination ? 'ON' : 'OFF'}}) | ||
| </button> | ||
|
|
||
| <button md-button color="primary" (click)="togglePageSize()" [disabled]="!pagination"> | ||
| Change Page Size | ||
| ({{pageSize}}) | ||
| </button> | ||
| </md-card-actions> | ||
| </md-card> | ||
| <md-card> | ||
| <md-card-title>TdDataTableComponent</md-card-title> | ||
| <md-card-subtitle>How to use this component</md-card-subtitle> | ||
| <md-divider></md-divider> | ||
| <md-card-content> | ||
| <h2><code><![CDATA[<td-data-table>]]></code></h2> | ||
| <p>Use <code><![CDATA[<td-data-table>]]></code> element to generate a table.</p> | ||
| <p>Pass an array of javascript objects with the information to be displayed on the table to the [data] attribute.</p> | ||
| <h3>Properties:</h3> | ||
| <p>The <code><![CDATA[<td-data-table>]]></code> component has {{dataTableAttrs.length}} properties:</p> | ||
| <md-list> | ||
| <template let-attr let-last="attr" ngFor [ngForOf]="dataTableAttrs"> | ||
| <a md-list-item layout-align="row"> | ||
| <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3> | ||
| <p md-line> {{attr.description}} </p> | ||
| </a> | ||
| <md-divider *ngIf="!last"></md-divider> | ||
| </template> | ||
| </md-list> | ||
| <h3>Example:</h3> | ||
| <p>HTML:</p> | ||
| <td-highlight lang="html"> | ||
| <![CDATA[ | ||
| <td-data-table | ||
| [data]="data" | ||
| [columns]="columns" | ||
| sortBy="age" | ||
| sortOrder="DESC" | ||
| pagination="true" | ||
| pageSize="5" | ||
| search="true"> | ||
| </td-data-table> | ||
| ]]> | ||
| </td-highlight> | ||
| <p>Typescript:</p> | ||
| <td-highlight lang="typescript"> | ||
| <![CDATA[ | ||
| ... | ||
| }) | ||
| 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: any[] = [ | ||
| { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit' }, | ||
| { name: 'item', label: 'Item name' }, | ||
| { name: 'price', label 'Price (US$)', numeric: true, format: v => v.toFixed(2) }, | ||
| ]; | ||
| } | ||
| ]]> | ||
| </td-highlight> | ||
| <h3>Setup:</h3> | ||
| <p>Import the [CovalentDataTableModule] using the <code>forRoot()</code> method in your NgModule:</p> | ||
| <td-highlight lang="typescript"> | ||
| <![CDATA[ | ||
| import { CovalentDataTableModule } from '@covalent/data-table'; | ||
| @NgModule({ | ||
| imports: [ | ||
| CovalentDataTableModule.forRoot(), | ||
| ... | ||
| ], | ||
| ... | ||
| }) | ||
| export class MyModule {} | ||
| ]]> | ||
| </td-highlight> | ||
| </md-card-content> | ||
| </md-card> |
Empty file.
Oops, something went wrong.