columnClass: string[] = ['name', 'email', 'phn', 'city', 'state', '', 'w-40'];
<td *ngFor="let col of columnClass" class="pr-20 {{col}}">
string[] is in one component.ts and html is in another component.html
You need to bind to the class to use variables inside of it.
<td *ngFor="let col of columnClass" class="pr-20" [class]="col">
Related
I have the following dynamic Angular material 6 tables.
<table mat-table [dataSource]="animalDataSource" matSort *ngIf="animal && animal.length > 0">
<ng-container *ngFor="let disCol of animalColumns;" matColumnDef="{{disCol}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header >{{disCol}}</th>
<td mat-cell *matCellDef="let rowValue;">{{rowValue[disCol]}}
<button *ngIf="disCol == 'Action'" mat-mini-fab class="delete-icon" (click)="deleteAnimalData(rowValue)">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="animalColumns"></tr>
<tr mat-row *matRowDef="let rowdata; columns: animalColumns;"></tr>
</table>
And here's my script:
this.animals = [];
this.animalColumns = [];
for (var i in animalList) {
this.animal = {
"Id": animalList[i]["_id"],
"Animal": animalList[i].name,
"Created By": animalList[i].createdBy,
"Created On": new Date(animalList[i].dateOfEntry)
}
this.animals.push(this.animal);
}
this.animalDataSource = new MatTableDataSource(this.animals);
for (let displayColName in this.animals[0]) {
this.animalColumns.push(displayColName);
}
this.animalColumns.push("Action");
There are 4 columns in the table. And I don't need the 'Id' column to be displayed in the table. I have tried giving *ngIf and [style.display]='none'. Both are hiding the column with the full-length gap between the columns.
I could have removed the 'Id' field from the object, but I need the value of the 'Id' column when the user clicks on the delete button[method: deleteAnimalData(rowValue)].
Please suggest me, without removing the 'ID' key from the object, how I can hide the column.
The way I was able to make it work is by having an array of objects(say animalObjects) that define all the table columns building the template.
Once they are all defined I have another array that has the name of the columns (animalColumns) to be displayed.
When you need to hide a column then you can remove the item from the 2nd array (animalColumns) while leaving the first (animalObjects) untouched.
You basically have to create the table with all the columns, then update the displaycolumn property with the modified animalColumn array.
stackblitz example here
Just do NOT add the ID to animalColumns, as this array is what defines your columns. See columns: animalColumns in your HTML
I need to use angular material table without model, because I don't know what will come from service.
So I am initializing my MatTableDataSource and displayedColumns dynamically in component like that :
TableComponent :
ngOnInit() {
this.vzfPuanTablo = [] //TABLE DATASOURCE
//GET SOMETHING FROM SERVICE
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;
//FILL TABLE DATASOURCE
var obj = {};
for (let i in this.listecidenKisi ){
for( let v of this.listecidenVazife[i].vazifeSonuclar){
obj[v.name] = v.value;
}
this.vzfPuanTablo.push(obj);
obj={};
}
//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
this.displayedColumns.push(v);
}
//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}
The most important part of code is here :
for( let v in this.vzfPuanTablo[0]) {
this.displayedColumns.push(v);
}
I am creating displayedColumns here dynamically, it means; even I don't know what will come from service, I can show it in table.
For example displayedColumns can be like that:
["one", "two" , "three" , "four" , "five" ]
or
["stack","overflow","help","me]
But it is not problem because I can handle it.
But when I want to show it in HTML, I can't show properly because of
matCellDef thing:
TableHtml :
<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
<mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
<mat-cell *matCellDef="let element "> {{element.disCol}}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
My problem is here:
<mat-cell *matCellDef="let element "> {{element.disCol}} < / mat-cell>
In fact, I want to display element."disCol's value" in the cell, but I don't know how can I do that.
Otherwise, everything is ok except this element."disCol's value" thing.
When I use {{element.disCol}} to display value of element that has disCols's value , all cells are empty like that:
Other example that using {{element}} only:
Also as you can see:
Table datasource is changing dynamically. It means I can't use {{element.ColumnName}} easily, because I don't know even what is it.
First Example's displayedColumns = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];
Second Example's displayedColumns = ['Muhasebe', 'Ders', 'Egitim', 'Harici'];
matHeaderCellDef is correct , because it is using {{disCol}} directly.
But I need to read disCol's value, and display element.(disCol's value) in the cell.
How can I do that ?
I found solution :)
It is very very easy but i could't see at first :)
only like that :
<mat-cell *matCellDef="let element "> {{element[disCol]}}
</mat-cell>
I must use {{element[disCol]}} only in HTML.
Now , everything is ok:)
For a full working example based on #mevaka's
Where jobDetails$ is the array of items.
columns$ is equvilent to Object.keys(jobDetails$[0]) so is just a string[]
<table mat-table [dataSource]="jobDetails$ | async">
<ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}">
<th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
<td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr>
<tr mat-row *matRowDef="let row; columns: (columns$ | async)"></tr>
</table>
I've tried my best to boil a dynamic table down to the minimum. This example will display any columns given an array of flat objects with any keys. Note how the first object has an extra "foo" property that causes an entire column to be created. The DATA const could be some data you get from a service. Also, you could add a "column ID -> label" mapping into this if you know some common property names you'll be getting the JSON. See the stachblitz here.
import {Component, ViewChild, OnInit} from '#angular/core';
const DATA: any[] = [
{position: 1, name: 'sdd', weight: 1.0079, symbol: 'H', foo: 'bar'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}
];
#Component({
selector: 'dynamic-table-example',
styleUrls: ['dynamic-table-example.css'],
templateUrl: 'dynamic-table-example.html',
})
export class DynamicTableExample implements OnInit {
columns:Array<any>
displayedColumns:Array<any>
dataSource:any
ngOnInit() {
// Get list of columns by gathering unique keys of objects found in DATA.
const columns = DATA
.reduce((columns, row) => {
return [...columns, ...Object.keys(row)]
}, [])
.reduce((columns, column) => {
return columns.includes(column)
? columns
: [...columns, column]
}, [])
// Describe the columns for <mat-table>.
this.columns = columns.map(column => {
return {
columnDef: column,
header: column,
cell: (element: any) => `${element[column] ? element[column] : ``}`
}
})
this.displayedColumns = this.columns.map(c => c.columnDef);
// Set the dataSource for <mat-table>.
this.dataSource = DATA
}
}
<mat-table #table [dataSource]="dataSource">
<ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
<mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
<mat-cell *cdkCellDef="let row">{{ column.cell(row) }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Here is the simplified example of data I am working with. fruits:['apple','orange','banana'] which is dynamic. The number and types of fruits are not same always.
I have another list seasons:['summer','winter'] which is also dynamic. The number and type of seasons are also not same always.
I need to generate a table. The table has one row for each of the fruit. There will be one column for each season in the table.
For the values of seasons columns I have another object like this:
available: {
summer: ['yes', 'no', 'yes'],
winter: ['yes', 'no', 'no']
}
After the table is generated it would look like this:
Fruits Summer Winter
Apple yes yes
orange no no
Banana yes no
To render this in vue I am using this:
<tr v-repeat="fruit: fruits">
<td v-text="fruit"></td>
<td v-repeat="season: seasons" v-text="available[season][$index]"></td>
</tr>
The problem here is $index gives the index of seasons object. But I need to access the index of fruits object.
How can I access index of fruits object inside inner v-repeat?
I don't know if it's possible to access the fruit $index inside the inner v-repeat, but you could try something like this:
<table>
<tr>
<th>Fruits</th>
<th>Summer</th>
<th>Winter</th>
</tr>
<tr v-repeat="fruit: fruits">
<td v-text="fruit"></td>
<td v-repeat="season: seasons" v-text="isAvailable(fruit, season)"></td>
</tr>
</table>
and
data: {
fruits: [
'apple', 'orange', 'banana'
],
seasons: [
'summer', 'winter'
],
available: {
summer: ['yes', 'no', 'yes'],
winter: ['yes', 'no', 'no']
}
},
methods: {
isAvailable: function (fruit, season) {
var fruitIndex = this.fruits.indexOf(fruit)
return this.available[season][fruitIndex]
}
}
http://codepen.io/pespantelis/pen/BozNWm
<table >
<tr class="odd First"><td>1one Cell</td><td>2one Cell</td><td>3one Cell</td><td>4one Cell</td> </tr>
<tr class="even Second"><td>Two Cell</td><td>2Two Cell</td><td>3Two Cell</td><td>4Two Cell</td></tr>
<tr class="odd Thrid"><td>1Three Cell</td><td>2Three Cell</td><td>3Three Cell</td><td>4Three Cell</td></tr>
<tr class="even Fourth"><td>1Five Cell</td><td>2Five Cell</td><td>3Five Cell</td><td>4Five Cell</td></tr>
</table>
How can i get the class names of the tr. Please suggest me.
To get the class names of all the tags using java.
List<WebElement> list = driver.findElements(By.tagName("tr"));
for(WebElement ele:list){
String className = ele.getAttribute("class");
System.out.println("Class name = "+className);
}
This will print all the class names to the console for all the tags on the web page.
String className = selenium.getAttribute("//html/body/table/tbody/tr[1]/#class");
May be this code might get you the value of the first tag's class name. Let me know if this works.
List0 = []
List1 = driver.find_elements(By.XPATH, '/table/tr')
for element in List1:
name = element.get_attribute('class')
List0.append(name)
print(List0)
I am using DOJO ItemFileReadStore with dojox.grid.DataGrid to show Data Inside a Grid
Please see the Image here
http://imageshare.web.id/viewer.php?file=kdfvrkmn6k7xafmi4jdy.jpg
EMployee.Java
public class Employee {
String name;
String dept;
// Setters and Getters
}
This is My Servlet
response.setContentType("text/x-json;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
List list = new ArrayList();
Employee emp1 = new Employee();
Employee emp2 = new Employee();
emp1.setDept("CSE");
emp1.setName("Vamsi");
emp2.setDept("EEE");
emp2.setName("Raju");
list.add(emp1);
list.add(emp2);
List jsonresponse = new ArrayList();
for (int i = 0; i < list.size(); i++) {
JSONObject nextObject = new JSONObject();
nextObject.put("name", list.get(i));
jsonresponse.add(nextObject);
}
JSONObject json = new JSONObject();
json.put("label", "name");
json.put("items", jsonresponse.toArray());
response.getWriter().write(json.toString());
}
This is MY JSP Page
<body class=" claro ">
<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="http://localhost:8080/Man/MyServlet2"></span>
<table dojoType="dojox.grid.DataGrid" store="store1"
style="width: 100%; height: 500px;">
<thead>
<tr>
<th width="150px" field="name">Name</th>
<th width="150px" field="dept">Dept</th>
</tr>
</thead>
</table>
Please see the Image here
http://imageshare.web.id/viewer.php?file=kdfvrkmn6k7xafmi4jdy.jpg
Please help , Thank you .
+1 for posting the server output (firebug screenshot) in your question. This makes a lot easier for people to help you - for example I can easily see that the data format is still not quite right. You are getting better at both dojo and stackoverflow, it seems!
Remember that the ItemFileReadStore expects the data to be in a particular format. Your servlet is producing:
{label: "name", items: [
{name: {dept: "CSE", name: "Vansi"}},
{name: {dept: "ABC", name: "Abcd"}}
]}
You see you are telling the store that each item's "name" is an object with some properties ("dept" and "name"). This is why the grid shows object Object in the name column. It should be:
{label: "name", items: [
{dept: "CSE", name: "Vansi"},
{dept: "ABC", name: "Abcd"}
]}
I'm not very good with java, but I believe only a small change in your servlet is required:
// The for loop that adds employees to jsonresponse.
for (int i = 0; i < list.size(); i++)
{
// Instead of adding the
Emloyee e = (Employee)list.get(i);
JSONObject nextObject = new JSONObject();
nextObject.put("name", e.getName());
nextObject.put("dept", e.getDept());
jsonresponse.add(nextObject);
}
In fact, it's possible that you can just do json.put("items", list.toArray()); instead of adding each employee to jsonresponse.