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

@aislan

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

@olaf

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!

@aislan

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.

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

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!

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

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

Bump.

Any pointers most welcome

@aislan

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

@aislan

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.

@olaf

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!

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!

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

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