{"action":"closed","issue":{"url":"https://api.github.com/repos/mseemann/angular2-mdl/issues/368","repository_url":"https://api.github.com/repos/mseemann/angular2-mdl","labels_url":"https://api.github.com/repos/mseemann/angular2-mdl/issues/368/labels{/name}","comments_url":"https://api.github.com/repos/mseemann/angular2-mdl/issues/368/comments","events_url":"https://api.github.com/repos/mseemann/angular2-mdl/issues/368/events","html_url":"https://github.com/mseemann/angular2-mdl/issues/368","id":197394872,"number":368,"title":"[feature]mdl-data-grid","user":{"login":"wujun4code","id":5119542,"avatar_url":"https://avatars.githubusercontent.com/u/5119542?v=3","gravatar_id":"","url":"https://api.github.com/users/wujun4code","html_url":"https://github.com/wujun4code","followers_url":"https://api.github.com/users/wujun4code/followers","following_url":"https://api.github.com/users/wujun4code/following{/other_user}","gists_url":"https://api.github.com/users/wujun4code/gists{/gist_id}","starred_url":"https://api.github.com/users/wujun4code/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wujun4code/subscriptions","organizations_url":"https://api.github.com/users/wujun4code/orgs","repos_url":"https://api.github.com/users/wujun4code/repos","events_url":"https://api.github.com/users/wujun4code/events{/privacy}","received_events_url":"https://api.github.com/users/wujun4code/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-12-23T16:19:59Z","updated_at":"2016-12-27T02:27:59Z","closed_at":"2016-12-27T02:27:59Z","body":"##  why mdl-data-grid ?\r\nI want to edit some values in table view, but after I check the code, I think make another component would be better, so I tried to.It works.\r\n\r\n## Why Issue not pull request?\r\nBecause I am not experienced at webpack and unit test, I can not config the repo correctly on my local environment. \r\n\r\n## Thanks for your awesome work. @mseemann\r\n\r\n## Code\r\n```ts\r\nimport { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';\r\n\r\nexport interface IMdlDataGridColumn {\r\n    key: string;\r\n    name: string;\r\n    sortable?: boolean;\r\n    numeric?: boolean;\r\n    editable?: boolean;\r\n    isBoolean?: boolean;\r\n    isText?: boolean;\r\n}\r\n\r\nexport interface IMdlDataGridModel {\r\n    selected: boolean;\r\n}\r\n\r\nexport interface IMdlDataGrid {\r\n    columns: Array<IMdlDataGridColumn>;\r\n    data: Array<IMdlDataGridModel>;\r\n}\r\n\r\nexport class MdlDefaultGrid implements IMdlDataGrid {\r\n    public columns: Array<IMdlDataGridColumn>;\r\n    public data: Array<IMdlDataGridModel> = new Array<IMdlDataGridModel>();\r\n\r\n    constructor(columns: Array<IMdlDataGridColumn>, data?: Array<IMdlDataGridModel>) {\r\n        this.columns = columns;\r\n        if (data)\r\n            this.data = data;\r\n    }\r\n\r\n    public addAll(data: Array<IMdlDataGridModel>) {\r\n        this.data.push(...data);\r\n    }\r\n}\r\n\r\n\r\nconst template =\r\n    `\r\n    <table class=\"mdl-data-table\">\r\n        <thead>\r\n            <tr>\r\n            <th *ngIf=\"selectable\">\r\n                <mdl-checkbox mdl-ripple [ngModel]=\"isAllSelected()\" (ngModelChange)=\"toogleAll()\"></mdl-checkbox>\r\n            </th>\r\n            <th *ngFor=\"let column of model.columns\" [ngClass]=\"{'mdl-data-table__cell--non-numeric': !column.numeric}\">\r\n                {{column.name}}\r\n            </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let data of model.data; let i = index\" [ngClass]=\"{'is-selected': selectable && data.selected}\">\r\n            <td *ngIf=\"selectable\">\r\n                <mdl-checkbox mdl-ripple [(ngModel)]=\"data.selected\" (ngModelChange)=\"selectionChanged(data)\"></mdl-checkbox>\r\n            </td>\r\n            <td *ngFor=\"let column of model.columns\" [ngClass]=\"{'mdl-data-table__cell--non-numeric': !column.numeric}\">\r\n                <mdl-checkbox *ngIf=\"column.isBoolean\" mdl-ripple [(ngModel)]=\"data[column.key]\" [disabled]=\"!column.editable\"></mdl-checkbox>\r\n                <pre *ngIf=\"column.isText\">{{data[column.key]}}</pre>\r\n            </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    `;\r\nconst styles = [\r\n    `\r\n    :host{\r\n      display:inline-block;\r\n    }\r\n    `\r\n];\r\n@Component({\r\n    selector: 'mdl-data-grid',\r\n    template: template,\r\n    styles: styles,\r\n    encapsulation: ViewEncapsulation.None\r\n})\r\nexport class MdlDataGridComponent {\r\n    @Input('grid-model') public model: IMdlDataGrid;\r\n    @Input('grid-model-selected') public selected: Array<IMdlDataGridModel>;\r\n    @Output('grid-model-selectionChanged') public selectionChange = new EventEmitter();\r\n\r\n    @Input('selectable') public selectable: boolean = false;\r\n    public allSelected = false;\r\n    constructor() { }\r\n\r\n    public isAllSelected() {\r\n        return this.model.data.every(data => data.selected);\r\n    }\r\n\r\n    protected toogleAll() {\r\n        let selected = !this.isAllSelected();\r\n        this.model.data.forEach(data => data.selected = selected);\r\n        this.updateSelected();\r\n    }\r\n\r\n    private updateSelected() {\r\n        this.selected = this.model.data.filter(data => data.selected);\r\n        this.selectionChange.emit({ value: this.selected });\r\n    }\r\n\r\n    protected selectionChanged(data) {\r\n        this.updateSelected();\r\n    }\r\n}\r\n```"}}
{"actor":{"display_login":"wujun4code"}}