I am trying to style my data table using scoped CSS but I simply can’t.

I applied a custom class to my q-table called “price-table”.

Then I tried hundreds of different selectors to try and style the elements but nothing is applied when I use scoped.

When I remove scoped however, it works…

How do I do this?

CSS selectors I tested to try and change the th font color for example:

// Works without "scoped"
.price-table table th {
  color: red;
}

Solved it with:

<!-- slot name syntax: body-cell-<column_name> -->
  <q-td slot="body-cell-desc" slot-scope="props" :props="props">
    <q-chip small color="secondary">{{ props.value }}</q-chip>
  </q-td>

Is there a way to put component in data table?

For example a q-btn in one of the columns that I can click on?

I looked into this issue recently and the conclusion I came to was this:

Both return the same value if you are just accessing raw data. But a getter can manipulate the data before passing it along.

If you are accessing the state directly throughout your app on many places, and you want to manipulate the data, for example change the number formatting or whatever. It wil become a pain to change it on all places.

If you used a getter you only change this in one place.

@hawkeye64 said in Change tooltip animation?:

Here’s documentation: https://quasar-framework.org/components/tooltip.html
Look at properties for anchor and self.
This is my go to tooltip position:

<q-tooltip anchor="bottom middle" self="top middle">Play/Pause</q-tooltip>

But depending where the tooltip shows up, I’ve had to adjust it a bit so the display doesn’t hide something:

<q-tooltip anchor="top middle" self="bottom middle">Date/Time</q-tooltip>

Hope that helps!

That just changes where the tooltip appears, not how it appears. It still folds out with the same animation.

The default Quasar syntax for the store really bothers me. It has way too much “export const” repetition going on.

Example here: https://github.com/slowaways/quasar-documentation-pp/blob/master/src/store/layout/mutations.js

What I would like is more like this:
https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/modules/cart.js

But in multiple files. But I can’t seem to get it working.

My getters.js:

const getters = {
  getAllSignals (state, getters) {
    return state.signalsList
  }
}

export default {
  getters
}

index.js for the module:

import state from './state'
import getters from './getters'

export default {
  namespaced: true,
  state,
  getters,
}

What am I doing wrong?
Error:

Uncaught Error: [vuex] getters should be function but "getters.getters" in module "signals" is {}.

How do I change a tooltip animation direction?

Right now it “folds out” from top to bottom, but I would like it to fold out from left to right.

The actual positioning is correct, just not the animation itself.

Thanks looks good.

Can I achieve a nested side menu like I can with Vuetify?

Example here:

https://vuetifyjs.com/en/components/navigation-drawers#example-nested

@rstoenescu I think that template structure is better laid out. I don’t want to have two node_modules taking up 1,2 GB in my project… when I can have one at 600 mb. Also it has a lot of built in features like great error messages in console which I did not find in electron wrapper.

Check it out, maybe you can get some inspiration from it to improve your wrapper.

But still I find it odd that the spinner will not work when I am importing it. When everything else seems to work.

I can’t find what kind of magic the electron wrapper is doing to fix this.