From 38b4265704c7147ff609002f7704ddf11250a9ba Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 5 Jul 2017 16:32:31 -0700 Subject: [PATCH] docs(sort): add initial sorting docs (#5513) * docs(sort): add initial sorting docs * add newlines * update * minor * rebase, add table example --- src/lib/sort/sort.md | 35 ++++++++++++++ src/material-examples/example-module.ts | 3 ++ .../sort-overview/sort-overview-example.css | 3 ++ .../sort-overview/sort-overview-example.html | 17 +++++++ .../sort-overview/sort-overview-example.ts | 48 +++++++++++++++++++ 5 files changed, 106 insertions(+) create mode 100644 src/lib/sort/sort.md create mode 100644 src/material-examples/sort-overview/sort-overview-example.css create mode 100644 src/material-examples/sort-overview/sort-overview-example.html create mode 100644 src/material-examples/sort-overview/sort-overview-example.ts diff --git a/src/lib/sort/sort.md b/src/lib/sort/sort.md new file mode 100644 index 00000000000..684d39b0cd2 --- /dev/null +++ b/src/lib/sort/sort.md @@ -0,0 +1,35 @@ +The `mdSort` and `md-sort-header` are used, respectively, to add sorting state and display +to tabular data. + + + +### Adding sort to table headers + +To add sorting behavior and styling to a set of table headers, add the `` component +to each header and provide an `id` that will identify it. These headers should be contained within a +parent element with the `mdSort` directive, which will emit an `mdSortChange` event when the user + triggers sorting on the header. + +Users can trigger the sort header through a mouse click or keyboard action. When this happens, the +`mdSort` will emit an `mdSortChange` event that contains the ID of the header triggered and the +direction to sort (`asc` or `desc`). + +#### Changing the sort order + +By default, a sort header starts its sorting at `asc` and then `desc`. Triggering the sort header +after `desc` will remove sorting. + +To reverse the sort order for all headers, set the `mdSortStart` to `desc` on the `mdSort` +directive. To reverse the order only for a specific header, set the `start` input only on the header +instead. + +To prevent the user from clearing the sort sort state from an already sorted column, set +`mdSortDisableClear` to `true` on the `mdSort` to affect all headers, or set `disableClear` to +`true` on a specific header. + +#### Using sort with the md-table + +When used on an `md-table` header, it is not required to set an `md-sort-header` id on because +by default it will use the id of the column. + + \ No newline at end of file diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index 460d2950ad9..e7a2bcd178c 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -98,6 +98,7 @@ import {TableBasicExample} from './table-basic/table-basic-example'; import {TableSortingExample} from './table-sorting/table-sorting-example'; import {TableFilteringExample} from './table-filtering/table-filtering-example'; import {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example'; +import {SortOverviewExample} from './sort-overview/sort-overview-example'; export interface LiveExample { title: string; @@ -197,6 +198,7 @@ export const EXAMPLE_COMPONENTS = { }, 'slide-toggle-forms': {title: 'Slide-toggle with forms', component: SlideToggleFormsExample}, 'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample}, + 'sort-overview': {title: 'Sorting overview', component: SortOverviewExample}, 'snack-bar-component': { title: 'Snack-bar with a custom component', component: SnackBarComponentExample @@ -312,6 +314,7 @@ export const EXAMPLE_LIST = [ SlideToggleConfigurableExample, SlideToggleOverviewExample, SlideToggleFormsExample, + SortOverviewExample, SnackBarComponentExample, PizzaPartyComponent, SnackBarOverviewExample, diff --git a/src/material-examples/sort-overview/sort-overview-example.css b/src/material-examples/sort-overview/sort-overview-example.css new file mode 100644 index 00000000000..5d2cd6d6ab4 --- /dev/null +++ b/src/material-examples/sort-overview/sort-overview-example.css @@ -0,0 +1,3 @@ +.mat-sort-header-container { + align-items: center; +} diff --git a/src/material-examples/sort-overview/sort-overview-example.html b/src/material-examples/sort-overview/sort-overview-example.html new file mode 100644 index 00000000000..342f3855414 --- /dev/null +++ b/src/material-examples/sort-overview/sort-overview-example.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + +
Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)
{{dessert.name}}{{dessert.calories}}{{dessert.fat}}{{dessert.carbs}}{{dessert.protein}}
diff --git a/src/material-examples/sort-overview/sort-overview-example.ts b/src/material-examples/sort-overview/sort-overview-example.ts new file mode 100644 index 00000000000..6670206444f --- /dev/null +++ b/src/material-examples/sort-overview/sort-overview-example.ts @@ -0,0 +1,48 @@ +import {Component} from '@angular/core'; +import {Sort} from '@angular/material'; + + +@Component({ + selector: 'sort-overview-example', + templateUrl: 'sort-overview-example.html', + styleUrls: ['sort-overview-example.css'], +}) +export class SortOverviewExample { + desserts = [ + {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'}, + {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'}, + {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'}, + {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'}, + {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'}, + ]; + + sortedData; + + constructor() { + this.sortedData = this.desserts.slice(); + } + + sortData(sort: Sort) { + const data = this.desserts.slice(); + if (!sort.active || sort.direction == '') { + this.sortedData = data; + return; + } + + this.sortedData = data.sort((a, b) => { + let isAsc = sort.direction == 'asc'; + switch (sort.active) { + case 'name': return compare(a.name, b.name, isAsc); + case 'calories': return compare(+a.calories, +b.calories, isAsc); + case 'fat': return compare(+a.fat, +b.fat, isAsc); + case 'carbs': return compare(+a.carbs, +b.carbs, isAsc); + case 'protein': return compare(+a.protein, +b.protein, isAsc); + default: return 0; + } + }); + } +} + +function compare(a, b, isAsc) { + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); +}