@metalsadman thanks a lot for the info! Cool that the docs app source code is available!

Best posts made by cmanique
-
RE: quasar.dev source code / global search
-
RE: QTable footer with total count for each column visible
So, I gave it a shot with the most naive approach possible.
Assuming you have data of visibility of columns and column configuration (notice I added a sums boolean to check if you are doing that for a given column):
data () { return { visibleColumns: ['calories', 'desc', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron'], columns: [ { name: 'desc', required: true, label: 'Dessert (100g serving)', align: 'left', field: row => row.name, format: val => `${val}`, sortable: true }, { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true }, { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true }, { name: 'carbs', label: 'Carbs (g)', field: 'carbs', sums: true }, { name: 'protein', label: 'Protein (g)', field: 'protein' }, { name: 'sodium', label: 'Sodium (mg)', field: 'sodium', sums: true }, { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) } ],
Then you can write a computed in the likes of:
bottomColumns: function () { var retVal = [] for (let i = 0; i < this.columns.length; i++) { var isVisible = false for (let j = 0; j < this.visibleColumns.length; j++) { if (this.visibleColumns[j] === this.columns[i].name) { isVisible = true break } } if (isVisible) { if (this.columns[i].sums) { // need to calculate sum, wonder how retVal.push({ name: this.columns[i].name, text: ' the sum of ' + this.columns[i].name }) } else { retVal.push({ name: this.columns[i].name, text: '' }) } } } return retVal }
And use it in the bottom-row in the following way:
<template v-slot:bottom-row> <q-tr> <q-td v-bind:key="column.name" v-for="column in bottomColumns"> {{ column.text }} </q-td> </q-tr> </template>
Which outputs something like this:
And if you hide columns, works just as well:
How you will calculate the sums, and if they are based on the current page or total, beats me.
I think it’s a reasonable hack, dunno about performance and I’m sure it can be vastly improved.HTH
-
RE: How to scrollTo a row in a sorted table.
This is my first answer here, so I hope someone has better ideas
From what I could understand the scrollTo() is the index on the current state of the table, which apparently you get from computedRows, so you do need to scroll to the index of your row in the computedRows array.
I tried to do something with filter, but I’m not proficient enough with javascript and failed to return the index of the filtered object.
Apparently you cannot break forEach, so the following code worked for me:scrollTo: function () { for (let i = 0; i < this.$refs.table.computedRows.length; i++) { if (this.$refs.table.computedRows[i].index === 15) { this.$refs.table.scrollTo(i) break } } }
For the obvious reasons I strongly discourage the usage of this in large data sets and I hope there’s a cleaner solution!
-
RE: QTable footer with total count for each column visible
I think you could easily achieve this with the bottom-row slot:
<template v-slot:bottom-row> <q-tr> <q-td colspan="100%"> Bottom row </q-td> </q-tr> </template>
There’s an example on the docs page
From what I could understand it doesn’t work if virtual-scroll is set, but for your use case that’s probably not very relevant.
If you are worried about filtering out columns, I think by writing a method that reads a table visibleColumns property, and having some property on the config stating if the column should be added or not, I should be rather easy.I’ll try and get an example running actually, it’s a fairly common requirement.
-
quasar.dev source code / global search
Hi all,
I would like to implement a global search like the one at https://quasar.dev/vue-components/ (when you type /, etc), see the screenshot below:
I was wondering if either the source code for that layout is available and if not, how to achieve that the search input can be seamlessly integrated with the toolbar, although I believe it is part of the list in the drawer.
Any pointers on how to globally intercept the pressing of “/” and focus the input would be super cool.Thanks in advance
-
Best practices on how to globally scale down theme / layout
Hi all,
I’m currently evaluating Quasar for a complex web app (pretty sure we’ll stick with it, look’s pretty cool).
I’ve been fiddling with basic stuff, since I’m mostly evaluating capabilities.
One thing that strikes me is that the default styles are quite big for fonts and containers alike. I meddled with "dense as you can see below:
but I am looking for a more global way of compacting stuff, since parts of the web app will contain a lot of information.
Is there any variable controlling the global “scale” of the theme, layout, etc?
What would be the best possible path that would avoid changing css in pretty much every component?
Thanks in advance and it really is a great framework!
Latest posts made by cmanique
-
Tree with Partial Page Rendering
Hi all,
I’m assessing the migration of a JSF (Oracle ADF) App to Quasar, and I came across this tricky requirement:
The drawer inside the yellow border belongs to main layout and routes to modules, like this reference data management one.
Both the tree and form inside the green and blue borders are, at the moment on a single page, which is a a route from the main layout, hence being inside a page container.
So, the tricky part is that the tree can provide multiple actions for very different entities, although the tree itself if based on the same data set, by wizardry of weird queries and datamodels.
Ideally I would use child routes for the different forms, but that, as far as I can tell, would make me loose the state of the tree, since it is inside the page container.
I think a sort of workaround would be to make components that represent each type of form and chain a lot of v-if’s, but that would severely gimp what I can do with routes as far as something like /rdm/entity/:name
And as final resort, I have the chance to have second drawer (on the right or something like that), that would keep the tree at the layout level, but would make everyone have a crap user experience.
So, am I missing something here? I know SPA’s rarely have this kind of state complexity (and I didn’t even get to the place where the tree needs to be contextually refresh because of deleting and adding content), but I think my options are too complicated and I hope there’s a better way.
Any pointers are very welcome.
Thanks in advance
-
RE: Best practices on how to globally scale down theme / layout
@metalsadman thanks for the info.
I was digging up on github and found that there’s something similar to this requirement on v2.0.It seems the right approach, but it’s quite the rewrite and breaking change.
Let’s see how this unfolds.
Thanks!
-
RE: Best practices on how to globally scale down theme / layout
Bump.
Any pointers most welcome
-
RE: QTable footer with total count for each column visible
So, I gave it a shot with the most naive approach possible.
Assuming you have data of visibility of columns and column configuration (notice I added a sums boolean to check if you are doing that for a given column):
data () { return { visibleColumns: ['calories', 'desc', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron'], columns: [ { name: 'desc', required: true, label: 'Dessert (100g serving)', align: 'left', field: row => row.name, format: val => `${val}`, sortable: true }, { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true }, { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true }, { name: 'carbs', label: 'Carbs (g)', field: 'carbs', sums: true }, { name: 'protein', label: 'Protein (g)', field: 'protein' }, { name: 'sodium', label: 'Sodium (mg)', field: 'sodium', sums: true }, { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) } ],
Then you can write a computed in the likes of:
bottomColumns: function () { var retVal = [] for (let i = 0; i < this.columns.length; i++) { var isVisible = false for (let j = 0; j < this.visibleColumns.length; j++) { if (this.visibleColumns[j] === this.columns[i].name) { isVisible = true break } } if (isVisible) { if (this.columns[i].sums) { // need to calculate sum, wonder how retVal.push({ name: this.columns[i].name, text: ' the sum of ' + this.columns[i].name }) } else { retVal.push({ name: this.columns[i].name, text: '' }) } } } return retVal }
And use it in the bottom-row in the following way:
<template v-slot:bottom-row> <q-tr> <q-td v-bind:key="column.name" v-for="column in bottomColumns"> {{ column.text }} </q-td> </q-tr> </template>
Which outputs something like this:
And if you hide columns, works just as well:
How you will calculate the sums, and if they are based on the current page or total, beats me.
I think it’s a reasonable hack, dunno about performance and I’m sure it can be vastly improved.HTH
-
RE: QTable footer with total count for each column visible
I think you could easily achieve this with the bottom-row slot:
<template v-slot:bottom-row> <q-tr> <q-td colspan="100%"> Bottom row </q-td> </q-tr> </template>
There’s an example on the docs page
From what I could understand it doesn’t work if virtual-scroll is set, but for your use case that’s probably not very relevant.
If you are worried about filtering out columns, I think by writing a method that reads a table visibleColumns property, and having some property on the config stating if the column should be added or not, I should be rather easy.I’ll try and get an example running actually, it’s a fairly common requirement.
-
RE: How to scrollTo a row in a sorted table.
This is my first answer here, so I hope someone has better ideas
From what I could understand the scrollTo() is the index on the current state of the table, which apparently you get from computedRows, so you do need to scroll to the index of your row in the computedRows array.
I tried to do something with filter, but I’m not proficient enough with javascript and failed to return the index of the filtered object.
Apparently you cannot break forEach, so the following code worked for me:scrollTo: function () { for (let i = 0; i < this.$refs.table.computedRows.length; i++) { if (this.$refs.table.computedRows[i].index === 15) { this.$refs.table.scrollTo(i) break } } }
For the obvious reasons I strongly discourage the usage of this in large data sets and I hope there’s a cleaner solution!
-
Best practices on how to globally scale down theme / layout
Hi all,
I’m currently evaluating Quasar for a complex web app (pretty sure we’ll stick with it, look’s pretty cool).
I’ve been fiddling with basic stuff, since I’m mostly evaluating capabilities.
One thing that strikes me is that the default styles are quite big for fonts and containers alike. I meddled with "dense as you can see below:
but I am looking for a more global way of compacting stuff, since parts of the web app will contain a lot of information.
Is there any variable controlling the global “scale” of the theme, layout, etc?
What would be the best possible path that would avoid changing css in pretty much every component?
Thanks in advance and it really is a great framework!
-
RE: quasar.dev source code / global search
@metalsadman thanks a lot for the info! Cool that the docs app source code is available!
-
quasar.dev source code / global search
Hi all,
I would like to implement a global search like the one at https://quasar.dev/vue-components/ (when you type /, etc), see the screenshot below:
I was wondering if either the source code for that layout is available and if not, how to achieve that the search input can be seamlessly integrated with the toolbar, although I believe it is part of the list in the drawer.
Any pointers on how to globally intercept the pressing of “/” and focus the input would be super cool.Thanks in advance