Requesting datatable extention feature (edit header title and sorting should work after updating )

[heloscream]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[*] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

1. I'm dynamicaly generating the columns and rows as, I will mention in my code below
2. On clicking header, I'm able to bring textbox and edit the header name, and update header title Expected behavior Trying to achive After updating the header, it should sort on clicking on header title

Reproduction of the problem I didn't find any related issues, regarding this header title update, and same time sorting as well , there are only inline editing related to rows but no examples related to header title editing

What is the motivation / use case for changing the behavior? I'm using the edit header to represent or use the edited header title name, some else in my code

• Table version: "@swimlane/ngx-datatable": "^10.2.3",

• Angular version: 4.3.6

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript 2.4.2 | ES6 | ES5]

demo code

            <ngx-datatable
                                #mydatatable
                                class="material fullscreen striped"
                                [rows]="rows"
                                [loadingIndicator]="loadingIndicator"
                                [columnMode]="'force'"
                                [headerHeight]="50"
                                [sortType]="'multi'"
                                [footerHeight]="50"
                                [rowHeight]="50"
                                [reorderable]="reorderable"
                                [scrollbarV]="true"
                                [scrollbarH]="true">

                       <ngx-datatable-column *ngFor="let col of columns; let i = index " name="{{col.name}}">
                        <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn" >
                                        <span
                                            (click)="sort()"
                                            title="Double click to edit"
                                            (dblclick)="editing[i + col.name] = true"
                                            *ngIf="!editing[ i + col.name]">
                                        {{col.name}}
                                        </span>
                                        <input
                                            autofocus
                                            (blur)="updateValue($event, col.name, i)"
                                            *ngIf="editing[ i + col.name]"
                                            type="text"
                                            [value]="col.name"
                                        />
                                    </ng-template>
                                        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                            {{row[col.name]}}
                                    </ng-template>
                                </ngx-datatable-column>
                            </ngx-datatable>

[heloscream]

I have made some changes, now on double-click, I can update the header title, but not that particular header, the one I had updated, when I come back clicking the other header than It is sortable, can't understand this nature of datatable

                   <ngx-datatable-column *ngFor="let col of columns; let i = index" name="{{col.name}}" 
                     prop="{{col.name}}" >
                                    <ng-template let-column="column"  let-sort="sortFn"   let-row="row" ngx-
                            datatable-header-template>
                                        <span
                                            (click)="sort()"
                                            title="Double click to edit"
                                            (dblclick)="editing[i +'-'+col.name] = true"
                                            *ngIf="!editing[i +'-'+col.name]">
                                        {{col.name}}
                                        </span>
                                        <input
                                            autofocus
                                            (blur)="updateValue($event, col.name, i)"
                                            *ngIf="editing[i +'-'+col.name]"
                                            type="text"
                                            [value]="col.name"
                                        />

                                    </ng-template>
                                    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                        {{row[col.name]}}
                                    </ng-template>

                                </ngx-datatable-column>