Best practice for use of grid in the web (desktop browser) application, scrolling is the biggest concern
Grid is the name for the extended table component, that allows the scrolling, ordering, sorting, grouping of the columns, allows to select one or more rows, sometimes allows to select single cells and that sometimes allows to edit cells. Cells can have quite complex editors (date/time, mask-edit, color picker, file loader, and so on). Usually there are quite complex grid components available from the component vendors.
My question concerns web (for desktop browser) application. There are 2 examples how the grid can be set up:
- https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/data-editing/ Good: the grid uses the the page scroll. Bad: the page scroll can move the column header row (column titles) away from the visible field of the page
- https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/virtual-scrolling/ Good: the grid at least tries to provide the fixed (always visible) header row. Bad: the grid uses inner scroll and such inner scorll may (or may not) interfere with the page scroll, double scrolling is really confusing.
Grid is provided as the one component (e.g. as the React component/tag). The best use that I can imagine is: the grid component should fill all the remaining space of the page, strictly use the vertical and horizontal scroll of the page (and does not try to introduce its own internal scrolls) and that some parts of the component (e.g. fixed header row and maybe fixed footer row (with the numerical summaries for each of the column)) are position-fixed in the page so that they remain visible all the time. Does this usage description adheres to the best practices of the UX? Or maybe I should avoid the tabular grids in the modern web application (e.g. the list of panes in the stackexchange's question timeline is one example for alternative solution). Scrolling and absolute positioning of the header and footer rows are my biggest concerns.
I am developing application of the desktop browser. This application expects quite complex actions from the user that is why I don't predict that the application will be used from the mobile devices. Of course, I can provide the mobile version as well, but I don't see why users should use it.