Complex Tables in Angular (How to create dynamic) - arrays

Question

In my current project, we have to show complex tables like you see here: https://medium.muz.li/complex-tables-356826d11861 (or see image).
The cells are very dynamic, and all information coming from API. We have about 25 different tables, with the same features and behavior. The solution right now is a component for each table. I found this to be no got approach, as this is not very dynamic and chances are, the codebase of the component could differentiate and so we will have difficulties adding new features, changes, and solving bugs overall tables.
As I understand to solve this in terms of UI I was thinking about the best approach, how the basic building should look like. Like we could create an Array for each table which holds the row, which holds the cells as objects and these objects hold all information about each cell (editable, style, content type, tooltip...).
Advantages: Dynamic, one codebase for all (upcoming) tables, faster implementation of features and changes, ease of manipulating the table (filter, search, sorting, remove/add rows).
What would you suggest?

Answer 1

Your approach is totally fine and surely the way to go.
If you want to go a bit further, you can create components for each type of cells :
TextCell, TextfieldCell, SelectCell, etc ...
and even further have your components loaded dynamically
have a look at ComponentFactoryResolver
then in your data cell Object, add a field with the name of the component.
It's not the easiest to do though but the benefits will be here in term of maintainability

Answer 2

Expanding on Jeremy's answer, you could implement
import { Component } from "#angular/core";
export class Table {
constructor(
public title: string,
public columns: string[],
public rows: Row[]
) {}
}
export class Row {
constructor(public cells: Cell[]) {}
}
export type CellValue = string | number | boolean;
export class Cell {
constructor(public value: CellValue) {}
isText(): boolean {
return typeof this.value === "string";
}
isNumber(): boolean {
return typeof this.value === "number";
}
isBoolean(): boolean {
return typeof this.value === "boolean";
}
}
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "CodeSandbox";
table: Table;
constructor() {
this.table = new Table(
"Table name",
["Country", "State", "Population", "Northern"],
[
new Row([new Cell("AR"), new Cell("BSAS"), new Cell(44490000), new Cell(false)]),
new Row([new Cell("US"), new Cell("CA"), new Cell(328000000), new Cell(true)])
]
);
}
}
and have the template be something like the following:
<table>
<tr>
<th *ngFor="let col of table.columns">{{col}}</th>
</tr>
<tr *ngFor="let row of table.rows">
<td *ngFor="let cell of row.cells">
<input type="text" *ngIf="cell.isText()" [(ngModel)]="cell.value" />
<input type="number" *ngIf="cell.isNumber()" [(ngModel)]="cell.value" />
<input
type="checkbox"
*ngIf="cell.isBoolean()"
[(ngModel)]="cell.value"
/>
</td>
</tr>
</table>
These values will be automatically filled as you write the input because of the [(ngModel)]. Hope it helps you. I created a sample here in case you want this code.