search

daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 519 forks source link

Performance issue #626

Open AdnanInayat opened 6 years ago

AdnanInayat commented 6 years ago

I used md data table with all fields editable. In my table all all column have editable fields. There are around 700 rows(paginated) and in each row, 3 columns have dropdowns with almost 100-200 options in those dropdowns. Others are simple input fields.

Problem is when I try to go to next page it just halt the browser and eventually, browser throws error to either kill or wait more for the action to be completed.

Can anyone help me here???

samal-rasmussen commented 6 years ago

md-virtual-repeat should help a lot: https://material.angularjs.org/latest/demo/virtualRepeat https://material.angularjs.org/latest/api/directive/mdVirtualRepeat

It will make sure that you are only actually rendering what in visible in the table.

Other than that you can try to make each cell show a read only value until the user clicks the cell. Then you'll enable the read/write component for that cell until the user presses enter/tab/escape or clicks somewhere else. This way you aren't showing complex components in each row all the time, but rater just simple interpolated text or number strings. This should be much lighter.

AdnanInayat commented 6 years ago

Thank you @samal84 I will try it when and let you know. I think virtual repeat will resolve the issue. I will try to combine both solutions you told me. Thank you again 👍