So this is a basic table
<table class="table table-striped">
<thead>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">State</th>
</thead>
<tbody>
<tr *ngFor="let data of Array">
<td>{{ data.name }}</td>
<td>{{ data.city }}</td>
<td>{{ data.state }}</td>
</tr>
</tbody>
</table>
But when I take the header and put it into a component the widths of the headers dont match the width of the table columns
<table class="table table-striped">
<thead>
<app-tableheader></app-tableheader>
</thead>
<tbody>
<tr *ngFor="let data of Array">
<td>{{ data.name }}</td>
<td>{{ data.city }}</td>
<td>{{ data.state }}</td>
</tr>
</tbody>
</table>
and here is the component now with the same html
<tr>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">State</th>
</tr>
So I dont quite understand what I'm missing here. New to componetizing angular.
Related
I had already opened a discussion about this and I was given a solution only that the solution calculates everything continuous without interrupting every different same_id, I should finish counting when same_id changes and start counting again, does anyone have ideas to help me solve this problem?
<table>
<thead>
<tr>
<th>id</th>
<th>timestamp</th>
<th>states</th>
<th>same_id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2023-01-11 15:26:23</td>
<td>NotAvailable</td>
<td>80</td>
<td>2</td>
<td>2023-01-11 15:26:55</td>
<td>ToBeAssigned</td>
<td>80</td>
<td>3</td>
<td>2023-01-11 15:27:06</td>
<td>Assigned</td>
<td>80</td>
<td>3</td>
<td>2023-01-11 15:27:19</td>
<td>TakingCharge</td>
<td>80</td>
<td>4</td>
<td>2023-01-11 15:29:05</td>
<td>Closed</td>
<td>80</td>
</tr>
</tbody>
</table>
the solution that was proposed to me and it works is this but it doesn't stop counting when the same_id changes and I should do this
<table>
<thead>
<tr>
<th>id</th>
<th>timestamp</th>
<th>states</th>
<th>delay</th>
</tr>
</thead>
<tbody>
#foreach((array)$tickets_logs as $i => $ticket_log)
<tr>
<td>{{ $ticket_log['id'] }}</td>
<td>{{ __($ticket_log['states']) }}</td>
<td>{{ $ticket_log['time_stamp'] }}</td>
<td>
#if(!$loop->first)
{{ (new Carbon\Carbon($tickets_logs[$i - 1]['time_stamp']))->diffInMinutes((new Carbon\Carbon($ticket_log['time_stamp']))) }}
#else
-
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
I have a table is populated with some info and I would like to format the table like the picture
Unfortunately the excel sheet which I have no control over is formatted so:
I want any row that has only a Equipment type to span whole row. All other rows should appear as normal table row.
I am using following vue template:
<table>
<caption>
SHS Scrap Table
</caption>
<thead>
<tr>
<th>Make</th>
<th>Model #</th>
<th>Bar Code</th>
<th>Serial #</th>
<th>Location</th>
<th>Condition</th>
</tr>
</thead>
<tbody v-for="item in scrapDataEmptyRowsRemoved" :key="item">
<tr v-if="item['Equipment Type']">
<td class="equipt-type" colspan="6">
Equipment Type - {{ item["Equipment Type"] }}
</td>
</tr>
<tr v-else>
<td>{{ item["Make"] }}</td>
<td>{{ item["Model #"] }}</td>
<td>{{ item["Bar Code"] }}</td>
<td>{{ item["Serial #"] }}</td>
<td>{{ item["Location"] }}</td>
<td>{{ item["Condition"] }}</td>
</tr>
</tbody>
</table>
The only problem is that looking in Devtools I see that every row has a Tbody which is not semantically correct. Any idea's on how to correct this. If I use a container around the v-if v-else all formatting breaks down.Thanks...
Update the only problem is Vite is objecting to moving :key attribute to the v-else:
I dont what other unique key they want.
Update II - Ok apparently if I use different object keys Vite is ok with that ie :key="item['Equipment Type'] and on v-else :key="item['Make']. Does that seem correct?
You can move the v-for in a template tag, that won't be rendered in the DOM.
<tbody>
<template v-for="item in scrapDataEmptyRowsRemoved" :key="item">
<tr v-if="item['Equipment Type']">
<td class="equipt-type" colspan="6">
Equipment Type - {{ item["Equipment Type"] }}
</td>
</tr>
<tr v-else>
<td>{{ item["Make"] }}</td>
<td>{{ item["Model #"] }}</td>
<td>{{ item["Bar Code"] }}</td>
<td>{{ item["Serial #"] }}</td>
<td>{{ item["Location"] }}</td>
<td>{{ item["Condition"] }}</td>
</tr>
</template>
</tbody>
I wish to create a search feature in my NG ZORRO table by linking/connect nz-input with nz-table. Is is possible to do so? Or is there any other methods to do so?
<uic-page>
<p>user-details works!</p>
<nz-input-group [nzSuffix]="suffixIconSearch">
<input type="text" nz-input placeholder="input search text" />
</nz-input-group>
<ng-template #suffixIconSearch>
<i nz-icon nzType="search"></i>
</ng-template>
<nz-table #basicTable [nzData]="listOfData">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
<td>{{ data.address }}</td>
<td>
<a>Action δΈ€ {{ data.name }}</a>
<nz-divider nzType="vertical"></nz-divider>
<a>Delete</a>
</td>
</tr>
</tbody>
</nz-table>
Thanks.
This should work fine
Just make an event on the input and change the data based on that
also make sure you make copy of the data (if the search is client-side) to avoid lose the data
JSON Data
{
"Data":[
{
"Country":"{\"CountryID\":1,\"Name\":\"United States\",\"Code\":\"US\"}",
"Currency":"{\"CountryID\":1,\"Code\":\"USD\",\"Symbol\":\"$\"}"
},
{
"Country":"{\"CountryID\":1,\"Name\":\"United States\",\"Code\":\"US\"}",
"Currency":"{\"CountryID\":1,\"Code\":\"USD\",\"Symbol\":\"$\"}"
}
]
}
Vue.js Code
<table class="table table-bordered mb-0" v-if="MembershipRecords.length > 0">
<thead>
<tr>
<th>Currency</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr v-for="Record in Records">
<td>{{ Record.Currency }}</td>
<td>{{ Record.Country }}</td>
</tr>
</tbody>
</table>
Below is how it looks on web page.
When I tried like this Record.Country.Name it displays nothing.
Can you please suggest?
It looks like you have stringified data in the records column. Try this:
<tr v-for="Record in records">
<td>{{ JSON.parse(Record.Currency).Code }}</td>
<td>{{ JSON.parse(Record.Country).Name }}</td>
</tr>
https://jsfiddle.net/01ogLreg/
Looping data from an array. The problem is that the loop creates 3 empty tables, guessing it's because im calling item. 3 times. If I want the data from the array without Vue creating empty tables, how should I display the data? Been trying to use {{users.firstname}} without the v-for loop but doesn't seem to work.
<table v-for="item in users">
<tbody>
<tr>
<td>{{ item.username }}</td>
</tr>
<tr>
<td>{{ item.firstname }}</td>
</tr>
<tr>
<td>{{ item.lastname }}</td>
</tr>
</tbody>
</table>
Solved using <template v-for="item in users" v-if="item.username && item.firstname && item.lastname">. No extra elements are printed out.
If you want to create 3 rows per user, use a <template> tag to group them, and use v-for on that template:
<table>
<tbody>
<template v-for="item in users">
<tr>
<td>{{ item.username }}</td>
</tr>
<tr>
<td>{{ item.firstname }}</td>
</tr>
<tr>
<td>{{ item.lastname }}</td>
</tr>
</template>
</tbody>
</table>
Have a look at this fiddle for an example: https://jsfiddle.net/nfa43bhq/