It would also help just to get the error messages again, currently we would like to be early adopters and give it a try but i dont know how to enable the error messages (same as OP)

That got me thinking that there is maybe something one could do in regards to performance? I Know for this i should useh the q-autoselect over a q-input and will also use this(in that case), but i still think that there is a rendering speed issue which i just wanted to report.

Aehm sorry guys just wanted to help you where i thought might be an issue in regards to performance, i dont actually use the select like that. i was just suspecting that there might be an issue when the table acutally renders pretty fast (also when using pagination all) and the select hangs. I just used this data size so that you might see that one could maybe increase the performance. Event with a few elements in the select a few ms here and there can always make a difference.

I understand that problem now but either way iam a bit hesitant of what i should do now. I dont need them to be reactive, but i dont actually want to revwrite components which have a certain look and feel and some functionality (button, icon, select, …) given by the framework, which will only result in a lot of work and changes made in the framework (style, functionality) will never be reflected in those components.

Theoretically asking:
Is there a way to convert a quasar component to a non reactive component (i know this sounds stupid) by overriding some functions and props?
Especially the QBtn and QIcon would be great.

Thanks for the help!

So what i have seen in my case (260 rows/ 9 Visible columns):

1. Basic table without checkboxes: 145 ms vue <QTable> patch
2. Basic table with checkboxes: 1.12 s vue <QTable> patch (QCheckbox -> init, render, patch)
3. Basic table with QTd and checkboxes: 5.6 s vue <QTable> patch (QCheckbox, QTd, QBtn, QIcon, … -> init, render, patch)
   All of the QCheckbox, QBtn, … are taking between a few us till 20 ms

Keep in mind iam running the dev version here.
So i can practically confirm your description with all the components beeing rendered.

Is there any way i can pre-render the components in the row so i can maybe use the html directly with all the classes, etc… Somehow this could increase the performance drastically without sacrificing the usefulness of them. The best thing would be if we dont have to render the Qtd too.

Cheers!

Hi There,

During my performance testing with lots of data i found the following when using selects with a lot of data they are incredible slow to the point where they actually crash to browser.
https://jsfiddle.net/t5kmf68p/1/ --> select with 30k entries

What got me wondering was that the datatable even with a filter and more columns can still be used with this much data (not using conditional rendering).
https://jsfiddle.net/ydrouaz8/1/ -> datatable with 30k entries

That got me thinking that there is maybe something one could do in regards to performance? I Know for this i should useh the q-autoselect over a q-input and will also use this(in that case), but i still think that there is a rendering speed issue which i just wanted to report.

Again, if i can help to trace some problems just tell me!

Cheers!

Thanks a lot for the info…
Freeze helped a bit, but with not using components it doesnt help much to reduce the speed.

Btw…
Is there any hook where i can tap into to measure the performance of the render process (start and end)?
I would like to build this table with a few options so i can trace the bottlenecks and throw out stuff/replace it.

just wanted to ask how i can help with the issue

Thanks!

This decreased the rendering time a bit in my application(not the example) from 14s to 8s. still this is to long compared against the 2s using it without conditional table cell rendering.

I would really like to help here, to reproduce it and give you some examples.

1. Question: is there a way i can trace the time for the table to be re-rendered? i tried to watch pagination change but the change is triggered before the time intensive stuff happens and then i dont know where to stop the timer.

2. Is there a way to at least display the table loading while the rendering process is working (start render event, end render event)?

3. What i can see currently is that the whole browser is hanging while the rendering is happening (loading to true, hangs the loading bar, …)

4. What i can already say is that its not the filter and sort method which take the time!

cheers

Hi There,

I have experienced slower rendering when using conditional rendering of the q-table.
When extening to All the table renders quite slow, the more columns there are, it seems every conditionally rendered column decreases the speed by around 1s in this case.
Also it seems to me the more complex the conditional render is, the slower it renders (slower when using q-tooltip, than other)

Here is a example of the slow rendering (expand to all rows, measure time):
https://jsfiddle.net/gjqspb9m/

what can i do about that?

Cheers!

i have done the following now:
I have overwritten the default sort (actually with the same code as the default table sort) and added the __sortedIndex:

  tableSort (data, sortBy, descending) {
      const col = this.columns.find(def => def.name === sortBy)
      if (col === null || col.field === void 0) {
        let sortedStuff = data.slice().map((row, i) => {
          row.__sortedIndex = i
          return row
        })
        return sortedStuff
      }
      const dir = descending ? -1 : 1,
        val = typeof col.field === 'function' ? v => col.field(v) : v => v[col.field]
      let sorted = data.sort((a, b) => {
        let A = val(a),
          B = val(b)
        if (A === null || A === void 0) {
          return -1 * dir
        }
        if (B === null || B === void 0) {
          return 1 * dir
        }
        if (col.sort) {
          return col.sort(A, B) * dir
        }
        if (isNumber(A) && isNumber(B)) {
          return (A - B) * dir
        }
        if (isDate(A) && isDate(B)) {
          return sortDate(A, B) * dir
        }
        if (typeof A === 'boolean' && typeof B === 'boolean') {
          return (a - b) * dir
        }
        [A, B] = [A, B].map(s => (s + '').toLowerCase())
        return A < B ? -1 * dir : A === B ? 0 : dir
      })
      let sortedStuff = sorted.slice().map((row, i) => {
        row.__sortedIndex = i
        return row
      })
      return sortedStuff
    }

It would be nice to have a callback after sorting is done so we can add the __sortedIndex in this case so its not necessary to re-code the default sorting.
also i am watching the selected rows change, and the pagination object change and select the page in the pagination object. this is done by using the default __index if not sorted and if available the __sortedIndex:

selectedRows (what) {
      if (what.length > 0) {
        let idx = what[0].__index + 1
        if (what[0].__sortedIndex) {
          idx = what[0].__sortedIndex + 1
        }
        let newPage = idx / this.paginationControl.rowsPerPage
        this.paginationControl.page = Math.ceil(newPage)
       
      } else {
        this.paginationControl.page = 1
      }
    }

It somehow works even with filtering, what i dont understand.
do you have any better solution to this or do you see any problems here?

Thanks for the help and Cheers!