Currently I fill the following table:
<v-data-table
:headers="headers_detInventario"
:items="detalle_inventario"
:search="search"
:rows-per-page-items="rowsPerPageItems"
:pagination.sync="pagination"
class="elevation-1"
no-data-text="No hay registros"
>
<template v-slot:items="props">
<td class="text-xs-center">{{ props.item.nombre }}</td>
<td class="text-xs-center">{{ props.item.cantidad }}</td>
<td class="text-xs-center">{{ props.item.precio }}</td>
<td class="text-xs-center">{{ props.item.codigo }}</td>
<td class="text-xs-center">{{ props.item.descuento }}</td>
<td class="text-xs-center">{{ props.item.total_fila }}</td>
</template>
</v-data-table>
and the header is filled in the following way:
headers_detInventario:[
{
text: 'Fecha',
align: 'left',
value: 'fecha'
},
{ text: 'Detalle', value: 'detalle'},
{ text: 'Valor unitario', value: 'valor_unitario' },
{ text: 'Entrada', value: 'entrada', colspan: '2'
},
{ text: 'Cantidad', value: 'cantidad' },
{ text: 'Acciones', value: 'name', sortable: false }
],
Therefore visually it looks like this:
but I need that it is of the following form his head:
Related
When using v-for, I need to allocate a number of materials with a checkbox. But when you click on the checkbox, a group of materials is immediately highlighted. This is due to the fact that the Quantity parameter is the same for many materials. How do I make sure that when I click on the checkbox, only one material is highlighted and the Quantity value is added to checkedMaterials?
<table>
<thead>
<tr>
<th>#</th>
<th>Material name</th>
<th>Количество</th>
</tr>
</thead>
<tbody>
<tr v-for="material in materials">
<td><input type="checkbox" :value="material" v-model="checkedMaterials">
{{material.id}}
</td>{{ material.name }}</td>
<td>{{ material.Quantity }}</td>
</tr>
export default {
name: "Show",
data() {
return {
materials: '',
checkedMaterials: [],
}
},
mounted() {
this.getPart()
this.getMaterials()
},
methods: {
getPart() {
axios.get(`/api/part/${this.$route.params.id}`).then(res => {
this.part = res.data.data
})
},
getMaterials() {
axios.get('/api/material').then(res => {
this.materials = res.data.data;
})
},
},
}
take id as value instead of whole material.
<tr v-for="material in materials">
<td><input type="checkbox" :value="material.id" v-model="checkedMaterials">
{{material.id}}
</td>{{ material.name }}</td>
<td>{{ material.Quantity }}</td>
</tr>
make computed propery for getting quantity .
computed : {
allSelectedMaterial() {
return this.materials.filter((material) =>
this.checkedMaterials.includes(material.id) )
},
selectedMaterialQuantitry(){
return this.allSelectedMaterial.map((material) => material.quantity)
},
uniqueSelectedQuantity(){
return [...new Set(this.selectedMaterialQuantitry)]
}
},
code : https://jsfiddle.net/d9nwz4kt/35/
I'm using v-data-table to list locations that are also shown on a map.
It would be nice to synchronize the highlighting so that if the cursor hovers over a
location in the table, the same location would be highlighted on the map.
Is there a way to access the element in v-data-table where the cursor is currently hovering over?
As one of the possible solutions you can override #items slot and include native mouseover event into <tr> tag:
<span class="text-h6">{{ `Last hovered location: ${hoveredLocation}` }}</span>
<v-data-table
:headers="headers"
:items="locations"
:items-per-page="5"
>
<template #item="{ item }">
<tr #mouseover="onMouseOver(item)">
<td>{{ item.city }}</td>
<td>{{ item.country }}</td>
</tr>
</template>
</v-data-table>
...
data () {
return {
hoveredLocation: null,
headers: [
{ text: 'City', value: 'city' },
{ text: 'Country', value: 'country' },
],
locations: [
{ id: 3, city: 'Paris', country: 'France'},
...
],
}
},
methods: {
onMouseOver(item) {
this.hoveredLocation = `${item.city} (${item.country})`;
}
}
Possibly you need to combine several events like mouseover/out, mouseenter/leave, etc.
Test this at CodePen.
I have data on table using Model View Controller :
controller :
<tbody>
#php
$no=0;
#endphp
#foreach ($pns as $i)
<tr class="even pointer">
<td class="a-center ">{{ ++$no }}</td>
<td class=" ">{{ $i->users->nama}}</td>
<td class=" ">{{ $i->NIP_lama}}</td>
<td class=" ">{{ $i->NIP_baru}}</td>
<td class=" ">{{ $i->TMT_CPNS}}</td>
<td class=" ">{{ $i->TMT_PNS}}</td>
<td class=" ">{{ $i->TMT_gol_ruang}}</td>
<td class=" ">{{ $i->master_golongan->golongan}}</td>
<td class=" ">{{ $i->master_jabatan->nama_jabatan}}</td>
</tr>
#endforeach
</tbody>
And the Controller :
public function pns() {
$pns = Data_pns::with('users')->get();
return view('admin.pns',['pns' => $pns]);
}
its run normally and not having error . now I want to add datatables yajra yajra feature , and it has 1 problem . I dont know how to add link :
<td class=" ">{{ $i->users->nama}}</td>
on the datatables :
My View :
#push('scripts')
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: '{!! route('d_pns') !!}',
columns: [
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
{ data: 'users.nama', name: 'users.nama'},
{ data: 'NIP_lama', name: 'NIP_lama'},
{ data: 'NIP_baru', name: 'NIP_baru'},
{ data: 'TMT_CPNS', name: 'TMT_CPNS'},
{ data: 'TMT_PNS', name: 'TMT_PNS'},
{ data: 'TMT_gol_ruang', name: 'TMT_gol_ruang'},
{ data: 'master_golongan.golongan', name: 'master_golongan.golongan'},
{ data: 'master_jabatan.nama_jabatan', name: 'master_jabatan.nama_jabatan'},
],
});
})
</script>
#endpush
and my controller like this :
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->make(true);
}
edited this controller
and my controller like this :
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->make(true);
}
but this output in view " <#a href="project/pns/5">test" with out #
my Question how to add link like
<td class=" ">{{ $i->users->nama}}</td>
on datatbles ?
you already halfway there, you need to set the 'Nama' columns as raw, if you're returning an html content like this
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->rawColumns(['Nama'])
->make(true);
}
can anyone help me on the following problem please.
I'd like to run a simple array via a loop within vue in laravel to give all the array values out in a table. This is my code I adjusted from a tutorial I found in the internet: enter code here
<template>
<div>
<h1>Coffeetypes</h1>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr v-for="cctyp in cctypes" v-bind:key="cctyp.id">
<td>{{ cctyp.id }}</td>
<td>{{ cctyp.name }}</td>
<td>{{ cctyp.description }}</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
cctypes: [],
cctyp: {
id: '',
name: '',
description: '',
created_by: '',
updated_by: ''
},
id: '',
pagination: {},
edit: false
};
},
created() {
this.fetchCCTypes();
},
methods: {
fetchCCTypes(){
fetch('api/CCTypes')
.then(res => res.json())
.then(res => {
this.cctypes = res.data;
});
}
}
};
</script>
The problem is, that there is no filling in the table.
maybe it's the double .then()... in your fectch method ... you should console.log your data first ...
I need multi-lines header in this scenario:
the fist line is level 1 header, the second line is level 2, like this pic:
multi-lines header
Thanks!
Core code
<v-data-table :headers="surgeryInformationHeaders" :items="surgeryInformationDesserts" hide-default-footer class="transparent elevation-0 my-4" hide-default-header disable-pagination disable-sort :items-per-page="5">
<template #header="{ }">
<thead class="v-data-table-header">
<tr>
<th v-for="(h,i) in surgeryInformationHeaders" :key="i" class="text-center parent-header td-border-style" :rowspan="h.children?1:2" :colspan="h.children?h.children.length:1">
{{ h.text }}
</th>
</tr>
<tr>
<th v-for="(h1,i1) in getSubHeader(surgeryInformationHeaders)" :key="i1" class="text-center child-header td-border-style">
{{ h1.text }}
</th>
</tr>
</thead>
</template>
<template #item="props">
<tr>
<td v-for="(c,ci) in getRows(props.item)" :key="ci">
{{ c }}
</td>
</tr>
</template>
</v-data-table>
Here's codeopen link https://codepen.io/sunhao1256/pen/MWeZyMe
By adding a child to the header you could implement multi-line header in v-data table.
headers: [
{
text: 'Film Title',
align: 'center',
sortable: false,
value: 'film',
},
{ text: 2018, value: 'dec', sortable: false, align: 'center',child:["December"] },
{ text: 2019, value: 'jan', sortable: false, align: 'center',child:["January","February"] }
],
you could visit this link for the sample output:
https://codepen.io/nicemid/pen/ZwXmeq