Table Resizer (Responsive)

Öncelikle listenin 'comp.component.html' dosyasında bütün divleri içine alacak bir div varsa onu kullanarak, yoksa bütün divleri içine alacak bir div ekleyerek aşağıdaki satır yazılır:

<div (window:resize)="onResize($event)">

İlgili Html'in 'comp.component.ts' dosyasına gidilir ve aşağıdaki satır import edilir.

import { HostListener } from '@angular/core';

Aynı ts dosyasında constructor'a girmeden aşağıdaki satır eklenir. Bu satır resize dinlememiz için eklenmiştir:

@HostListener('window:resize', ['$event']) hostListener: any;
innerWidth: number;

Resize durumunda çalışacak fonksiyonumuz eklenir. Bu metodda 'innerWidth/12' ifadesi değiştirilmelidir. Kaç kolon varsa o adet girilmelidir.

onResize(event) {
		this.innerWidth = window.innerWidth;
		this.inputWidth = innerWidth / 12; // 12 değiştirilecek.
		if(this.inputWidth > 100){
			this.inputWidth = 100;
		}

	}

Örnek olarak aşağıdaki kolonlarda toplam 12 adet header olduğu için üstteki metodda 12 yazdık. Sizde kaç adet varsa o kadar yazmalısınız.

gosterilecekKolonlar = ['SIRA', 'unvan', 'cariTipi', 'kurumsalMi', 'vergiNo', 'faturaAdresi', 'yetkiliAd',  'bakiye', 'ekstre', 'ISLEMLER']; 

ngOnInit içerisinde onResize metodunu çağırmamız gerekecek:

ngOnInit() {

		this.onResize(null);
}

Son olarak, html içerisindeki filtreleme için kullandığımız 'Ara' inputlarındaki mat-form-field alanlarında aşağıdaki değişikliği yapıyoruz.

<mat-form-field [style.width.px]="inputWidth">

Saygılarımla...
Latif Bahadır ALTUN