ztimson/ng-datatable
ztimson/ng-datatable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Added dot notation (Fixes #6)

Browse Source
This commit is contained in:
Zakary Timson 2018-06-26 17:18:44 -04:00
parent 58f2b18d77
commit cc1b9b1b3f
4 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -132,15 +132,15 @@ Exported As: `Column`
#### Properties #### Properties
| Name | Description | | Name | Description |
| -------------------------- | ------------------------------- | | -------------------------- | ----------------------------------- |
| cssClass: string | Style to add to column header | | cssClass: string | Style to add to column header |
| hide: boolean | Hide column | | hide: boolean | Hide column |
| hideMobile: boolean | Hide column on mobile devices | | hideMobile: boolean | Hide column on mobile devices |
| initialSort: 'asc'/'desc' | Sort the column initially | | initialSort: 'asc'/'desc' | Sort the column initially |
| label: string | Column header label | | label: string | Column header label |
| property: string | Property to display | | property: string | Property to display in dot notation |
| sort: boolean | Enable/Disable sorting | | sort: boolean | Enable/Disable sorting |
| sortFn: (a, b) => 1/0/-1 | Custom function to sort rows by | | sortFn: (a, b) => 1/0/-1 | Custom function to sort rows by |
| template: TemplateRef<any> | Template to render row with | | template: TemplateRef<any> | Template to render row with |
| width: string | CSS width property | | width: string | CSS width property |

2
projects/ng-datatable/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ztimson/ng-datatable", "name": "@ztimson/ng-datatable",
"version": "1.3.0", "version": "1.4.0",
"homepage": "https://github.com/ztimson/ng-datatable", "homepage": "https://github.com/ztimson/ng-datatable",
"license": "Apache-2.0", "license": "Apache-2.0",
"author": { "author": {

4
projects/ng-datatable/src/lib/ng-datatable.component.html
View File

@ -3,7 +3,7 @@
<col *ngIf="showCheckbox && selectionMode !== null" width="30px"> <col *ngIf="showCheckbox && selectionMode !== null" width="30px">
<col *ngIf="expandedTemplate" width="30px"> <col *ngIf="expandedTemplate" width="30px">
<ng-container *ngFor="let c of columns"> <ng-container *ngFor="let c of columns">
<col *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" span="1" [width]="c.width"> <col *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" span="1" [width]="convertWidth(c.width)">
</ng-container> </ng-container>
</colgroup> </colgroup>
<thead> <thead>
@ -35,7 +35,7 @@
<td *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)"> <td *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)">
<ng-template #defaultTemplate let-value="value">{{value}}</ng-template> <ng-template #defaultTemplate let-value="value">{{value}}</ng-template>
<ng-template [ngTemplateOutlet]="c.template || defaultTemplate" <ng-template [ngTemplateOutlet]="c.template || defaultTemplate"
[ngTemplateOutletContext]="{object: row, value: row[c.property]}"> [ngTemplateOutletContext]="{object: row, value: dotNotation(row, c.property)}">
</ng-template> </ng-template>
</td> </td>
</ng-container> </ng-container>

9
projects/ng-datatable/src/lib/ng-datatable.component.ts
View File

@ -82,6 +82,15 @@ export class NgDatatableComponent implements OnInit {
} }
} }
protected convertWidth(width) {
if(typeof width == 'number') return `${width}px`;
return width;
}
protected dotNotation(obj: object, prop: string) {
return prop.split('.').reduce((obj, prop) => obj[prop], obj);
}
addFilter(...filters: ((row?: any, index?: number, arr?: any[]) => boolean)[]) { addFilter(...filters: ((row?: any, index?: number, arr?: any[]) => boolean)[]) {
this.filters = this.filters.concat(filters); this.filters = this.filters.concat(filters);
this.process(); this.process();