Configure if columns can select row (Fixes #7)
This commit is contained in:
parent
b8960b0eb2
commit
7345e2ed27
@ -4,7 +4,7 @@ root = true
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
indent_size = 4
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ztimson/ng-datatable",
|
||||
"version": "1.9.7",
|
||||
"version": "1.10.7",
|
||||
"homepage": "https://github.com/ztimson/ng-datatable",
|
||||
"license": "Apache-2.0",
|
||||
"author": {
|
||||
|
@ -3,6 +3,7 @@ import {TemplateRef} from "@angular/core";
|
||||
export interface Column {
|
||||
aggregate?: (rows: any[]) => any;
|
||||
cssClass?: string; // CSS to add to column
|
||||
canSelect?: boolean;
|
||||
hide?: boolean; // Hide column
|
||||
hideMobile?: boolean; // Hide column on mobile
|
||||
initialSort?: 'asc' | 'desc'; // Sort this column initially
|
||||
|
@ -25,16 +25,16 @@
|
||||
</thead>
|
||||
<tbody class="ngdt-body">
|
||||
<ng-container *ngFor="let row of pagedData; let i = index">
|
||||
<tr class="ngdt-row" [ngClass]="{'active': selectedRows.has(i)}" (click)="updateSelected(i)">
|
||||
<td *ngIf="showCheckbox && selectionMode !== null" class="ngdt-checkbox">
|
||||
<tr class="ngdt-row" [ngClass]="{'active': selectedRows.has(i)}">
|
||||
<td *ngIf="showCheckbox && selectionMode !== null" class="ngdt-checkbox" (click)="updateSelected(i)">
|
||||
<input type="checkbox" [checked]="selectedRows.has(i)"/>
|
||||
</td>
|
||||
<td *ngIf="expandedTemplate" class="ngdt-expand">
|
||||
<td *ngIf="expandedTemplate" class="ngdt-expand" (click)="updateSelected(i)">
|
||||
<span *ngIf="!selectedRows.has(i)">►</span>
|
||||
<span *ngIf="selectedRows.has(i)">▼</span>
|
||||
</td>
|
||||
<ng-container *ngFor="let c of columns">
|
||||
<td *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" class="ngdt-cell">
|
||||
<td *ngIf="c.hide !== true && !(c.hideMobile === true && width < mobileBreakpoint)" class="ngdt-cell" (click)="updateSelected(i, c)">
|
||||
<ng-template #defaultTemplate let-value="value">{{value}}</ng-template>
|
||||
<ng-template [ngTemplateOutlet]="c.template || defaultTemplate"
|
||||
[ngTemplateOutletContext]="{object: row, value: _dotNotation(row, c.property)}">
|
||||
|
@ -38,16 +38,21 @@ export class NgDatatableComponent implements OnInit {
|
||||
width = window.innerWidth; // Width of the screen. Used for hiding mobile columns
|
||||
|
||||
// Fields ============================================================================================================
|
||||
get count(): number { return this.processedData ? this.processedData.length : 0; } // Number of rows after filtering
|
||||
get count(): number {
|
||||
return this.processedData ? this.processedData.length : 0;
|
||||
} // Number of rows after filtering
|
||||
private _data: any[] = []; // Original data entered into table
|
||||
get data(): any[] { return this.processedData; } // Return the processed data
|
||||
get data(): any[] {
|
||||
return this.processedData;
|
||||
} // Return the processed data
|
||||
@Input() set data(data: any[]) {
|
||||
this._data = data;
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
// ===================================================================================================================
|
||||
constructor() { }
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// Look through columns for an initial sort
|
||||
@ -100,7 +105,9 @@ export class NgDatatableComponent implements OnInit {
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) { this.width = event.target.innerWidth; }
|
||||
onResize(event) {
|
||||
this.width = event.target.innerWidth;
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.processing.emit(this.processedData);
|
||||
@ -152,8 +159,9 @@ export class NgDatatableComponent implements OnInit {
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
updateSelected(index: number) {
|
||||
updateSelected(index: number, column?: Column) {
|
||||
if (this.selectionMode == null) return;
|
||||
if (column && column.canSelect === false) return;
|
||||
|
||||
if (this.selectionMode == 'single') {
|
||||
let alreadySelected = this.selectedRows.has(index);
|
||||
|
@ -61,7 +61,7 @@ export class AppComponent implements OnInit {
|
||||
return `Males: ${total.M}, Females: ${total.F}`;
|
||||
}
|
||||
},
|
||||
{label: 'Age', property: 'age', initialSort: 'desc', hideMobile: true, template: this.ageTemplate}
|
||||
{label: 'Age', canSelect: false, property: 'age', initialSort: 'desc', hideMobile: true, template: this.ageTemplate}
|
||||
];
|
||||
|
||||
this.search.subscribe(text => {
|
||||
|
Loading…
Reference in New Issue
Block a user