Finally I found how to do it!

I’m just using a computed style property, that calcs the right style size of the element. To be honest, this solution is a bit different to what I have originally asked for two reasons:

1. for performance reasons I am using codemirror instead of quasar text area input
2. Instead of setting the text area to 100% I just have to set it’s container to a proper size, because codemirror is nothing but a div.

Here is the code

  data () {
    return {
      currentTab: '',
      header: {h: '0px', w: 0}
    }
  },
  mounted () {
    this.header.h = style(this.$refs.layout.$refs.header, 'height')
  },
  computed: {
    computedMainStyle() {
      return { height: `calc( 100vh - ${this.header.h} )` };
    }
  },

The code is inspired on the layout code from quasar:
https://github.com/quasarframework/quasar/blob/ef358ece7dbb87ace6df26dc5d81fd6b704bcb68/src/components/layout/QLayout.vue

Hello.
Something that I think it will take advantage of a more detailed guide is customization. It is only outlined in the docs and a more practical and detailed approach will be very useful.

Also showing beginners to think our of the box or how to go beyond the basic examples may be very beneficial. For example, reading the documentation/guide one may think that only q-lists are allowed inside sidebar, when you can actually put whatever you want. Another example is the vue-router view, it is not mandatory to place it on the main section, you can place it whenever makes sense .

More detailed layout-ing is also required. Yes, layout and slots are described , but how do you structure things inside each section/slot ? Are cards the only way ? Should I create my own components?

Some Do’s and Don’t s will be also a good thing. For example, when Vue router is an overkill where you may be fine with just a couple of tabs ?

As an extra (last and small section) I would like to see some how to about how to integrate stuff from other Vue libraries and maybe some other popular libraries (D3?)

Thanks and regards

Hello everyone,

I have been reading the documentation of quasar, and indeed the customization system it looks very powerful.
What I want is tips to customize the stylus variables to make the interface match a desktop app (or close to it):

• Toolbars with all buttons close to each other (no space)
• Buttons with a clear border, and some glossy effect
• Toolbars with the exact same size of the buttons it holds, plus a border
• Input fields with less space between them

This forum for example, is closer to what I want to achieve than the default MAT theme

But how the hell do you make the column sticky ??

Well, at the end the solution was to install eslint-plugin-import, but also all the dependencies eslint-standard has and the standard plugin itself:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

Then on the eslint config you have to add standard to the list of extends

 extends: ['plugin:vue/essential','standard'],

To be honest, it is a bit confusing that answering no to an optional question totally breaks your startup experience. I spent almost one hour on this.

Regards

@danielo515 said in Doubts about data table:

Regarding controls I was fearing an answer like that. To be honest, adding a property to my data just to be able to render a control column does not look like something clean to me. Just adding the column is not enough, you must add the actual field to the results.

That is just not true. You can just add a column to the list of columns and it will be rendered, even that prop does not exist on your data. My mistake here was that I was not including it on the list of visible columns

So in order to lazy load quasar components you must load them individually on each of your custom components/pages. Including them on the config bundles them all together, right ?

This is an answer to: http://forum.quasar-framework.org/topic/1874/doubts-about-data-table/5
Well, here is the summary of how I fixed (almost) all my issues on Quasar v0.15.2:

• If you want an extra column, then add it to the columns list, and don’t forget to include it in the list of visible columns if you are using that feature
• If you want to customize how cells are rendered, you don’t need to manually customize the entire row, you can customize just the cell slot. This allowed me to render different types of cells based on their type:

    <q-td slot='body-cell' slot-scope='props' :props='props'>
        <span v-if='isDate(props.row[props.col.field])'>
            {{ formatDate(props.row[props.col.field]) }}
        </span>
        <span v-else-if='props.col.field==="interval"'>
            {{ formatInterval(props.row[props.col.field]) }}
        </span>
        <p v-else-if='isPlainArray(props.row[props.col.field])' v-for='v in props.value' :key='v'>{{v}}</p>
        <object-tree v-else-if='isObject(props.row[props.col.field])' :traverse='props.row[props.col.field]' />
        <span v-else>{{props.row[props.col.field]}}</span>
    </q-td>

Now I have to see if I find a way to make columns sticky (low prio) and a way to understand how slot-scope works, because the props thing is still a bit obscure to me.

@benoitranque I already noticed (see my other posts about this). Mi mistake was not including them on the list of visible columns. By the way, for me it will be a blacklist functionality rather than a whitelist one.

I summarized my findings here:
http://forum.quasar-framework.org/topic/1877/datatable-small-tips

Hello, I have been reading the scroll documentation for almost an hour and I’m still unable to understand it.
What I want to do is, when someone clicks on one button I want to scroll to certain dom element, which is out of view.
I tried using refs and the scroll utils, but they don’t work at all, nothing happens. Checking the console I can see that the getScrollPosition function always returns 0, and therefore no navigation happens.
If you can tell me a nice way to simply scroll to certain element I will be very grateful. Also I really think that documentation should be revised, they seem wrong.

Thanks in advance

You have the visible-columns property which is basically the same but with inverted logic.
If you want to just hide one or two, use a filter. Imagine that documents is an array containing the documents that you want to show, and that you want to hide the __index property:

    data () {
        const documents = this.documents
        return {
            page: 1,
            filter: '',
            columns: Object.keys(documents[0]).map(makeCol()),
            visibleColumns: Object.keys(documents[0]).filter(i => i !== '__index')
        }
    }