No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. rund1me
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 15
    • Best 1
    • Groups 0

    rund1me

    @rund1me

    1
    Reputation
    125
    Profile views
    15
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    rund1me Follow

    Best posts made by rund1me

    • RE: Select unusable with a lot of data

      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.

      posted in Framework
      R
      rund1me

    Latest posts made by rund1me

    • RE: How to UPGRADE from Quasar 0.17 to 1.0 beta

      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)

      posted in Help
      R
      rund1me
    • RE: Select unusable with a lot of data

      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.

      posted in Framework
      R
      rund1me
    • RE: Q-table Slow conditional rendering

      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.

      posted in Framework
      R
      rund1me
    • RE: Q-table Slow conditional rendering

      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!

      posted in Framework
      R
      rund1me
    • Select unusable with a lot of data

      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!

      posted in Framework
      R
      rund1me
    • RE: Q-table Slow conditional rendering

      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.

      posted in Framework
      R
      rund1me
    • RE: Q-table Slow conditional rendering

      just wanted to ask how i can help with the issue

      posted in Framework
      R
      rund1me
    • RE: Q-table Slow conditional rendering

      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

      posted in Framework
      R
      rund1me
    • Q-table Slow conditional rendering

      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!

      posted in Framework
      R
      rund1me
    • RE: Quasar Table Jump to page

      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!

      posted in Help
      R
      rund1me