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

Init

Browse Source
This commit is contained in:
Zakary Timson
2018-06-07 12:17:36 -04:00
parent 01090d6a6b
commit 2d1885ccbf
17 changed files with 1494 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/app.component.html
View File

@ -1,20 +1,30 @@
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
Table CSS <input [(ngModel)]="tableCSS">
Selection Mode <select [(ngModel)]="selectionMode">
<option>None</option>
<option>single</option>
<option>multi</option>
</select>
Checkbox <input type="checkbox" [(ngModel)]="checkbox">
Expandable <input type="checkbox" [(ngModel)]="expandable">
<br><br>
<input placeholder="Search" (keyup)="search.next($event.target.value)">
<br>
Selected: {{table.selectedRows.size}}/{{table.processedData.length}}
<ng-datatable #table
[cssClass]="tableCSS"
[columns]="columns"
[data]="data"
[expandedTemplate]="expandable ? expanded : null"
[showCheckbox]="checkbox"
[paginate]="false"
[selectionMode]="selectionMode == 'None' ? null : selectionMode"
(rowSelected)="log($event)">
<ng-template #expanded let-object="object">
Hello {{object.firstName}} {{object.lastName}}, How are you today?
<span *ngIf="object.age < 18">I can see that you are under age.</span>
<span *ngIf="object.age > 84">I can see that you are over the average life expectancy.</span>
</ng-template>
<ng-template #age let-value="value">
<strong [ngClass]="{'text-success': value < 18, 'text-danger': value > 84}">{{value}}</strong>
</ng-template>
</ng-datatable>

60
src/app/app.component.ts
View File

File diff suppressed because one or more lines are too long

6
src/app/app.module.ts
View File

@ -2,13 +2,17 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";
import {NgDatatableModule} from "../../projects/ng-datatable/src/lib/ng-datatable.module";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
BrowserModule,
FormsModule,
NgDatatableModule
],
providers: [],
bootstrap: [AppComponent]

1
src/index.html
View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>