This repository has been archived by the owner on Aug 19, 2019. It is now read-only.
/
f0e20ab838eeec9f9885700e19ced19b-mat-sort.component.html.json
1 lines (1 loc) · 16.4 KB
/
f0e20ab838eeec9f9885700e19ced19b-mat-sort.component.html.json
1
[{"file":"mat-sort.component.ts","lang":"ts","section":"ex-1","code":"<span class=\"hljs-keyword\">import</span> { ChangeDetectionStrategy, Component, ViewEncapsulation } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@angular/core'</span>;\n\n<span class=\"hljs-keyword\">import</span> { columnFactory, createDS, NegColumn } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/table'</span>;\n<span class=\"hljs-keyword\">import</span> { NegTableMatSortDirective } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/table/material/sort'</span>;\n\n<span class=\"hljs-keyword\">import</span> { Person, DemoDataSource } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/demo-apps/shared'</span>;\n\n<span class=\"hljs-keyword\">const</span> COLUMNS = columnFactory()\n .default({minWidth: <span class=\"hljs-number\">100</span>})\n .table(\n { prop: <span class=\"hljs-string\">'id'</span>, sort: <span class=\"hljs-literal\">true</span>, width: <span class=\"hljs-string\">'40px'</span> },\n { prop: <span class=\"hljs-string\">'name'</span>, sort: <span class=\"hljs-literal\">true</span> },\n { prop: <span class=\"hljs-string\">'gender'</span>, sort: <span class=\"hljs-literal\">true</span>, width: <span class=\"hljs-string\">'50px'</span> },\n { prop: <span class=\"hljs-string\">'birthdate'</span>, <span class=\"hljs-keyword\">type</span>: <span class=\"hljs-string\">'date'</span> }\n )\n .footer(\n { id: <span class=\"hljs-string\">'PAGINATOR'</span>, <span class=\"hljs-keyword\">type</span>: <span class=\"hljs-string\">'PAGINATOR'</span> },\n )\n .build();\n\n<span class=\"hljs-meta\">@Component</span>({\n selector: <span class=\"hljs-string\">'neg-mat-sort-table-example-component'</span>,\n templateUrl: <span class=\"hljs-string\">'./mat-sort.component.html'</span>,\n styleUrls: [<span class=\"hljs-string\">'./mat-sort.component.scss'</span>],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n<span class=\"hljs-keyword\">export</span> <span class=\"hljs-keyword\">class</span> MatSortTableExampleComponent {\n columns = COLUMNS;\n simpleSortDS = createDS<Person><span class=\"hljs-function\"><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n <span class=\"hljs-params\">defaultSortDS</span> = <span class=\"hljs-params\">createDS</span><<span class=\"hljs-params\">Person</span>><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n <span class=\"hljs-params\">progSortDS</span> = <span class=\"hljs-params\">createDS</span><<span class=\"hljs-params\">Person</span>><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n\n <span class=\"hljs-params\">constructor</span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private</span> datasource: DemoDataSource</span>) { }\n\n <span class=\"hljs-params\">toggleActive</span>(<span class=\"hljs-params\">matSort: NegTableMatSortDirective, column: NegColumn, state: <span class=\"hljs-built_in\">boolean</span></span>): <span class=\"hljs-params\">void</span> {\n <span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">table</span>.<span class=\"hljs-params\">dataSource</span>.<span class=\"hljs-params\">setSort</span>(<span class=\"hljs-params\">column, { order: state ? 'asc' : <span class=\"hljs-literal\">undefined</span> }</span>);\n }\n\n <span class=\"hljs-params\">isActive</span>(<span class=\"hljs-params\">matSort: NegTableMatSortDirective, column: NegColumn</span>): <span class=\"hljs-params\">boolean</span> {\n <span class=\"hljs-params\">return</span> <span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">sort</span>.<span class=\"hljs-params\">active</span> === <span class=\"hljs-params\">column</span>.<span class=\"hljs-params\">id</span> && !!<span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">sort</span>.<span class=\"hljs-params\">direction</span>;\n }\n}\n</span>"},{"file":"mat-sort.component.md","lang":"md","section":"ex-1","code":" <neg-table matSort\n usePagination\n blockUi\n [dataSource]=\"simpleSortDS\"\n [columns]=\"columns\" style=\"height: 300px\">\n <neg-table-paginator *negTablePaginatorRef=\"let table\"\n [table]=\"table\"\n [paginator]=\"table.dataSource.paginator\"></neg-table-paginator>\n </neg-table>"},{"file":"mat-sort.component.ts","lang":"ts","section":"ex-2","code":"<span class=\"hljs-keyword\">import</span> { ChangeDetectionStrategy, Component, ViewEncapsulation } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@angular/core'</span>;\n\n<span class=\"hljs-keyword\">import</span> { columnFactory, createDS, NegColumn } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/table'</span>;\n<span class=\"hljs-keyword\">import</span> { NegTableMatSortDirective } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/table/material/sort'</span>;\n\n<span class=\"hljs-keyword\">import</span> { Person, DemoDataSource } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/demo-apps/shared'</span>;\n\n<span class=\"hljs-keyword\">const</span> COLUMNS = columnFactory()\n .default({minWidth: <span class=\"hljs-number\">100</span>})\n .table(\n { prop: <span class=\"hljs-string\">'id'</span>, sort: <span class=\"hljs-literal\">true</span>, width: <span class=\"hljs-string\">'40px'</span> },\n { prop: <span class=\"hljs-string\">'name'</span>, sort: <span class=\"hljs-literal\">true</span> },\n { prop: <span class=\"hljs-string\">'gender'</span>, sort: <span class=\"hljs-literal\">true</span>, width: <span class=\"hljs-string\">'50px'</span> },\n { prop: <span class=\"hljs-string\">'birthdate'</span>, <span class=\"hljs-keyword\">type</span>: <span class=\"hljs-string\">'date'</span> }\n )\n .footer(\n { id: <span class=\"hljs-string\">'PAGINATOR'</span>, <span class=\"hljs-keyword\">type</span>: <span class=\"hljs-string\">'PAGINATOR'</span> },\n )\n .build();\n\n<span class=\"hljs-meta\">@Component</span>({\n selector: <span class=\"hljs-string\">'neg-mat-sort-table-example-component'</span>,\n templateUrl: <span class=\"hljs-string\">'./mat-sort.component.html'</span>,\n styleUrls: [<span class=\"hljs-string\">'./mat-sort.component.scss'</span>],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n<span class=\"hljs-keyword\">export</span> <span class=\"hljs-keyword\">class</span> MatSortTableExampleComponent {\n columns = COLUMNS;\n simpleSortDS = createDS<Person><span class=\"hljs-function\"><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n <span class=\"hljs-params\">defaultSortDS</span> = <span class=\"hljs-params\">createDS</span><<span class=\"hljs-params\">Person</span>><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n <span class=\"hljs-params\">progSortDS</span> = <span class=\"hljs-params\">createDS</span><<span class=\"hljs-params\">Person</span>><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n\n <span class=\"hljs-params\">constructor</span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private</span> datasource: DemoDataSource</span>) { }\n\n <span class=\"hljs-params\">toggleActive</span>(<span class=\"hljs-params\">matSort: NegTableMatSortDirective, column: NegColumn, state: <span class=\"hljs-built_in\">boolean</span></span>): <span class=\"hljs-params\">void</span> {\n <span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">table</span>.<span class=\"hljs-params\">dataSource</span>.<span class=\"hljs-params\">setSort</span>(<span class=\"hljs-params\">column, { order: state ? 'asc' : <span class=\"hljs-literal\">undefined</span> }</span>);\n }\n\n <span class=\"hljs-params\">isActive</span>(<span class=\"hljs-params\">matSort: NegTableMatSortDirective, column: NegColumn</span>): <span class=\"hljs-params\">boolean</span> {\n <span class=\"hljs-params\">return</span> <span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">sort</span>.<span class=\"hljs-params\">active</span> === <span class=\"hljs-params\">column</span>.<span class=\"hljs-params\">id</span> && !!<span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">sort</span>.<span class=\"hljs-params\">direction</span>;\n }\n}\n</span>"},{"file":"mat-sort.component.md","lang":"md","section":"ex-2","code":" <neg-table matSort matSortActive=\"name\" matSortDirection=\"desc\"\n usePagination\n blockUi\n [dataSource]=\"defaultSortDS\"\n [columns]=\"columns\" style=\"height: 300px\">\n <neg-table-paginator *negTablePaginatorRef=\"let table\"\n [table]=\"table\"\n [paginator]=\"table.dataSource.paginator\"></neg-table-paginator>\n </neg-table>"},{"file":"mat-sort.component.ts","lang":"ts","section":"ex-3","code":"<span class=\"hljs-keyword\">import</span> { ChangeDetectionStrategy, Component, ViewEncapsulation } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@angular/core'</span>;\n\n<span class=\"hljs-keyword\">import</span> { columnFactory, createDS, NegColumn } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/table'</span>;\n<span class=\"hljs-keyword\">import</span> { NegTableMatSortDirective } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/table/material/sort'</span>;\n\n<span class=\"hljs-keyword\">import</span> { Person, DemoDataSource } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'@neg/demo-apps/shared'</span>;\n\n<span class=\"hljs-keyword\">const</span> COLUMNS = columnFactory()\n .default({minWidth: <span class=\"hljs-number\">100</span>})\n .table(\n { prop: <span class=\"hljs-string\">'id'</span>, sort: <span class=\"hljs-literal\">true</span>, width: <span class=\"hljs-string\">'40px'</span> },\n { prop: <span class=\"hljs-string\">'name'</span>, sort: <span class=\"hljs-literal\">true</span> },\n { prop: <span class=\"hljs-string\">'gender'</span>, sort: <span class=\"hljs-literal\">true</span>, width: <span class=\"hljs-string\">'50px'</span> },\n { prop: <span class=\"hljs-string\">'birthdate'</span>, <span class=\"hljs-keyword\">type</span>: <span class=\"hljs-string\">'date'</span> }\n )\n .footer(\n { id: <span class=\"hljs-string\">'PAGINATOR'</span>, <span class=\"hljs-keyword\">type</span>: <span class=\"hljs-string\">'PAGINATOR'</span> },\n )\n .build();\n\n<span class=\"hljs-meta\">@Component</span>({\n selector: <span class=\"hljs-string\">'neg-mat-sort-table-example-component'</span>,\n templateUrl: <span class=\"hljs-string\">'./mat-sort.component.html'</span>,\n styleUrls: [<span class=\"hljs-string\">'./mat-sort.component.scss'</span>],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n<span class=\"hljs-keyword\">export</span> <span class=\"hljs-keyword\">class</span> MatSortTableExampleComponent {\n columns = COLUMNS;\n simpleSortDS = createDS<Person><span class=\"hljs-function\"><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n <span class=\"hljs-params\">defaultSortDS</span> = <span class=\"hljs-params\">createDS</span><<span class=\"hljs-params\">Person</span>><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n <span class=\"hljs-params\">progSortDS</span> = <span class=\"hljs-params\">createDS</span><<span class=\"hljs-params\">Person</span>><span class=\"hljs-params\">()</span>.<span class=\"hljs-params\">onTrigger</span>(<span class=\"hljs-params\"> (<span class=\"hljs-params\"></span>) => <span class=\"hljs-keyword\">this</span>.datasource.getPeople(<span class=\"hljs-params\">500</span>) </span>).<span class=\"hljs-params\">create</span><span class=\"hljs-params\">()</span>;\n\n <span class=\"hljs-params\">constructor</span>(<span class=\"hljs-params\"><span class=\"hljs-keyword\">private</span> datasource: DemoDataSource</span>) { }\n\n <span class=\"hljs-params\">toggleActive</span>(<span class=\"hljs-params\">matSort: NegTableMatSortDirective, column: NegColumn, state: <span class=\"hljs-built_in\">boolean</span></span>): <span class=\"hljs-params\">void</span> {\n <span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">table</span>.<span class=\"hljs-params\">dataSource</span>.<span class=\"hljs-params\">setSort</span>(<span class=\"hljs-params\">column, { order: state ? 'asc' : <span class=\"hljs-literal\">undefined</span> }</span>);\n }\n\n <span class=\"hljs-params\">isActive</span>(<span class=\"hljs-params\">matSort: NegTableMatSortDirective, column: NegColumn</span>): <span class=\"hljs-params\">boolean</span> {\n <span class=\"hljs-params\">return</span> <span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">sort</span>.<span class=\"hljs-params\">active</span> === <span class=\"hljs-params\">column</span>.<span class=\"hljs-params\">id</span> && !!<span class=\"hljs-params\">matSort</span>.<span class=\"hljs-params\">sort</span>.<span class=\"hljs-params\">direction</span>;\n }\n}</span>"},{"file":"mat-sort.component.md","lang":"md","section":"ex-3","code":" <neg-table #matSort=\"negMatSort\"\n matSort\n [stickyHeader]=\"['table']\"\n usePagination\n blockUi\n [dataSource]=\"progSortDS\"\n [columns]=\"columns\" style=\"height: 300px\">\n <neg-table-paginator *negTablePaginatorRef=\"let table\"\n [table]=\"table\"\n [paginator]=\"table.dataSource.paginator\"></neg-table-paginator>\n </neg-table>\n\n <mat-form-field>\n <mat-select #selectColumn>\n <mat-option *ngFor=\"let o of matSort.table._store.table\" [value]=\"o\">{{o.label}}</mat-option>\n </mat-select>\n </mat-form-field>\n <button *ngIf=\"selectColumn?.selected?.value as c\" mat-button\n (click)=\"toggleActive(matSort, c, $event.checked)\">\n {{ inegtive(matSort, c) ? matSort.sort.direction + ':' : 'In' }}Active</button>"}]