CODEWITHSUNDEEP
javascriptangulartypescriptangular-directive
Gyuzal
Gyuzal

Reputation: 1591

Get column index in table header row in Angular directive

I have a directive that allows users change width of columns in a table:

<table id="mytable">    
     <thead>
            <tr>
                <th [ktResizeColumn]="true" id="myth">
           <tr>
     <thead>
</table>

I'd like to save column widths in local storage once they changed. My problem is that I need to know the index of th being changed, till now I have to use id of th, which I want to get rid of. My directive:

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
    selector: '[ktResizeColumn]',
})
export class ResizeColumnDirective implements OnInit {
    @Input('ktResizeColumn') resizable: boolean;
    private startX: number;
    private startWidth: number;
    private column: HTMLElement;
    private table: HTMLElement;
    private pressed: boolean;
    private width: any;
    private lsKey = 'tableState_';

constructor(private el: ElementRef, private renderer: Renderer2) {
    this.column = this.el.nativeElement;
}

ngOnInit() {
    if (this.resizable) {
        const row = this.renderer.parentNode(this.column);
        const thead = this.renderer.parentNode(row);
        this.table = this.renderer.parentNode(thead);

        const resizer = this.renderer.createElement('span');
        this.renderer.addClass(resizer, 'resize-holder');
        this.renderer.appendChild(this.column, resizer);
        this.renderer.listen(resizer, 'mousedown', this.onMouseDown);
        this.renderer.listen(this.table, 'mousemove', this.onMouseMove);
        this.renderer.listen('document', 'mouseup', this.onMouseUp);
    }

    this.getTableState();
}

saveTableState() {
    if (this.table.id && this.column.id) {
        const model = {
            columnId: this.column.id, //I need column index here
            width: this.width,
        };
        let arr = [];
        const storageData = localStorage.getItem(this.lsKey + this.table.id);

        if (storageData) {
            arr = JSON.parse(storageData);
            arr.forEach((item, index) => {
                if (item.columnId === model.columnId) {
                    arr.splice(index, 1);
                }
            });
        }

        arr.push(model);
        localStorage.setItem(this.lsKey + this.table.id, JSON.stringify(arr));
    }
}

}

Upvotes: 1

Views: 713

Answers (2)

IAfanasov
IAfanasov

Reputation: 4993

It should work like this:

const model = {
    columnId: Array.from(this.renderer.parentNode(this.column).children).indexOf(this.column),
    width: this.width,
};

Upvotes: 1

chenc
chenc

Reputation: 331

<table id="mytable">    
     <thead>
            <tr>
                <th [ktResizeColumn]="true" [ktResizeColumnIndex]="1" id="myth">
           <tr>
     <thead>
</table>

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
    selector: '[ktResizeColumn]',
})
export class ResizeColumnDirective implements OnInit {
    @Input('ktResizeColumn') resizable: boolean;    
    @Input('ktResizeColumnIndex') columnIndex:number;

    private startX: number;
    private startWidth: number;
    private column: HTMLElement;
    private table: HTMLElement;
    private pressed: boolean;
    private width: any;
    private lsKey = 'tableState_';

constructor(private el: ElementRef, private renderer: Renderer2) {
    this.column = this.el.nativeElement;
}

ngOnInit() {
    if (this.resizable) {
        const row = this.renderer.parentNode(this.column);
        const thead = this.renderer.parentNode(row);
        this.table = this.renderer.parentNode(thead);

        const resizer = this.renderer.createElement('span');
        this.renderer.addClass(resizer, 'resize-holder');
        this.renderer.appendChild(this.column, resizer);
        this.renderer.listen(resizer, 'mousedown', this.onMouseDown);
        this.renderer.listen(this.table, 'mousemove', this.onMouseMove);
        this.renderer.listen('document', 'mouseup', this.onMouseUp);
    }

    this.getTableState();
}

saveTableState() {
    if (this.table.id && this.column.id) {
        const model = {
            columnId: this.column.id, //I need column index here
            width: this.width,
        };
        let arr = [];
        const storageData = localStorage.getItem(this.lsKey + this.table.id);

        if (storageData) {
            arr = JSON.parse(storageData);
            arr.forEach((item, index) => {
                if (item.columnId === model.columnId) {
                    arr.splice(index, 1);
                }
            });
        }

        arr.push(model);
        localStorage.setItem(this.lsKey + this.table.id, JSON.stringify(arr));
    }
}

may be you can try like this? but i not try, so i do not confirm that way is correct

Upvotes: 0

Related Questions