Currently i have a data table with hard coded column headers and filling in data.. I would like to change this table to make it dynamic so the user can pick the columns to build the table. I would like to know how or in what way i will have to change my json object to ensure dynamic column data table creation.
This is what i have tried but the data is not being loaded.
<table>
<thead>
<tr>
<th *ngFor="let col of columnArray">{{col}}</th>
</tr>
</thead>
<table>
<tbody>
<tr *ngFor="let col of columnArray">
<td *ngFor="let data of columnData"> {{col.data}} </td>
</tr>
</tbody>
Currently since my data for the table comes from one object with hard coded headers here is my current working object:
data = [ {'id': 'idValue', 'name': 'nameValue', 'date': 'dateValue', 'description': 'descriptionValue'}, ...
]
but since i don't know what columns the user will pick to create the table it may be columns: id, name, description. Or columns: id, name. I need to have the data flexible so that when the user picks which ever columns to display in a table
Working format of the data:
columnArray = [ {'header': 'headerValue', 'data': 'dataValue'}, ...
]
Then the template can be:
<table>
<thead>
<tr><th *ngFor="let col of columnArray">{{col.header}}></th></tr>
</thead>
<tbody>
<tr>
<td *ngFor="let col of columnArray"> {{col.data}} </td>
</tr>
</tbody>
</table>
If you can provide the data format more apt solution can be provided.
EDIT#1:
Based on your data format, I'd extract keys from an object in your data array for headers.
headers = Object.keys(data[0]);
Then the html should be:
<table>
<thead>
<tr><th *ngFor="let col of headers">{{col}}></th></tr>
</thead>
<tbody>
<tr *ngFor="let obj of data">
<td *ngFor="let col of headers"> {{obj[col]}} </td>
</tr>
</tbody>
</table>
Related
I am receiving the following data from an API:
[[9, "Brown", 2], [1, "Amy", 1]]
I want to show it in a table format in my Angular app. I have tried the following code, but I think it's not the right way to do it.
<tbody>
<tr *ngFor="let user of report">
<td>{{user[0]}}</td>
<td>{{user[1]}}</td>
<td>{{user[2]}}</td>
</tr>
</tbody>
It is array of array to you need to iterate two for loop in you case like this.
<table>
<tbody>
<tr *ngFor="let user of data">
<td *ngFor="let e of user">{{ e }}</td>
</tr>
</tbody>
</table>
I have an array of objects with nested arrays as shown below. How can I print the nested array values in a table using ngFor.
The array looks as follows:
I am using a table to print this values so I can export the table to Excel sheet.
The table looks as follows:
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Hours</th>
<th>Dates</th>
<th>Project Codes</th>
</tr>
</thead>
<tbody class="tbody" *ngFor="let value of array; let i = index">
<tr *ngFor="let item of array[i].item; let dateValue of array[i].datesArray; let h of array[i].hours">
<td>{{h}}</td>
<td>{{dateValue}}</td>
<td>{{value.projectCodeInput}}</td>
</tr>
</tbody>
</table>
I am using multiple arrays on single tag in ngFor like this:
{*ngFor="let item of array[i].item; let dateValue of array[i].datesArray; let h of array[i].hours"}
I know this is wrong way, but somehow the hours prints in the output in both places overriding the dateValue in second column.
Is there a way to print the values from hours, dateValue array in the same element(TABLE)?
Instead of having multiple inputs to the *ngFor directive, you could move the let i=index to the inner loop and use it to get the values.
I assume all the sub-arrays will always be of equal length i.e. hours, datesArray and item array will always be of equal length.
If you wish to span the projectCodeInput property across multiple rows since it'll be the same for each element of the parent array, you could do so using [attr.rowspan] property and first local variable of the *ngFor directive. The check is to make sure the span element is rendered only once for the loop.
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Hours</th>
<th>Dates</th>
<th>Project Codes</th>
</tr>
</thead>
<tbody class="tbody" *ngFor="let element of arr">
<tr *ngFor="let item of element.item; let i=index; let f=first">
<td>{{element.hours[i]}}</td>
<td>{{element.datesArray[i]}}</td>
<td *ngIf="f" [attr.rowspan]="element.item.length">{{element.projectCodeInput}}</td>
</tr>
</tbody>
</table>
Working example: Stackblitz
You could use the index of the inner loop and get the values with this index z:
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>Hours</th>
<th>Dates</th>
<th>Project Codes</th>
</tr>
</thead>
<tbody class="tbody" *ngFor="let value of array; let i = index">
<tr *ngFor="let item of array[i].item; let z = index">
<td>{{array[i].hours[z]}}</td>
<td>{{array[i].datesArray[z]}}</td>
<td>{{value.projectCodeInput}}</td>
</tr>
</tbody>
</table>
What would be the best way to dynamically add an HTML element, such as another column onto a basic HTML table?
I want to have a button below the table, and if the user were to click the button, the event would add the same amount of rows already in the table and add another column. I would want to support about 5 extra columns being added to the table.
Here's my HTML table as of right now:
<table>
<thead>
<tr>
<th id="row-tag"></th>
<th id="option-column">Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td id="row-tag">P</td>
<td id="option-column">{{ p }}</td>
</tr>
<tr id="row-tag">
<td>
<app-a-p (saveButtonClick)="toggleAP($event)"
[modModalValues]="modModalValues">
</app-a-p>
</td>
<td id="option-column">
<div class="input-group input-group-sm">
$<input
*ngIf="toggleAP==true"
type="text"
name="aP"
size="10"
disabled
value=""
/>
<input
*ngIf="toggleAP==false"
type="text"
name="aP"
size="10"
[ngModel]="con.pA"
(ngModelChange)="con.pA = $event" appFormatP
(blur)="checkAP($event.target.value);
inputTracker.addModifiedValue('Option 1', $event.target.value)"
/>
</div>
</td>
</tr>
<tr>
<td id="row-tag">L</td>
<td id="option-column">${{l}}</td>
</tr>
<tr>
<td id="row-tag">R</td>
<td id="option-column">${{r}}</td>
</tr>
</tbody>
</table>
I think in Angular, you define table based on your data. for example, you have fields array defining columns, and data array defines the what's actually in the table.
<table >
<thead>
<tr>
<th *ngFor='let key of this.fields'>{{key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of this.data ' >
<td scope="row" *ngFor='let key of this.fields'> {{row[key]}} </td>
</tr>
</tbody>
</table>
when you need a new column, just push a new field into fields. like
fields.push('newcolumn');
when you need a new row, just do:
data.push({col1: '', col2:'', newcolumn: ''});
Look into the insertRow() and insertCell() functions in JavaScript. This alongside an onClick function that you write will let you edit the table.
A good way of generating a table on UI when using angular would be to use 2D-array (row*column) use can have a button using which you can dynamically add values to this array and have another row/column to the table.
Seems to be the same requirement like AngularJS "Vertical" ng-repeat but solution doesn't work for *ngFor
I have this object array that I am trying to bind to an HTML table. Its format is something like below:
[
{
"Animal":"Dog",
"Country":"France",
"Food":"Tofu",
"Car":"Nano",
"Language":"TypeScript"
}
]
Now this can simply be formatted in the default HTML horizontal table way like this:
<table>
<tr>
<th>Animal</th>
<th>Country</th>
<th>Food</th>
<th>Car</th>
<th>Language</th>
</tr>
<tr *ngFor="let data of datas">
<td>{{data.Animal}}</td>
<td>{{data.Country}}</td>
<td>{{data.Food}}</td>
<td>{{data.Car}}</td>
<td>{{data.Language}}</td>
</tr>
</table>
This would create table like below(Please ignore the data in the table;its just to give an idea.):
But how would I create a structure like this with dynamic data(kind of a vertical table):
In Component:
this.arrayOfKeys = Object.keys(this.datas[0]);
html:
<table>
<tr *ngFor="let key of arrayOfKeys">
<th>{{key}}</th>
<td *ngFor="let data of datas">
{{data[key]}}
</td>
</tr>
</table>
Use ng-container if You have data structure similar to groups[].items[].name
So, if You want to add row
<table>
<ng-container *ngFor="let group of groups">
<tr>
<td>{{group.name}}</td>
</tr>
<tr *ngFor="let item of group.items">
<td>{{item.name}}</td>
</tr>
</ng-container>
</table>
Source: https://stackoverflow.com/a/44086855/1840185
I am using thymeleaf as a UI framework. I am pulling data from a database and storing it as an object. When I display my values in a table I have some cells that are blank. Instead of it being blank, how can I enter the values as "NULL"?
<table>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>years in school</th>
</tr>
<tr th:each="student : ${studentinfo}">
<td th:text="${student.id}"></td>
<td th:text="${student.name}"></td>
<td th:text="${student.age}"></td>
<td th:text="${student.years}">NULL</td>
<!-- attempted -->
<td th:text="${student.years != null} ? ${student.years}">NULL</td>
</tr>
</table>
Some students have null in years. But when I am displaying it in my UI, it is just a blank cell. I want to display "NULL" if the cell is blank.
Just need to use the rest of the ternary expression :P
<td th:text = "${student.years != null ? student.years : 'NULL'}" />