Develop Reference

How to replace a column after a search in Ag-Grid?

const columns = [
{ headerName: "Product", field: "product"},
{ headerName: "Name", field: "name" },
{ headerName: "Date", field: "date" },
];
const columns1 = [
{ headerName: "Type", field: "type" },
{ headerName: "Open", field: "open" },
{ headerName: "High", field: "high" },
{ headerName: "Percentage", field: "pct" }
];
useEffect(() => {
fetch(`http://localhost:8080/all?product=${search}`)
.then(res => { return res.json();
})
.then (data => { setRowData(data);
})
}, [search]);
return (
<div className="Products">
<SearchBar onSubmit={setSearch} />
<div
className="ag-theme-balham"
style={{
height: "300px",
width: "600px"
}}
>
<AgGridReact
columnDefs={columns}
rowData={rowData}
/>
</div>
</div>
)
function SearchBar(props) {
  const [innerSearch, setInnerSearch] = useState("");
  return (
    <div >
      <input
        aria-labelledby="search-button"
        name="search"
        id="search"
        type="search"
        value={innerSearch}
        onChange={e => setInnerSearch(e.target.value)}
      />
      <button
        id="search-button"
        type="button"
        onClick={() => props.onSubmit(innerSearch)}
      >
        Search
      </button>
    </div>
  );
}
};
I've gone through a lot of resources to try and get my columns1 to appear after a search, rather than columns. All of the headers from both columns are fields in my API and they all display properly, but I can't seem to split them up and only have columns1 appear when a search is made.
No matter what I try and put in my search bar function, or if I create two <AgGrid/> tables and try to have only one appear, it doesn't work. Either all my columns appear together, or two tables appear.

#click doesn't work when rendering it using v-html

I have a component which I wish I could create rows and columns with data and columns object from the parent.
There is a situation where I need to render an html template to create a clickable link, I make it want to display the link in the Actions column. vue version: ^2.5.17
below is the code from parent.vue:
// parent.vue
<table-component :data="category" :column="column" class="bg-red-200 py-4 mt-8"/>
// parent.vue
data(){
return {
modalMode: '',
isShowModalEdit: false,
category: [
{ id: 1, name: 'Jasa Pre-Order', color: '#eb4034' },
{ id: 2, name: 'Jualan', color: '#fcba03' },
{ id: 3, name: 'Jasa Design', color: '#9f34eb' },
],
}
}
// parent.vue
methods: {
toggleModalEdit(){
this.isShowModalEdit = !this.isShowModalEdit
this.modalMode = 'EDIT'
}
}
// parent.vue
computed: {
column() {
return [
{
dataField: 'name',
text: 'Name',
},
{
dataField: 'color',
text: 'Category Color',
formatter: (cell,row) => {
return `
<div style="background-color: ${cell};" class="rounded-full h-8 w-8 flex items-center justify-center mr-2"></div>
<div class="font-bold text-gray-500">${cell}</div>
`
},
classes: (cell, row, rowIndex, colIndex) => {
return 'flex';
}
},
{
dataField: 'actions',
text: 'Actions',
formatter: (cell,row) => {
return `
Edit
`
},
},
]
},
}
and this is the sample code from component.vue:
// component.vue
<tbody class="bg-white divide-y divide-gray-200">
<tr v-for="(row, rowIndex) in data" :key="rowIndex">
<td v-for="(col, colIndex) in column" :key="col.dataField" :class=" col.classes ? col.classes(row[col.dataField],row,rowIndex,colIndex) : '' " v-html=" col.formatter ? col.formatter(row[col.dataField],row) : row[col.dataField] " class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"></td>
<tr>
</tbody>
// component.vue
props: {
data: {
type: Array,
required: true
},
column: {
type: Array,
required: true
},
}
the result is like this:
but the link in the Actions column does not work as it should, I hope that when clicking this link will run the method of the perent namely toggleModalEdit. and this is what the link looks like when i inspect it:
i am still new to vue, i am not sure what i did best or not, i hope you guys can help.

Your issue is, that the HTML inside the v-html directive is not processed by Vue's template compiler at all.
Because the compiler doesn't compile this HTML, the #click is not interpreted (but simply rendered without triggering any action).
For this to work, you'd need to iterate over all columns and initialize a new component that handles what's inside the cell yourself directly in HTML (and not in some string that's gonna be rendered later on).
I guess that this is enough - if you still need to interpret what's in the string, you may use Vue.compile to interpret the content. But be careful as it's not safe in case there's some malicious code in it - but since the directive by default has no sanitizing at all, I guess that's just the way Vue.js works.

Thanks to #SimplyComple0x78 for the answer, I marked your suggestions:
For this to work, you'd need to iterate over all columns and initialize a new component that handles what's inside the cell yourself directly in HTML (and not in some string that's gonna be rendered later on).
so I try to create and initialize a new component, I call it element-generator. reference from here. here's the code:
// element-generator.vue
<script>
export default {
render: function (createElement) {
const generatedChildren = (child) => {
if(!child) return // when child of undefined
if(typeof child === 'string') return child // when children is String
return child.map((e,i,a)=>{
if(typeof child[i] == 'string'){
return child[i]
}else{
return createElement(
child[i].tag,
child[i].attributes,
generatedChildren(child[i].children) // javascript recursive
)
}
})
}
return createElement(
this.formatter.html.tag,
this.formatter.html.attributes,
generatedChildren(this.formatter.html.children)
)
},
props: {
formatter: {
type: Object,
required: true
},
},
}
</script>
and I no longer use v-html in component.vue instead I just do a check inside <td> and call element-generator to handle what's inside the cell:
// component.vue
<tbody class="bg-white divide-y divide-gray-200">
<tr v-for="(row, rowIndex) in data" :key="rowIndex">
<td v-for="(col, colIndex) in column" :key="col.dataField"
:class=" col.classes ? col.classes(row[col.dataField],row,rowIndex,colIndex) : '' "
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
>
<element-generator v-if="col.formatter" :formatter="col.formatter(row[col.dataField],row)"></element-generator>
<div v-else>{{row[col.dataField]}}</div>
</td>
</tr>
</tbody>
and in parent.vue I replaced the String with the Object that will be passed to the element-generator later, it looks like this:
// parent.vue
computed: {
column() {
return [
{
dataField: 'name',
text: 'Name',
},
{
dataField: 'color',
text: 'Category Color',
formatter: (cell,row) => {
return {
html: {
tag: 'div',
attributes: {
class: 'flex'
},
children:[
{
tag: 'div',
attributes: {
style: `background-color: ${cell};`,
class: 'rounded-full h-8 w-8 flex items-center justify-center mr-2',
},
},
{
tag: 'div',
attributes: {
class: 'font-bold text-gray-500',
},
children: cell
},
]
}
}
},
},
{
dataField: 'actions',
text: 'Actions',
formatter: (cell,row) => {
return {
html: {
tag: 'a',
attributes: {
class: 'text-indigo-600 hover:text-indigo-900',
on: {
click: this.toggleModalEdit
},
attrs: {
href: "#"
},
},
children: 'Edit'
},
}
},
},
]
},
},
then when I inspect it in the browser, the result is like this(this is different from the previous one):
and finally what I want to display when Edit is clicked is now displayed:
Thank you very much everyone.

how to display image into vue js Datatable

guys I need to display an image into the field of Datatable I've tried everything but nothing works,
at that moment my code is:
<q-table
:data="driverTable.data"
:columns="driverTable.columns"
row-key="objectId"
>
<template v-slot:no-data="{ icon, message, filter }">
<div class="full-width row flex-center q-gutter-sm">
<q-icon size="2em" name="sentiment_dissatisfied" />
<span>{{ message }}</span>
<q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
</div>
</template>
<template v-slot:top="props">
<q-btn flat round dense
#click="props.toggleFullscreen" color="grey-8" class="q-ml-md"
:icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
:v-bind="props.inFullscreen"
:title="props.inFullscreen ? 'Minimiser' : 'Plain ecran'"
/>
</template>
</q-table>
and my js code:
data () {
return {
driverTable: {
columns: [
{
name: 'objectId',
field: row => row.objectId,
format: val => ''
},
{
name: 'name',
label: 'Nom complete',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true,
classes: 'ellipsis'
},
{
name: 'carPermit',
required: true,
label: 'Permit',
field: row => row.carPermit, //
align: 'center',
format: val => `${'<img height="75%" width="75%" src="' + val + '"/>'}`
}
],
data: []
}
}
}
I've tried <img> into field format and bild on it the url source but it gives me just the balise on stiring format

please follow this
<q-table
:data="driverTable.data"
:columns="driverTable.columns"
row-key="objectId"
>
<template v-slot:no-data="{ icon, message, filter }">
<div class="full-width row flex-center q-gutter-sm">
<q-icon size="2em" name="sentiment_dissatisfied" />
<span>{{ message }}</span>
<q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
</div>
</template>
<template v-slot:top="props">
<q-btn flat round dense
#click="props.toggleFullscreen" color="grey-8" class="q-ml-md"
:icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
:v-bind="props.inFullscreen"
:title="props.inFullscreen ? 'Minimiser' : 'Plain ecran'"
/>
</template>
<template v-slot:body-cell-carPermit="props">
<q-avatar>
<img :src="props.row.carPermit">
</q-avatar>
</template>
</q-table>
and remove format and field keys from cardPermit
data () {
return {
driverTable: {
columns: [
{
name: 'objectId',
field: row => row.objectId,
format: val => ''
},
{
name: 'name',
label: 'Nom complete',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true,
classes: 'ellipsis'
},
{
name: 'carPermit',
required: true,
label: 'Permit',
align: 'center',
}
],
data: []
}
}
}

How to update v-data-table data in real time?

I am developing a node and electron application. I'm using vuetify to generate the table (v-data-table) that loads data from an oracle database.
The data changes according to the value of input, but the table does not update!
When input values change: process.env.ANO_SEM = input.val()
then i call loadData() function
process.env.ANO_SEM is used as parameter for sql query in getEventos() function
My code:
$('#input').keyup(e => {
if (e.keyCode == 13) {
process.env.ANO_SEM = $('#input').val()
loadData()
}
})
// Get data from BD
async function getEventos() {
const sql = await fs
.readFileSync(path.join(process.env.ROOT_PATH, 'src/db/sql/get-evento.sql'))
.toString()
return await db.getData(sql, [process.env.ANO_SEM])
}
async function loadData() {
let data = await getEventos()
console.log(data) // the data aways change, but the table never update
new Vue({
el: '#app',
methods: {
rowClick(idEvento) {
require(path.join(process.env.CTRL_PATH, './evento/evento-ctrl.js'))(
window.$,
idEvento
)
}
},
data: function() {
return {
selectedItem: 'Sample',
pagination: {
sortBy: 'ID'
},
headers: [
{ text: 'ID', value: 'ID', align: 'center', width: '10%' },
{ text: 'Descrição', value: 'DESCRICAO', align: 'left', width: '60%' },
{ text: 'Período', value: 'PERIODO', align: 'left', width: '20%' },
{
text: 'Data Impressão',
value: 'DATA_IMPRESSAO',
align: 'left',
width: '10%'
}
],
eventos: data
}
}
})
}
my html:
<div id="app" class="table-eventos">
<v-app>
<v-data-table
:headers="headers"
:items="eventos"
:rows-per-page-items="[100]"
item-key="name"
class="elevation-1"
>
<!-- :pagination.sync="pagination" -->
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.ID)">
<td class="text-xs-left">{{ props.item.ID }}</td>
<td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
<td class="text-xs-left">{{ props.item.PERIODO }}</td>
<td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</div>

So basically what happens in your code is you load your vue into #app, this get rendered and your new #app element looks different - but still get linked to your new vue and rendered - but this time vue somehow fails.
long story short - put your render element into a static template that you can rerender:
i made a simple example from your sketch:
Vue.config.productionTip = false;
const mockData = Array.from({length: 100}, (_, i) => [{
DATA_IMPRESSAO: `mock${i}`,
PERIODO: `mock${i}`,
DESCRICAO: `mock${i}`,
ID: `mock${i}`,
}])
let nonReactiveIndex = Math.floor(Math.random()*mockData.length)
setInterval(() =>
new Vue({
template: "#example",
vuetify: new Vuetify(),
mounted() {
nonReactiveIndex = Math.floor(Math.random()*mockData.length)
console.log("mounted", nonReactiveIndex);
},
data() {
return {
headers: [
{ text: "ID", value: "ID", align: "center", width: "10%" },
{ text: "Descrição", value: "DESCRICAO", align: "left", width: "60%" },
{ text: "Período", value: "PERIODO", align: "left", width: "20%" },
{
text: "Data Impressão",
value: "DATA_IMPRESSAO",
align: "left",
width: "10%"
}
],
eventos: mockData[nonReactiveIndex]
};
},
}
).$mount('#app'), 2000)
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app" class="table-eventos">
</div>
<template id="example">
<v-app>
<v-data-table
:headers="headers"
:items="eventos"
:rows-per-page-items="[100]"
item-key="name"
class="elevation-1"
>
<!-- :pagination.sync="pagination" -->
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.ID)">
<td class="text-xs-left">{{ props.item.ID }}</td>
<td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
<td class="text-xs-left">{{ props.item.PERIODO }}</td>
<td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</template>
It is a better design to implement everything into the vue component and let vue handle reactivity:
Vue.config.productionTip = false;
const mockData = Array.from({length: 100}, (_, i) => [{
DATA_IMPRESSAO: `mock${i}`,
PERIODO: `mock${i}`,
DESCRICAO: `mock${i}`,
ID: `mock${i}`,
}])
new Vue({
template: "#example",
vuetify: new Vuetify(),
mounted() {
console.log("mounted", this.reactiveIndex);
},
data() {
return {
reactiveIndex : Math.floor(Math.random()*mockData.length),
headers: [
{ text: "ID", value: "ID", align: "center", width: "10%" },
{ text: "Descrição", value: "DESCRICAO", align: "left", width: "60%" },
{ text: "Período", value: "PERIODO", align: "left", width: "20%" },
{
text: "Data Impressão",
value: "DATA_IMPRESSAO",
align: "left",
width: "10%"
}
],
};
},
computed: {
eventos(){ return mockData[this.reactiveIndex] }
},
methods: {
load(){
this.reactiveIndex = Math.floor(Math.random()*mockData.length)
console.log(this.reactiveIndex)
}
}
}
).$mount('#app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app" class="table-eventos">
</div>
<template id="example">
<v-app>
<v-btn #click="load">load</v-btn>
<v-data-table
:headers="headers"
:items="eventos"
:rows-per-page-items="[100]"
item-key="name"
class="elevation-1"
>
<!-- :pagination.sync="pagination" -->
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.ID)">
<td class="text-xs-left">{{ props.item.ID }}</td>
<td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
<td class="text-xs-left">{{ props.item.PERIODO }}</td>
<td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</template>

I took the liberty of setting up the project structure with vue-cli and also added mock data and a text-field, let me know if you have any doubts, I'm pretty sure you'll get the point, clone the public repo, run
npm install
and then
npm run serve
https://github.com/sdpotts93/vue-simple-table

How to persist Data Table selected items after data is updated/refreshed (Quasar-Framework)

I'm using Quasar Framework with VueJS. I have a Data Table component that allows single item selection. The Data Table data is automatically updated every 5 seconds through websockets events. If I have an item selected, every time the Data Table data is updated, that item gets deselected, and I would like to persist the item selection after the data is updated.
Is there a way to accomplish this? I was thinking in two different approachs, but I have no idea how to do it, at least not from the documentation:
access directly the Data Table selected item
handle an event fired when an item is selected
In both cases the main idea would be to save the selection in a store, an restore the selection when the Data Table items update is done.
<template>
<q-layout>
<!-- Main block start-->
<div class="scroll" style="width: 100%">
<div class="layout-padding">
<div class="row" style="margin-top: 30px;">
<q-data-table :data="dataTableData" :config="config" :columns="columns" #refresh="refresh">
</q-data-table>
</div>
</div>
</div>
<!-- Man block end-->
</q-layout>
</template>
<script>
export default {
sockets:{
connect: function(){
console.log('socket connected')
},
info: function(data){
console.log('sockets: info',data)
//This is where I should get the current selected item if exists
this.dataTableData = data;
//This is where I should restore the selected item
}
},
methods: {
getInfo: function(val){
this.$socket.emit('getInfo', val);
},
refresh (done) {
this.$socket.emit('getInfo');
done();
}
},
created: function(){
this.getInfo()
},
data: function () {
return {
dataTableData: [],
config: {
title: 'My Data Table',
refresh: true,
columnPicker: false,
leftStickyColumns: 0,
rightStickyColumns: 0,
rowHeight: '50px',
responsive: true,
selection: 'single',
messages: {
noData: '<i>warning</i> No data available to show.'
}
},
columns: [
{ label: 'Name', field: 'name', width: '200px', sort: true },
{ label: 'Size', field: 'size', width: '50px', sort: true },
{ label: 'Status', field: 'status', width: '50px', sort: true },
{ label: 'Progress', field: 'progress', width: '150px', sort: false },
{ label: 'Speed', field: 'speed', width: '50px', sort: false },
{ label: 'ETA', field: 'eta', width: '50px', sort: false }
],
pagination: false,
rowHeight: 50,
bodyHeightProp: 'auto',
bodyHeight: 'auto'
}
},
watch: {
}
}
</script>
UPDATE
As far as I can see, they're already working in this enenhancement for the Quasar-Framework v0.14 =)