Configure if columns can select row (Fixes #7)

.editorconfig

@@ -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
 

projects/ng-datatable/package.json

@@ -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": {

projects/ng-datatable/src/lib/column.ts

@@ -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

projects/ng-datatable/src/lib/ng-datatable.component.html

@@ -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)">
+    <tr class="ngdt-row" [ngClass]="{'active': selectedRows.has(i)}">
-      <td *ngIf="showCheckbox && selectionMode !== null" class="ngdt-checkbox">
+      <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)">&#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)" 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)}">

projects/ng-datatable/src/lib/ng-datatable.component.ts

@@ -38,21 +38,26 @@ 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
-    for(let i = 0; i < this.columns.length; i++) {
+        for (let i = 0; i < this.columns.length; i++) {
-      if(this.columns[i].initialSort) {
+            if (this.columns[i].initialSort) {
                 this.sort(i, (this.columns[i].initialSort == 'desc'));
                 break;
             }
@@ -61,7 +66,7 @@ export class NgDatatableComponent implements OnInit {
 
     // Helpers ===========================================================================================================
     _convertWidth(width) {
-    if(typeof width == 'number') return `${width}px`;
+        if (typeof width == 'number') return `${width}px`;
         return width;
     }
 
@@ -76,38 +81,40 @@ export class NgDatatableComponent implements OnInit {
     }
 
     aggregate(col: Column) {
-    if(!col.aggregate) return '';
+        if (!col.aggregate) return '';
         return col.aggregate(this.processedData.map(row => this._dotNotation(row, col.property)));
     }
 
     changePage(page: number) {
-    if(!this.paginate || page < 1 || page > this.pages.length) return;
+        if (!this.paginate || page < 1 || page > this.pages.length) return;
         this.page = page;
         this.refresh();
         this.pageChanged.emit(this.page);
     }
 
-  clearFilters(update=true) {
+    clearFilters(update = true) {
         this.filters = [];
-    if(update) this.refresh();
+        if (update) this.refresh();
         this.filterChanged.emit(this.filters);
     }
 
     clearSelected() {
         let emit = this.selectedRows.size > 0;
         this.selectedRows.clear();
-    if(emit) this.selectionChanged.emit([]);
+        if (emit) this.selectionChanged.emit([]);
     }
 
     @HostListener('window:resize', ['$event'])
-  onResize(event) { this.width = event.target.innerWidth; }
+    onResize(event) {
+        this.width = event.target.innerWidth;
+    }
 
     refresh() {
         this.processing.emit(this.processedData);
         this.clearSelected();
         this.processedData = this._data;
         this.filters.forEach(f => this.processedData = this.processedData.filter(f));
-    if(this.sortedColumn != null && this.processedData) {
+        if (this.sortedColumn != null && this.processedData) {
             if (this.columns[this.sortedColumn].sortFn) {
                 this.processedData = this.processedData.sort(this.columns[this.sortedColumn].sortFn);
             } else {
@@ -120,10 +127,10 @@ export class NgDatatableComponent implements OnInit {
             if (this.sortedDesc) this.processedData = this.processedData.reverse();
         }
 
-    if(this.paginate && this.processedData) {
+        if (this.paginate && this.processedData) {
             this.pages = Array(Math.ceil(this.processedData.length / this.pageLength)).fill(0).map((ignore, i) => i + 1);
-      if(!this.page) this.page = 1;
+            if (!this.page) this.page = 1;
-      if(this.page > this.pages.length) this.page = this.pages.length;
+            if (this.page > this.pages.length) this.page = this.pages.length;
             this.pagedData = this.processedData.filter((ignore, i) => i >= (this.page - 1) * this.pageLength && i < this.page * this.pageLength);
         } else {
             this.pagedData = this.processedData;
@@ -141,9 +148,9 @@ export class NgDatatableComponent implements OnInit {
         if (!column || column.sort === false) return; // If column is un-sortable return
 
         // Figure out sorting direction if not supplied
-    if(desc === undefined) {
+        if (desc === undefined) {
             desc = false;
-      if(columnIndex == this.sortedColumn) desc = !this.sortedDesc;
+            if (columnIndex == this.sortedColumn) desc = !this.sortedDesc;
         }
         this.sortedColumn = columnIndex;
         this.sortedDesc = desc;
@@ -152,13 +159,14 @@ 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);
             this.selectedRows.clear();
-      if(!alreadySelected) this.selectedRows.add(index);
+            if (!alreadySelected) this.selectedRows.add(index);
         } else {
             if (this.selectedRows.has(index)) {
                 this.selectedRows.delete(index);

src/app/app.component.ts

@@ -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 => {