paper-data-table
paper-data-table copied to clipboard
ibarrick
Slow rendering
{{#paper-data-table class='flex flex-100' sortProp='fullName' sortDir='asc' selectable=true as |table|}}
{{#table.head as |head|}}
{{#head.column checkbox=true}}
{{#paper-checkbox disabled=true onChange=null}}{{/paper-checkbox}}
{{/head.column}}
{{#head.column sortProp='fullName' }}Name{{/head.column}}
{{#if (not-eq search.profileType 'patient')}}
{{#head.column sortProp='email' }}Email{{/head.column}}
{{/if}}
{{#head.column sortProp='timestampCreated' numeric=true}}Date Created{{/head.column}}
{{#if (eq search.profileType 'patient')}}
{{#head.column sortProp='dataOrigin' }}Data Origin{{/head.column}}
{{/if}}
{{#if (eq search.profileType 'account')}}
{{#head.column sortProp='emailVerified' }}Verified{{/head.column}}
{{#head.column sortProp='accountType' }}Account Type{{/head.column}}
{{/if}}
{{#if (or (eq search.profileType 'specialist') (eq search.profileType 'practice'))}}
{{#head.column sortProp='isSubscribedToBooking' }}Has Booking{{/head.column}}
{{#head.column sortProp='status' }}Status{{/head.column}}
{{/if}}
{{/table.head}}
{{#table.body as |body|}}
{{#each (sort-by table.sortDesc currentPage) as |profile|}}
{{#body.row edit=true as |row|}}
{{#row.cell checkbox=true}}
{{#paper-checkbox value=profile.checked onChange=(action (mut profile.checked)) }}
{{/paper-checkbox}}
{{/row.cell}}
{{#row.cell}}
{{#paper-button iconButton=true onClick=(transition-to (concat 'profiles.' search.profileType '.edit') profile) }}
{{paper-icon 'exit to app'}}
{{/paper-button}}
{{titleize profile.fullName}}
{{/row.cell}}
{{#if (not-eq search.profileType 'patient')}}
{{#row.cell edit=true as |cell|}}
{{#paper-button iconButton=true onClick=cell.toggleEdit}}
{{paper-icon 'visibility'}}
{{/paper-button}}
{{truncate profile.email 25}}
{{#if cell.showEdit}}
{{#paper-dialog focusOnOpen=false origin=dialogOrigin fullscreen=fullscreen clickOutsideToClose=true onClose=cell.toggleEdit}}
{{#paper-dialog-content}}
{{profile.email}}
{{/paper-dialog-content}}
{{#paper-dialog-actions class='layout-row' }}
{{#paper-button primary=true onClick=cell.toggleEdit}}
Close
{{/paper-button}}
{{/paper-dialog-actions}}
{{/paper-dialog}}
{{/if}}
{{/row.cell}}
{{/if}}
{{#row.cell numeric=true}}
{{format-date profile.timestampCreated format='ddd, MMM Do, YYYY h:mm a' }}
{{/row.cell}}
{{#if (eq search.profileType 'patient')}}
{{#row.cell}}
{{profile.dataOrigin}}
{{/row.cell}}
{{/if}}
{{#if (eq search.profileType 'account')}}
{{#row.cell checkbox=true}}
{{#paper-checkbox value=profile.emailVerified onChange=(queue (action (mut profile.emailVerified)) (route-action 'updateVerified' profile))}}
{{/paper-checkbox}}
{{/row.cell}}
{{#row.cell class='layout-row layout-wrap flex-100 layout-align-space-around-center' edit=true as |cell| }}
{{titleize profile.accountType}}
{{#paper-button iconButton=true onClick=cell.toggleEdit}}
{{paper-icon 'edit'}}
{{/paper-button}}
{{#if cell.showEdit}}
{{#cell.edit-dialog onClose=cell.toggleEdit}}
{{#paper-select options=(get editStatuses search.profileType) label='Status' selected=profile.accountType class='layout-fill' onChange=(queue (action cell.toggleEdit) (action (mut profile.accountType)) (route-action 'updateAccountType' profile)) as |accountType|}}
{{titleize accountType}}
{{/paper-select}}
{{/cell.edit-dialog}}
{{/if}}
{{/row.cell}}
{{/if}}
{{#if (or (eq search.profileType 'specialist') (eq search.profileType 'practice'))}}
{{#row.cell edit=true as |cell| }}
{{titleize (concat '' profile.isSubscribedToBooking)}}
{{#paper-button iconButton=true onClick=cell.toggleEdit}}
{{paper-icon 'edit'}}
{{/paper-button}}
{{#if cell.showEdit}}
{{#cell.edit-dialog onClose=cell.toggleEdit}}
{{#paper-select options=(array true false) label='Status' selected=profile.isSubscribedToBooking class='layout-fill' onChange=(queue (action cell.toggleEdit) (action (mut profile.isSubscribedToBooking)) (route-action 'updateBooking' profile)) as |isSubscribedToBooking|}}
{{titleize (concat '' isSubscribedToBooking)}}
{{/paper-select}}
{{/cell.edit-dialog}}
{{/if}}
{{/row.cell}}
{{#row.cell class='layout-row layout-wrap flex-100 layout-align-space-around-center' edit=true as |cell| }}
{{titleize profile.status}}
{{#paper-button iconButton=true onClick=cell.toggleEdit}}
{{paper-icon 'edit'}}
{{/paper-button}}
{{#if cell.showEdit}}
{{#cell.edit-dialog onClose=cell.toggleEdit}}
{{#paper-select options=(get editStatuses search.profileType) label='Status' selected=profile.status class='layout-fill' onChange=(queue (action cell.toggleEdit) (action (mut profile.status)) (route-action 'updateStatus' profile)) as |status|}}
{{titleize status}}
{{/paper-select}}
{{/cell.edit-dialog}}
{{/if}}
{{/row.cell}}
{{/if}}
{{/body.row}}
{{/each}}
{{/table.body}}
{{/paper-data-table}}
The above is my table and I'm wondering if there is anything I am doing so badly that is causing it to render so slowly i.e. 3 secs after data before actually showing
I am now facing the same problem, with increasing table size the rendering gets really slow. I think this is caused by the amount of components that are instantiated at once.
@devotox I fixed the performance issues by preloading all the data I want to display in the table.
I've had success using paper-data-table with paper-virtual-repeat from ember-paper. You have to set containerSelector="md-body" and ignoreOffsetter=true and itemHeight=56.
When I have a chance I will try to get the table working with smoke-and-mirrors, but I don't have time at the moment.
Additionally, I've been able to tweak performance by replacing cells and rows with their actual markup in cases where I'm not using any of the features that the component enables. For example, replacing {{#row.cell}}{{/row.cell}} with <td class="md-cell"></td> or whatever the markup for that cell will end up being. Obviously that won't do if you need access to edit-dialogs and such.
This was a bigger deal before Glimmer2 because initial render of components was expensive, it shouldn't be as big of a deal with Glimmer 2.
@n1ru4l I have the data preloaded haha that has at least cut me down to around a 2 sec rendering time but that is just the point that makes the whole application feel slightly janky. Im also only loading a maximum of 50 rows from my DB so its not even huge set of data. @ibarrick could you give me more insight into this workaround
@ibarrick I am on Ember 2.13 so i should have Glimmer 2 and this is still an issue
@devotox Unfortunately I haven't had time to look into it. Have you tried looking in ember inspector to see which components are causing the delay?
This may be only a small improvement, but you can replace {{#row.cell as |cell|}}{{/row.cell}} with <td class="md-cell"></td> in instances where you don't actually use the yielded out cell. This will be a small boost to performance because Ember will not have to create a new component object since you don't require any of the functionality that the component enables.
Ideally, this shouldn't be an issue at all so if you are able to get any insight into which component is slowing things down do let us know!