I already appreciate your advice and answers, this time I go to you for the next problem I pass context, I want to create a dynamic table with quasar and vueJS this table will change according to a select field I have managed to bring the columns of the Selected tables, what I can't do is paint them in the view, since for this I must generate the following structure to be able to paint the table:
columns: [
{
name: 'id', align: 'center', label: 'id', field: 'id'
},
{
name: 'name', align: 'center', label: 'name', field: 'name'
},
{
name: 'age', align: 'center', label: 'age', field: 'age'
}
]
}
I want to form the structure above from an array that comes to me from the database (the columns of the table), what I receive is the following:
const columnsTable = [
"id",
"name",
"age"
];
I am trying as follows in my computed method:
My computed method to generate the array of objects
The result of this is not what was expected since in each key of my object the entire array is entered in this way.
colums in the image
The variable colums is where I want to generate the array of objects described at the beginning of the question.
I appreciate your answers and opinions, anything would help me a lot, thank you very much.
Maybe something like following snippet:
const columnsTable = [
"id",
"name",
"age"
];
const res = []
columnsTable.forEach(c => {
res.push({name: c, align: 'center', label: c, field: c})
})
console.log(res)
Related
I am trying to display a live logs table using Vue(quasar)+Dexie.
I managed to display the data using the basic example from the dexie doc page:
export default {
name: "Logs",
setup() {
const columns = [
{
name: "ts",
label: "TimeStamp",
field: "ts",
align: "left",
format: (val, row) => date.formatDate(val, "HH:mm:ss:SSS"),
},
{
name: "action",
label: "Action",
field: "action",
align: "left",
format: (val, row) => val,
},
{
name: "status",
label: "Status",
field: "status",
align: "left",
format: (val, row) => val,
},
{
name: "data",
label: "Data",
field: "data",
align: "left",
format: (val, row) => {
return val;
},
},
];
const pagination = ref({
sortBy: "ts",
descending: true,
page: 1,
rowsPerPage: 10,
});
return {
columns,
pagination,
dialog: [],
logs: useObservable(
liveQuery(() => useDatabase.logs.reverse().limit(10).toArray())
),
};
},
};
I get a new Log entry every 1 second.
I am almost sure that the whole bulk of data is re-fetched and not appended. Am I right?
Is there a better practice for loading live updating data from a table than this? (if it's really as i described)
Instead of re-loading all the data from IDB, to just fetch the newly added entries and append them.
I have the same exact situation when displaying a live updating chart (using ApexCharts).
but in this case, I fetch 256 samples per second. I want the components to render the data "automatically" using Vues superpowers while pointing to a ref.
Usually when working with frontend frameworks, and specifically Vue, I create some kind of a variable let logs = ref({...}) and whenever there new data, it gets rendered only when and where it's needed. It doesn't re-render the whole bulk all over again.
I hope my problem is clear, and if not, the examples or my way of thought is understood. I might be thinking this wrong, but i'd be happy to learn from others experience.
this time I come to you for the following, I want to create an object in JS with data that comes to me from an array, the array contains the following data:
const columnsTable = [
"id",
"name",
"age"
];
Really the problem is that when this happens in vuejs it returns me as follows and it is exactly the same code, any idea?
what is selected is the return of my computed method
My computed method is as follows:
method computed
My computer method has the same native js code and it returns me differently.
Would it be good to open another question with this topic?
The array of objects that I want to create with the above array must have the following structure:
columns: [
{
name: 'id', align: 'center', label: 'id', field: 'id'
},
{
name: 'name', align: 'center', label: 'name', field: 'name'
},
{
name: 'age', align: 'center', label: 'age', field: 'age'
}
]
}
Where each object represented in the object array has a value from the columsTable array in name, label and field.
I am trying as follows but I am not successful:
var columnsTable = [
"id",
"nombre",
"edad",
];
var colums = [];
columnsTable.forEach((column) => {
colums.push({
name: column,
align: 'center',
label: column,
field: column
});
console.log(colums);
});
Since this at the end returns all the values of my array within a property of my object. From now on I thank you, any contribution would be very helpful.
I got values in JSON and want to add several values in dataindex. How I can do this?
This works perfectly
columns: [
{
header: "Records",
dataIndex: time,
sortable: true,
},
];
But this example doesn't work
columns: [
{
header: "Records",
dataIndex: time + value + value1,
sortable: true,
},
];
Column property dataIndex should be a string that is the name of the field in the model definition, see documentation. To add different values from the model and display the result in a grid column, either use a calculated field and put the calculated field's name to dataIndex, or create a custom renderer function for the column and add the values there.
I have created a fiddle here. My question is how to assign the DataIndex for the Aircraft Name and the Operator Name column.
https://fiddle.sencha.com/#view/editor&fiddle/2qs9
I do not want to do it this way
{name: 'operator', type: 'auto'},
{name: 'operatorId', type: 'string', mapping:'operator.id'},
{name: 'operatorName', type: 'string', mapping:'operator.name'}
then use operatorName as the DataIndex in the Grid because my original data is even more complicated with arrays and mode nested objects so that would be mean I need to flatten the entire Data structure.
You can use templatecolumn or renderer in grid to show what you need.
Using templatecolumn:
{
text: 'Aircraft Name',
tpl: '{aircraft.name}',
xtype: 'templatecolumn'
}
Using renderer:
{
text: 'Aircraft Name - Second Option',
renderer: function (v, record) {
return record.getAircraft() ? record.getAircraft().get('name') : null;
}
}
Example on fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/2qsm
Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}
As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);