I am trying to use Material UI data grid to display option chains. Essentially, I am creating 4 datagrids, each with 172 rows, and a page size of 100 (so about 700 total rows). To load the 4 grids, or to select and unselect values in the table, can easily take a few seconds. Being that they claim this comes with "blazing fast" performance, I am wondering if material ui data grid can actually handle this? Is there anything within the data grid I can use to improve my performance? Or is there an issue with my code (I am aware I am not providing code, it should not be relevant; if others are experiencing material UI is good for this kind of work, then I know its my code)?
Material UI has been an amazing framework and it handles DataGrid pretty well.
As the code is not available, cannot comment on the performance of what you are looking for but yes as per my experience its blazingly fast.
Also as per the details you have given, loading so much data at once will definitely take some time. So, try loading in smaller chunks at first if this can be done else if MUI fails, there are other alternatives too if you wish to explore:
1. Material Table
2. React Table
3. Ag-Grid
These are easy to use and fast too.
Related
Can someone help me to decide when i should use The Table component over the Data Table with "Editable" option selected?.
I know the logic approach could be to consider the amount of information the table will present in the coach and Choose Data Table for large chunks of data, however, with the capabilities of the normal Table (Pre-load, Lazy load) is not clear when to use one over the other.
Thank you
If you use the Data Table control with "Editable" selected, you're actually using the exact same code-base as the Table control.
So the real question is: "When should I use Editable vs. Read-Only?"
My answer to that question is:
If you have a small dataset, always use Editable. This will greatly simplify things.
If you have a large dataset, but you need to allow inline editing, use Editable.
If you have a large dataset, and you do not need to allow inline editing, I would still recommend using Editable mode unless performance becomes an issue. The reason I say that is Read-Only mode treats every control in your table as output text and ignores some configurations that you might have considered important when building your table. Additionally, it makes it complicated to use modal displays inside of your table.
So to summarize, you should really only use Read-Only mode as a last resort. Even then, there are other approaches for improving table performance, including the Server-Side loading option.
For more information, please visit this link.
Hope that helps,
Gordon
I am looking at various widget libraries, and ran across OpenUI5. It appears to be reasonably complete. The one thing I can't seem to find is any grouping functionalities for Grids. For example, in other grids, I can grab a column, and drag/drop it into the header portion of the grid, and now my data is grouped by that column. I can do this for multiple levels. After doing this, the data is laid out almost like a combination tree/grid control. I find this very valuable. Does OpenUI5 support this? If not, is it in the plans? Here is an example
OpenUI5 has two main Table controls, one for it's Mobile-oriented library (sap.m), and one for it's Desktop-oriented library (sap.ui.table).
These table's do support drag-and-drop of columns, but for re-ordering not for grouping.
The merging feature of the sap.m table may be of interest, though it's not really the same as grouping. Also note the multi-header feature.
Another control similar to your use-case could be the TreeTable.
But, in short, it does not look like out-of-the-box OpenUI5 has a control that exactly matches your use-case.
I will say that it is pretty easy to extend OpenUI5 controls as they have a nice OO-flavored jQuery extension approach.
You could also open an issue on their GitHub page to make this a priority for a future release.
I am struggling myself thinking about which component to use in my new app.
The first screen I am using Collection View with big images. Once the user touches one cell, it goes to the second screen ... and here is the problem.
I have three columns, similar to a dictionary with first language, second and third. The user will be able to choose which column he wants to search, and according to his criteria it will show the result that matches. I am not sure how to implement this, which component gives the best experience to the user. Any idea is more than welcome. Thank you in advance. Alex
If your data is several rows each with 3 columns, I would recommend customizing a UITableView. I followed this tutorial when I was trying to set up something similar.
The Table View will also give you efficiency if you have a lot of data, and you can build the custom table cells in the interface builder so that makes life a little easier.
-Ken
I am building a form for parents to enter health information for their students. Our nurses want to build it similar to what you fill out when you see a new doctor where they have categories and then conditions within the category that you would check if they apply to you. They want the number of categories and conditions to be variable so they can change them willy nilly as desired.
I need some ideas as to how to approach the UI side. My initial thought is a parent gridview with a row for each category and then inside that, a child gridview for each condition with its own checkbox. I already do a bit of work with gridviews and know how to access the nested objects so I'm not terribly worried about how to get the data back.
My question is this: Is there a better way and what suggestions would the community make that might be different or more efficient than using nested gridviews?
+1 for asking is there a better way?
What I'm about to suggest may end up being a little more complicated at first, but rest assured it will be worth it in the end.
There is a JavaScript framework named Knockout.js that is perfect for situations like these. Knockout vastly simplifies situations that where a variable amount of UI controls are needed.
http://knockoutjs.com/
Here is a tutorial on the website that has a similar situation to yours:
http://learn.knockoutjs.com/#/?tutorial=collections
In my asp.net application I have a form where a user can pick a few skills (there are over 40) and per skill can define his skill level (value from 1-10).
My initial idea was to show 1 combobox with a slider next to it.
Everytime the user picks a skill a new combobox with all the skills + slider appears underneath it and the picked skill combobox + slider gets a delete button next to it, in case they want to delete the previous selected skill.
At first this seemed like a good idea, but now that I'm building it it looks kinda weird and not that intuitive.
How would you guys implement this?
Combo box for multiple selections with additional input is not a good idea. Can you list the skills ( I know 40 is quite a few, but it depends on the aplication usage )? Having a skill, with a checkbox ( that can be unchecked ) and a slider of level appearing to the side would be my initial thought.
Of course, UI design is very specific to a particular application and user base. Different applications have different requirements.
ETA - based on comments, the other option is to split the task into two pieces ( TBH, that would probably be a better and more efficient solution to this task. That is my PhD study area, so I might know what I am talking about ). Can you have one page to select the list of skills, and another to list the selected ones, with sliders on ( and "remove" options too ). From a useability perspective, I would think this might be easier.