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

View File

@ -116,6 +116,46 @@
} }
} }
} }
},
"ng-datatable": {
"root": "projects/ng-datatable",
"sourceRoot": "projects/ng-datatable/src",
"projectType": "library",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ng-datatable/tsconfig.lib.json",
"project": "projects/ng-datatable/ng-package.json"
},
"configurations": {
"production": {
"project": "projects/ng-datatable/ng-package.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ng-datatable/src/test.ts",
"tsConfig": "projects/ng-datatable/tsconfig.spec.json",
"karmaConfig": "projects/ng-datatable/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/ng-datatable/tsconfig.lib.json",
"projects/ng-datatable/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
} }
}, },
"defaultProject": "Sandbox" "defaultProject": "Sandbox"

1122
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -11,10 +11,10 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0", "@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0", "@angular/core": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/animations": "^6.0.0",
"@angular/forms": "^6.0.0", "@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0", "@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0", "@angular/platform-browser": "^6.0.0",
@ -26,7 +26,11 @@
}, },
"devDependencies": { "devDependencies": {
"@angular/compiler-cli": "^6.0.0", "@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-ng-packagr": "~0.6.8",
"@angular-devkit/build-angular": "~0.6.0", "@angular-devkit/build-angular": "~0.6.0",
"ng-packagr": "^3.0.0-rc.2",
"tsickle": ">=0.25.5",
"tslib": "^1.7.1",
"typescript": "~2.7.2", "typescript": "~2.7.2",
"@angular/cli": "~6.0.0", "@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0", "@angular/language-service": "^6.0.0",

View File

@ -0,0 +1,8 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ng-datatable",
"deleteDestPath": false,
"lib": {
"entryFile": "src/public_api.ts"
}
}

View File

@ -0,0 +1,7 @@
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ng-datatable",
"lib": {
"entryFile": "src/public_api.ts"
}
}

View File

@ -0,0 +1,8 @@
{
"name": "ng-datatable",
"version": "1.0.0",
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0"
}
}

View File

@ -0,0 +1,14 @@
import {TemplateRef} from "@angular/core";
export interface Column {
cssClass?: string; // CSS to add to column
hide?: boolean; // Hide column
hideMobile?: boolean; // Hide column on mobile
initialSort?: 'asc' | 'desc'; // Sort this column initially
label?: string; // Column name
property?: string; // object property to provide to cell
sort?: boolean; // Allow sorting
sortFn?: (a: any, b: any) => 1 | 0 | -1; // Custom sorting function
template?: TemplateRef<any>; // TemplateRef to render the column
width?: string; // Width to give column
}

View File

@ -0,0 +1,57 @@
<table [class]="cssClass" [style.table-layout]="tableLayout">
<colgroup>
<col *ngIf="showCheckbox && selectionMode !== null" width="30px">
<col *ngIf="expandedTemplate" width="30px">
<ng-container *ngFor="let c of columns">
<col *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" span="1" [width]="c.width">
</ng-container>
</colgroup>
<thead>
<tr>
<th *ngIf="showCheckbox && selectionMode !== null">
<input *ngIf="selectionMode == 'multi'" type="checkbox" [checked]="processedData.length == selectedRows.size"
(change)="$event.target.checked ? selectAll() : clearSelected()"/>
</th>
<th *ngIf="expandedTemplate"></th>
<ng-container *ngFor="let c of columns; let i = index">
<th *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" [class]="c.cssClass"
style="cursor: pointer" (click)="sort(i)">
<span *ngIf="sortedColumn == i && !sortedDesc">&#9650;</span>
<span *ngIf="sortedColumn == i && sortedDesc">&#9660;</span>
{{c.label}}
</th>
</ng-container>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let row of pagedData; let i = index">
<tr [ngClass]="{'active': selectedRows.has(i)}" (click)="updateSelected(i)">
<td *ngIf="showCheckbox && selectionMode !== null"><input type="checkbox" [checked]="selectedRows.has(i)"/></td>
<td *ngIf="expandedTemplate">
<span *ngIf="!selectedRows.has(i)">&#9658;</span>
<span *ngIf="selectedRows.has(i)">&#9660;</span>
</td>
<ng-container *ngFor="let c of columns">
<td *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)">
<ng-template #defaultTemplate let-value="value">{{value}}</ng-template>
<ng-template [ngTemplateOutlet]="c.template || defaultTemplate"
[ngTemplateOutletContext]="{object: row, value: row[c.property]}">
</ng-template>
</td>
</ng-container>
</tr>
<tr *ngIf="expandedTemplate && selectedRows.has(i)">
<td [attr.colspan]="columns.length + (showCheckbox ? 1 : 0) + (expandedTemplate ? 1 : 0)">
<ng-template [ngTemplateOutlet]="expandedTemplate" [ngTemplateOutletContext]="{object: row}"></ng-template>
</td>
</tr>
</ng-container>
</tbody>
</table>
<nav *ngIf="paginate" aria-label="Page navigation">
<ul class="pagination">
<li class="page-item" [ngClass]="{'disabled': page <= 1}" (click)="changePage(page - 1)"><a class="page-link">Previous</a></li>
<li *ngFor="let i of pages" class="page-item" [ngClass]="{'active': page == i}"><a class="page-link" (click)="changePage(i)">{{i}}</a></li>
<li class="page-item" [ngClass]="{'disabled': page >= pages.length}" (click)="changePage(page + 1)"><a class="page-link">Next</a></li>
</ul>
</nav>

View File

@ -0,0 +1,150 @@
import {Component, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef} from '@angular/core';
import {Column} from './column';
@Component({
selector: 'ng-datatable',
templateUrl: 'ng-datatable.component.html'
})
export class NgDatatableComponent implements OnInit {
// Inputs ============================================================================================================
@Input() cssClass: string; // CSS class to add to table element
@Input() columns: Column[] = []; // Columns to display on table
@Input() expandedTemplate: TemplateRef<any>; // Template to use when expanding columns
@Input() mobileBreakpoint: number = 768; // Hide mobile false columns when screen size is less than
@Input() pageLength: number = 20; // Number of rows per page
@Input() page: number = 1; // Current page number
@Input() paginate: boolean = true; // Should we paginate results
@Input() selectionMode: null | 'single' | 'multi'; // Allow selecting no/single/multiple rows
@Input() showCheckbox: boolean; // Selection checkboxes
@Input() tableLayout: 'auto' | 'fixed' = 'auto'; // How column widths are decided
// Outputs ===========================================================================================================
@Output() filterChanged = new EventEmitter<any[]>(); // Output when filters change
@Output() pageChanged = new EventEmitter<number>(); // Output when page is changed
@Output() selectionChanged = new EventEmitter<any[]>(); // Output when selected rows changes
// Properties ========================================================================================================
filters: ((el?: any, i?: number, arr?: any[]) => boolean)[] = []; // Array of process functions to apply to data
pages: number[] = []; // Array of possible pages
pagedData: any[] = []; // The data for the current
processedData: any[]; // rows left after filtering
selectedRows = new Set<number>(); // Keep track of selected rows
sortedColumn: number; // Column currently being sorted
sortedDesc = false; // Is the sorted column being sorted in ascending or descending order
width = window.innerWidth; // Width of the screen. Used for hiding mobile columns
// Fields ============================================================================================================
get count(): number { return this.processedData.length; } // Number of rows after filtering
private _data: any[] = []; // Original data entered into table
get data(): any[] { return this.processedData; } // Return the processed data
@Input() set data(data: any[]) {
this._data = data;
this.process();
}
// ===================================================================================================================
constructor() { }
ngOnInit() {
// Look through columns for an initial sort
for(let i = 0; i < this.columns.length; i++) {
if(this.columns[i].initialSort) {
this.sort(i, (this.columns[i].initialSort == 'desc'));
break;
}
}
}
// Helpers ===========================================================================================================
private process() {
this.clearSelected();
this.processedData = this._data;
this.filters.forEach(f => this.processedData = this.processedData.filter(f));
if(this.sortedColumn != null) {
if (this.columns[this.sortedColumn].sortFn) {
this.processedData = this.processedData.sort(this.columns[this.sortedColumn].sortFn);
} else {
this.processedData = this.processedData.sort((a: any, b: any) => {
if (a[this.columns[this.sortedColumn].property] > b[this.columns[this.sortedColumn].property]) return 1;
if (a[this.columns[this.sortedColumn].property] < b[this.columns[this.sortedColumn].property]) return -1;
return 0;
});
}
if (this.sortedDesc) this.processedData = this.processedData.reverse();
}
if(this.paginate) {
this.pages = Array(Math.ceil(this.processedData.length / this.pageLength)).fill(0).map((ignore, i) => i + 1);
this.pagedData = this.processedData.filter((ignore, i) => i >= (this.page - 1) * this.pageLength && i < this.page * this.pageLength);
} else {
this.pagedData = this.processedData;
}
}
addFilter(...filters: ((row?: any, index?: number, arr?: any[]) => boolean)[]) {
this.filters = this.filters.concat(filters);
this.process();
this.filterChanged.emit(this.filters);
}
changePage(page: number) {
if(!this.paginate || page < 1 || page > this.pages.length) return;
this.page = page;
this.process();
this.pageChanged.emit(this.page);
}
clearFilters(update=true) {
this.filters = [];
if(update) this.process();
this.filterChanged.emit(this.filters);
}
clearSelected() {
let emit = this.selectedRows.size > 0;
this.selectedRows.clear();
if(emit) this.selectionChanged.emit([]);
}
@HostListener('window:resize', ['$event'])
onResize(event) { this.width = event.target.innerWidth; }
selectAll() {
this.processedData.forEach((ignore, i) => this.selectedRows.add(i));
this.selectionChanged.emit(this.processedData);
}
sort(columnIndex: number, desc?: boolean) {
let column = this.columns[columnIndex];
if (!column || column.sort === false) return; // If column is un-sortable return
// Figure out sorting direction if not supplied
if(desc === undefined) {
desc = false;
if(columnIndex == this.sortedColumn) desc = !this.sortedDesc;
}
this.sortedColumn = columnIndex;
this.sortedDesc = desc;
// Preform sort
this.process();
}
updateSelected(index: number) {
if (this.selectionMode == null) return;
if (this.selectionMode == 'single') {
let alreadySelected = this.selectedRows.has(index);
this.selectedRows.clear();
if(!alreadySelected) this.selectedRows.add(index);
} else {
if (this.selectedRows.has(index)) {
this.selectedRows.delete(index);
} else {
this.selectedRows.add(index);
}
}
this.selectionChanged.emit(this.processedData.filter((row, i) => this.selectedRows.has(i)));
}
}

View File

@ -0,0 +1,14 @@
import {NgModule} from '@angular/core';
import {NgDatatableComponent} from './ng-datatable.component';
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
@NgModule({
imports: [
BrowserModule,
FormsModule,
],
declarations: [NgDatatableComponent],
exports: [NgDatatableComponent]
})
export class NgDatatableModule { }

View File

@ -0,0 +1,3 @@
export * from './lib/column'
export * from './lib/ng-dataTable.component';
export * from './lib/ng-dataTable.module';

View File

@ -0,0 +1,32 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"module": "es2015",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"types": [],
"lib": [
"dom",
"es2015"
]
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"flatModuleId": "AUTOGENERATED",
"flatModuleOutFile": "AUTOGENERATED"
},
"exclude": [
"**/*.spec.ts"
]
}

View File

@ -1,20 +1,30 @@
<!--The content below is only a placeholder and can be replaced.--> Table CSS <input [(ngModel)]="tableCSS">
<div style="text-align:center"> Selection Mode <select [(ngModel)]="selectionMode">
<h1> <option>None</option>
Welcome to {{ title }}! <option>single</option>
</h1> <option>multi</option>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </select>
</div> Checkbox <input type="checkbox" [(ngModel)]="checkbox">
<h2>Here are some links to help you start: </h2> Expandable <input type="checkbox" [(ngModel)]="expandable">
<ul> <br><br>
<li> <input placeholder="Search" (keyup)="search.next($event.target.value)">
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> <br>
</li> Selected: {{table.selectedRows.size}}/{{table.processedData.length}}
<li> <ng-datatable #table
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> [cssClass]="tableCSS"
</li> [columns]="columns"
<li> [data]="data"
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> [expandedTemplate]="expandable ? expanded : null"
</li> [showCheckbox]="checkbox"
</ul> [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>

File diff suppressed because one or more lines are too long

View File

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

View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <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> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>

View File

@ -15,6 +15,14 @@
"lib": [ "lib": [
"es2017", "es2017",
"dom" "dom"
],
"paths": {
"ng-datatable": [
"dist/ng-datatable"
],
"ng-datatable/*": [
"dist/ng-datatable/*"
] ]
} }
}
} }