So sad, because the ability to highly customize is what made me choose the datatable. What is preventing the scroll area to be created when user is customizing the cells ? Any workaround like creating a custom sticky header (instead the ones at the table) and then use a scroll area around the table ?

Inspecting this in more depth, and being a bit more open-minded I can understand that this is maybe a feature.
Looking at the bundles on more detail I can see that they are not of the same exact size, and if you look closer you can see that they do not include the same files. Being each bundle a different route maybe this makes sense. Each route has just the files they need. Because we don’t know how routes will be loaded (which order)because can navigate to any random one we have to include all the possible files they may require.

My only complain may be that some files are present both at the vendor bundle and the route bundle. Since the vendor bundle is loaded on every route, I don’t see why those files needs to be included on the route bundle too.

In any case, this is just an unnecessary optimization concern, since page loading is already very fast.

I made some research on the webpack-config, and I can see that the comparision is about containing the provided module name. Since what webpack is reporting is on the form of /Users/danielo/GIT/alert-tools/node_modules/lodash/isArray.js".indexOf('lodash') specifying lodash should work.
So the problem may be at a different place. Seems that including certain library on the vendor bundle does not free it from being included on a different module too.

My knowledge of webpack is limited, but I think I’m on the right track.

Hello @rstoenescu ,
I’m a big fan and evangelist of ES6 features, and I know almost all the details about them, so it is not about simple functions/helpers.
Lodash is a very good library with ton of useful and composable functions that you don’t want to re-implement yourself. For example,the code snippet you posted will work well for arrays, but map method of lodash also works with any kind of collection, not just arrays, not to mention that it is safer:

_.map(null, _.identity) // => []
x = null;
x.map(x=>x) // cann not read property map of null

Regarding installing just a sub-package a lodash is an anti-pattern for several reasons. The first one is that lodash is a very popular dependency, and it just requires a single of your dependencies to include it and you will end with duplicated code. But the most important one is that those packages has been deprecated by lodash maintainer. Yes, it was a big surprise to me too, but check this GH issue: https://github.com/lodash/lodash/issues/3565#issuecomment-353970667

Also the functions that I’m using from lodash are utilities like pipe, capitalize, snakeCase, identity… small functions that you can implement yourself, but probably with less guarantees and less efficient.

I have to say that the babel plugin of lodash makes a good job three-shaking the lodash library. My lodash bundled functions are just a few KBs (14 kb) vs the entire lodash library which is about 500 kb, so I’m very happy about it.

My only problem is that I want to include that small bundles just once. I tried marking lodas as should being added to the vendor bundle, but that is not working. I suspect because instead of being reported as plain lodash, their are being cherry picked with their entire name.
To illustrate what is happening, here is a small screenshot:

I am also experiencing this problem, In my case it is happening with lodash.
Did you found any solution to this ? All my lodash imports are using destucturing. This means that I do import {map} from 'lodash'
I expected it to just include that particular function, and not the entire lodash.

I didn’t change the webpack config at all.
Any help will be appreciated.

Regards

Hello,
I really love the datatable component and I think I’m making good use of it.
The documentation is good and clear, however I’m running into problems while using server side pagination and Vuex.
I don’t want to reinvent the wheel neither handle pagination myself, so I’m just using the built-in methods of datatable. Because I’m using Vuex to handle the state all the pagination props should come from it (page, page size, results…) so far so good. In order to activate the server side pagination you have to provide an object with pagination information and here is where the problem comes. Because all the pagination controls are coming from Vuex they must be computed components, however vue is complaining that certain computed property requires a setter that it does not have. The datatable is working properly, but I’m worried about possible performance implications and problems.

Thanks for your help.

Hello @a47ae , thank you for your response.
The part about getting the element was pretty simple, I was just using references. However, the animation part was more difficult.
May I ask why are you calculating the offset that way ? In my case the element it’s out of view, and its size is close to the size of the window. Using your code I get an offset of 18, which is barely noticeable. However, if I just use ele.offsetTop directly the element just scrolls into view perfectly, sho hence my question, why are you calculating the offset that way ?

Another thing I am unable to understand is how the (and why) the target is decided. In my case, I don’t have any element with the scroll class, so window is used. Using window and calculating the offset as I said, works perfectly. On the contrary, if I add the scroll class to the current page, then the scroll does not happen, no matter how you calculate the offset. All this stuff is very confusing.

Regards.

Taking a look at the index.js of the router I noticed that it mentions the following property : build.publicPath. Setting that property to my subdomain fixed all my problems. It was very hard to find about it because the only places where it is mention are under the CLI documentation and and configuring quasar and none of them mentions the subdomain thing, which I think they should.

Hello, I just finished a small project using quasar 0.15.2 and now it’s time to deploy it.
I am deploying it on a subdomain, for example https://example.com/myproyect. The problem is that the template is trying to fetch all the resources from absolute paths from the root of the domain, so it is trying to reach things like https://example.com/js/app.54165164.js when it should be https://example.com/myproject/js/app.54165164.js.
Where is the correct place to configure this ? How can I make the paths relative so I don’t have to re-build the app every time I change the subdomain ?
Thanks in advance.
Regards

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

I don’t need it to be a span at all. I thought that template was just for encapsulate the component, and that it will be read by quasar and transformed into dom elements. I didn’t knew that you can use as a “virtual” dom element.

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')
        }
    }

At the end it was as simple as using an img tag and put it inside a q-card-media.
Then for the background thing it was just a matter of using bg-primary class on the title:

<q-card >
        <q-card-media class='bg-primary'>
          <img src='~assets/MedUX.svg' />
        </q-card-media>
      <q-card-separator />
      <q-card-main>
        <q-field icon='person' helper='should be an email'>
          <q-input v-model='username' float-label='Username'/>
        </q-field>
        <q-field icon='lock' helper='Length is at least 10'>
          <q-input v-model='password' type='password' float-label='Password'/>
        </q-field>
      </q-card-main>
      <q-card-separator />
        <q-card-actions align='center'>
          <q-btn color='primary' label='Login' @click='submit' class='full-width'></q-btn>
        </q-card-actions>
    </q-card>

Now the only missing part is how to use a subtitle with a primary text color

Hello,
Maybe this is a stupid question, but I can’t find any example of this. I want to use an svg image to fill a card title, to totally fill it. If I use an img tag the image appears as a small circle, and I want it to fill the entire title. I also want to fill the background with the primary color.

Any guidance will be very appreciated.
Regards

@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.

Hello @Akaryatrh, I have picked eslint as an option for linting, and I picked none as preset, which I think is exactly the same as @jeimz173 did. Why I did such thing ? Because I didn’t liked any of the provided presets and I wanted to install one myself. In that situation is not legit to break the application. I don’t know how quasar-cli works internally, but if the user answers that he wants to use eslint, then all required dependencies should be installed. Allowing the user to shoot himself on the foot is never a good option.
I think my use case is legit, and should be supported too.

Regards

None of the above ways of doing it seems like a good alternative.
If you are using vuex seems that you shouldn’t use plugins at all, at least not for things that should be used from actions. Having logic both on components and store does not seems like a good idea.

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

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.

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 ?