ztimson/ng-datatable
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
angular.json
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"

1122
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -11,10 +11,10 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/animations": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
@ -26,7 +26,11 @@
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-ng-packagr": "~0.6.8",
"@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",
"@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0",

8
projects/ng-datatable/ng-package.json Normal file
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"
}
}

7
projects/ng-datatable/ng-package.prod.json Normal file
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"
}
}

8
projects/ng-datatable/package.json Normal file
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"
}
}

14
projects/ng-datatable/src/lib/column.ts Normal file
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
}

57
projects/ng-datatable/src/lib/ng-datatable.component.html Normal file
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>

150
projects/ng-datatable/src/lib/ng-datatable.component.ts Normal file
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)));
}
}

14
projects/ng-datatable/src/lib/ng-datatable.module.ts Normal file
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 { }

3
projects/ng-datatable/src/public_api.ts Normal file
View File

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

32
projects/ng-datatable/tsconfig.lib.json Normal file
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"
]
}

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>

8
tsconfig.json
View File

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