Table Columns Unexpectedly Resizing when Data is Added - html

Question

So essentially I wrote a table with resizeable columns as an angular component that worked as intended as a standalone component with no external CSS.
However I moved it into a project I was making using the base template from:
https://github.com/akveo/ngx-admin
After I moved in here, the widths which were defined at ngOnInit where unevenly spread, and when I tried to move them they some not move.
As I said the table works perfectly fine on my own vanilla angular app, however when I move it to ngx-admin it messes up once data is added.
Picture (before):
Picture (after):
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

turns out the ngx-admin already had css for col-(column number), and it was messing up mind, so i changed my naming and it worked fine.