I need to present in Html a dynamic table that I don't know what is the template of each row:
Some times it contains 2 columns, sometimes 4...
I need something like this:
<div>
<h1>Angular HTML Table Example</h1>
<table>
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
</table>
</div
And instead of:
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td></tr>
somethong like:
<tr *ngFor="let item of ItemsArray">
<ngFor="let property of item.structure>
<td>{{ property }}</td>
Do you have any advice for me?
Thanks
You can get keys of list item by using below code and render header column
Object.keys(list);
This is stackblitz code
You can see required code in Product component file. I hope it works for you scenario
This is the solution:
<tbody class="f">
<ng-container *ngFor="let message of this.allMessages | filter:term | paginate: config ;let i = index">
<tr >
<td>{{ i+1 }}</td>
<ng-container *ngFor = "let j of this.messageIndex">
<td>{{message.data[0][j]}}</td>
</ng-container>
</tr>
</ng-container>
</tbody>
Related
I'm trying to create a hierarchical table in Vue.js, this should be such a base therefore. However, I don't want to show the table with the data. The error would be here:
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
If I remove this whole section, I can see the table
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Parent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.parent }}</td>
<td>
<button #click="toggleChildren(item)">Toggle Children</button>
</td>
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
Vue.js script and my whole mini-project:
https://jsfiddle.net/barabas/jrcufeah/
The problem was you cannot use v-if and v-for on the same node like I did so this is how I fix it
<template v-if="item.childrenVisible">
<tr v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</template>
I split up the v-for and v-if to two different node template and tr
I want do report with HTML and put one column as title and supress repetition. I'm using Laravel 5.8.
This is my view code.
<div class="container">
<div class="table-responsive">
<div class="table table-striped table-bordered">
<table>
<thead>
<tr>
<th>Leito</th>
<th>Nº Atendimento</th>
<th>Dt. Atendimento</th>
<th>Paciente</th>
<th>Idade</th>
<th>CID Principal</th>
<th>CID</th>
<th>Médico</th>
<th>Dias internado</th>
<th>Observação</th>
</tr>
</thead>
<tbody>
#foreach($analytic as $patient)
<tr><td colspan="11"><strong>Setor: </strong>{{ $patient->setor }}</td></tr>
<tr class="{{ $patient->corlinha }}">
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
<td>{{ $patient->idade }}</td>
<td>{{ $patient->cidp }}</td>
<td>{{ $patient->cid }}</td>
<td>{{ $patient->medico }}</td>
<td>{{ $patient->dias }}</td>
<td>{{ $patient->observacao }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
And this is my result:
Result
When "Setor" is same i need agroup them.
I need something like this:
Result that i need
Thank´s
In your case you need to groupBy your collection. I am giving an example.
Controller Code:
public function index()
{
$$analytic = Model::all()->groupBy('setor');
return view('view', compact('analytic '));
}
In blade your table will look like something:
<table>
#foreach ($analytic as $key => $data)
<tr>
<th colspan="10">{{ $key }}</th>
</tr>
#foreach ($data as $patient)
<tr>
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
...........
...........
</tr>
#endforeach
#endforeach
</table>
Hope you can now work around to get your desired result. Read Laravel documentation about collection groupBy here.
I am new at using Angular and I was having problems displaying data retrieved from a database. Can someone help me understand why when I use *ngFor on this HTML code only the gets displayed on my html but not the rest of the rows?
This is my HTML file
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone</th>
<th>School</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let contact contacts$">
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
</table>
And this is my component.ts file
import { Component, OnInit } from '#angular/core';
import { ContactService } from "./contacts.service";
import { Router } from '#angular/router';
import { Observable } from 'rxjs/Observable';
import { Contact } from './contact'
#Component({
selector: 'app-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css']
})
export class ContactsComponent implements OnInit {
constructor( private router:Router, private contactService: ContactService )
{}
contacts$: Observable<Contact[]>;
ngOnInit() {
this.contacts$ = this.contactService.getContacts();
}
}
I am getting my information from a GET HTTP call and it works fine if I do the *ngFor on a tag but it does not display when i use it on a tag
Here is the code for when I do it on a
<div *ngFor="let contact of contacts$ | async" >
{{contact.first_name}}
</div>
As far as I can see you are missing the of in your *ngFor tr tag.
Your HTML code should be like below
<tbody>
<tr *ngFor="let contact of contacts$"> <!-- adding of to retrive data -->
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
Hope it helps.
You are not writing correct loop syntax like in this case you missing "of" and also cross check for correct Property Name.
<tbody>
<tr *ngFor="let contact of contacts">
<td>{{ contact.first_name }}</td>
<td>{{ contact.last_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.phone_number }}</td>
<td>{{ contact.school }}</td>
</tr>
</tbody>
I'm trying to apply filter to multiple fields in a table ,in html code I have a single textbox for searching
<body ng-app="myApp" ng-controller="myController"> <input type="text" placeholder="Search " ng-model="search">
var app = angular.module('myApp', []); app.controller('myController', function($scope) {$scope.employee = [
{ empid: 1, empname: 'saisree', division:'IS',mgr:'A',clientlocation:'PA' },
{ empid: 2, empname: 'poojitha', division:'IS',mgr:'A',clientlocation:'PA' },
{ empid: 3, empname: 'shyam', division:'IS',mgr:'A',clientlocation:'PA'},
{empid: 4, empname: 'shariff', division:'IS',mgr:'A',clientlocation:'PA'},
{empid: 5, empname: 'anvita', division:'GIS',mgr:'B',clientlocation:'AZ'},
{empid: 6, empname: 'poojitha';`division:'Retail',mgr:'C'clientlocation:'UK';];});
<tbody>
<tr ng-repeat="e in employee | filter:search ">
<td>{{ e.empid }}</td>
<td>{{ e.empname }}</td>
<td>{{ e.division }}</td>
<td>{{ e.mgr }}</td>
<td>{{ e.clientlocation }}</td>
</tr>
</tbody>
The user should be able to search from a single textbox by giving empid,empname,division,mgr,clientloaction. please look into this issue.
This is the table that I'm applying filter to, but giving search in the filter applies to all columns at a time!
Try to do this
<label>your input: <input ng-model="search.$"></label> <br>
<tbody>
<tr ng-repeat="e in employee |filter:search:strict ">
<td>{{ e.empid }}</td>
<td>{{ e.empname }}</td>
<td>{{ e.division }}</td>
<td>{{ e.mgr }}</td>
<td>{{ e.clientlocation }}</td>
</tr>
</tbody>
I have a table in a blade file.
<table style="width:80%" border="1">
<tr>
<th>Code</th>
<th>Type</th>
<th>Issue</th>
<th>Entry Type</th>
<th>Value</th>
</tr>
<tr>
#foreach($issues as $issue)
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
#endforeach
</tr>
</table>
However, it dispays like this:
Code Type Issue Entry Type Value
ABC RMK UDID 67 list ABC-U67 ABC RMK UDID 43 list ABC-U43
<
It's not only displaying two record across one row but also displaying a left angle bracket which I can't find in the code. Any help would be appreciated. I am new at Laravel.
There is a problem with your html, not laravel.
The <tr> tag should be in the foreach.
Here:
#foreach($issues as $issue)
<tr>
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
</tr>
#endforeach
It should be like
<table style="width:80%" border="1">
<tr>
<th>Code</th>
<th>Type</th>
<th>Issue</th>
<th>Entry Type</th>
<th>Value</th>
</tr>
#foreach($issues as $issue)
<tr>
<td>{{ $issue->code }}</td>
<td>{{ $issue->type }}</td>
<td>{{ $issue->issue }}</td>
<td>{{ $issue->entry_type }}</td>
<td>{{ $issue->value }}</td>
</tr>
#endforeach
</table>