데이터가 추가 될 때 갑자기 크기가 조정되는 테이블 열

Question

본질적으로 외부 CSS가없는 독립 실행 형 구성 요소로 작동하는 각도 구성 요소로 크기 조정 가능한 열이있는 테이블을 작성했습니다.

그러나 내가에서 기본 템플릿을 사용하여 제작 된 프로젝트로 이동 : 여기에 이동 한 후 https://github.com/akveo/ngx-admin

, ngOnInit에 정의 된 폭은 불균등하게 확산 곳, 내가하려고 할 때 그들을 이동 그들은 움직이지 않는다.

테이블은 내 바닐라 각형 응용 프로그램에서 완벽하게 작동하지만 ngx-admin으로 이동하면 데이터가 추가되면 망가집니다.

사진 (전) (후)

사진 :

HTML :

<div class='container'> 
<table #table> 
    <tr> 
    <th *ngFor="let column of columns; let i = index" [ngClass]="'col-header'" [attr.id]="'col-header-' + i"> 
     <button> 
     <mat-icon (mousedown)="clicked($event)" class="icon">compare_arrows</mat-icon> 
     </button> 
     <div (overflow)="overflow()"> 
     {{ column.title }} 
     </div> 
    </th> 
    <th id="col-header-actions" *ngIf="actionModules.length !== 0" [colSpan]="actionModules.length" class="col-header"> 
     {{ settings.actions.columnTitle }} 
    </th> 
    </tr> 
    <tr *ngFor="let datum of dataShowing"> 
    <td *ngFor="let column of columns; let i = index" [ngClass]="'col-' + i"> 
     <div (overflow)="overflow()" [ngClass]="'col-div-' + i"> 
      {{ datum[column.name] }} 
     </div> 
    </td> 
    <td *ngIf="settings.actions.edit"> 
     <button class="action-icon"> 
     <mat-icon (mousedown)="edit(datum)" class="icon">mode_edit</mat-icon> 
     </button> 
    </td> 
    <td *ngIf="settings.actions.delete"> 
     <button class="action-icon"> 
     <mat-icon (mousedown)="delete(datum)" class="icon">delete</mat-icon> 
     </button> 
    </td> 
    </tr> 
    <tr *ngIf="!hasData"> 
    <td [colSpan]="columns.length + 1" > 
     <div id="no-data"> 
     No Data 
     </div> 
    </td> 
    </tr> 
</table> 
</div> 

CSS :

table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #e2e2e2a6; 
    text-align: left; 
    padding: 10px; 
    position: relative; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

td { 
    height: 1.25em; 
} 


tr { 
    padding: 5px; 
    &:nth-child(odd) { 
     background-color: #ffffff; 
    } 
    &:nth-child(even) { 
     background-color: #f5f5f5; 
    } 
    &:not(:nth-child(1)):hover { 
     background-color: #eaf5ff; 
    } 
} 

th button{ 
    float: right; 
    background-color: #ffffff; 
} 


button{ 
    z-index: 1; 
    position: relative; 
    display: block; 
    background: transparent; 
    border: none; 
    &:hover { 
     border: none; 
    } 
    &:action { 
     border: none; 
    } 
} 

th div { 
    position: absolute; 
    height: 1em; 
    overflow: hidden; 
    word-break: break-all; 
    float: left; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    transform: translateY(30%); 
} 


td div { 
    position: absolute;  
    height: 1em; 
    overflow: hidden; 
    word-break: break-all; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    top: 0.5em; 
    width: auto; 
    transform: translateY(30%); 
} 

mat-icon {  
    color: #b9dfff; 
} 


.container { 
    width: 100%; 
    height: 800px; 
} 

#no-data { 
    width: 100%; 
} 

.action-icon { 
    float: none; 
    margin: auto; 
} 

#col-header-actions { 
    text-align: center; 
} 

TS :

import { Component, OnInit, Input, ElementRef, Renderer, ViewChild, HostListener} from '@angular/core'; 
import { AfterViewInit, DoCheck } from '@angular/core/src/metadata/lifecycle_hooks'; 

@Component({ 
    selector: 'smart-tabl', 
    templateUrl: './smart-tabl.component.html', 
    styleUrls: ['./smart-tabl.component.scss'] 
}) 
export class SmartTablComponent implements OnInit, AfterViewInit, DoCheck { 
    @Input() settings: any; 
    @Input() data: any; 
    columns: any; 
    dataShowing: any; 
    @ViewChild('table') table: ElementRef; 
    lastMouseX: number; 
    lastMouseY: number; 
    curDragX: number; 
    curDragY: number; 
    dragging: boolean; 
    originalColumnWidth: number; 
    adjacentColumnWidth: number; 
    adjacentColumn: any; 
    column: any; 
    hasData: boolean; 
    actionModules: any; 


    constructor(private el:ElementRef) { 
    } 

    ngOnInit() { 
    this. actionModules = []; 
    let settings = this.settings; 
    let columns = []; 
    Object.keys(settings.columns).forEach((key) => { 
     settings.columns[key].name = key; 
     columns.push(settings.columns[key]); 
    }); 
    this.columns = columns; 
    this.hasData = (this.columns.length !== 0); 
    this.dataShowing = this.data; 
    if (!this.settings.actions.hasOwnProperty('delete')) { 
     this.settings.actions.delete = true; 
     this.actionModules.push("delete"); 
    } 
    if (!this.settings.actions.hasOwnProperty('edit')) { 
     this.settings.actions.edit = true; 
     this.actionModules.push("edit"); 
    } 
    } 

    ngAfterViewInit() { 
    let headers: any = document.querySelectorAll(".col-header"); 
    for (let i = 0; i < headers.length; i++) { 
     if (headers[i].attributes.id.nodeValue === "col-header-actions") { 
     headers[i].style.width = (this.actionModules.length * 5) + "%"; 
     } else { 
     headers[i].style.width = ((100 - (this.actionModules.length * 5))/(this.columns.length))+"%"; 
     let divs: any = document.querySelectorAll(".col-div-" + i); 
     for (let j = 0; j < divs.length; j++) { 
      divs[j].style.width = ((headers[i].clientWidth)*0.9) + "px"; 
     } 
     } 
    } 
    } 

    ngDoCheck() { 
    if (this.data.length === 0){ 
     this.hasData = false; 
    } else { 
     this.hasData = true; 
    } 
    } 

    @HostListener('mouseup') released(event) { 
    this.dragging = false; 
    } 

    add(item) { 
    this.data.push(item); 
    } 

    clicked(event) { 
    this.lastMouseX = event.clientX; 
    this.lastMouseY = event.clientY; 
    this.dragging = true; 
    this.column = event.target.parentNode.parentNode; 
    this.originalColumnWidth = parseInt(this.column.style.width, 10); 
    let id = this.column.attributes.id.nodeValue; 
    let idNum = parseInt(id[id.length - 1]) + 1 
    let query = "col-header-" + (idNum) 

    if (idNum === this.columns.length) { 
     query = "col-header-actions"; 
    } 
    this.adjacentColumn = document.getElementById(query); 
    this.adjacentColumnWidth = parseInt(this.adjacentColumn.style.width, 10); 
    } 

    @HostListener('mousemove', ['$event']) mouseMoved(event) { 
    this.curDragX = event.clientX; 
    this.curDragY = event.clientY; 
    let percentageChange = ((this.lastMouseX-this.curDragX)/parseInt(this.table.nativeElement.clientWidth, 10))*100; 
    if (this.dragging && 
     this.originalColumnWidth - (percentageChange) > 6 && 
     this.originalColumnWidth - (percentageChange) < 100 && 
     this.adjacentColumnWidth + (percentageChange) > 6 && 
     this.adjacentColumnWidth + (percentageChange) < 100) { 

     this.column.lastElementChild.style.width = ((this.column.clientWidth - this.column.firstElementChild.clientWidth)*0.8) + "px"; 

     this.column.style.width = (this.originalColumnWidth - (percentageChange) + "%"); 

     let id = this.column.attributes.id.nodeValue; 
     //change adjacent columns 
     this.adjacentColumn.style.width = (this.adjacentColumnWidth + (percentageChange) + "%"); 
     let adjacentId = this.adjacentColumn.attributes.id.nodeValue; 
     let adjDivs: any = document.querySelectorAll(".col-div-" + adjacentId[adjacentId.length - 1]); 
     for (let i = 0; i < adjDivs.length; ++i) { 
     adjDivs[i].style.width = (this.adjacentColumn.clientWidth) + "px"; 
     } 

     //change inner div sizing 

     let divs: any = document.querySelectorAll(".col-div-" + id[id.length - 1]); 
     for (let i = 0; i < divs.length; ++i) { 
     divs[i].style.width = (this.column.clientWidth) + "px"; 
     } 
    } 
    } 
    filter() { 
    this.dataShowing = this.data; 
    } 

    edit(item) { 
    console.log(item); 
    } 

    delete(item) { 
    const index = this.data.indexOf(item); 
    this.data.splice(index, 1); 
    console.log(this.data.length); 
    } 
} 

Answer 1

이미 ngx-admin이 col- (열 번호)에 대해 css를 사용했기 때문에 마음이 어지럽 혀서 이름이 바뀌었고 정상적으로 작동했습니다.