React virtual list component: Programmatically scroll down - javascript

I use React Grid with Virtual Scrolling. Unfortunately, it doesn't have "scroll to row feature". Sometimes, I need programmatically select a row in my React Grid and show the selected row to a user. I know the ID of the desired row, but I am not able to use document.getElementById('elementID').scrollIntoView() because this row has not been generated in the DOM so far.
Any ideas how to solve it? I need a virtual list because of performance and need any that supports grouping of items.

you can use react-scroll-to-component, it will make a smooth scrolling to the referenced component.
I use it and it works great.
Running example I've made

Related

How to make a table with expandable (expand and collapse) columns in React (and MUI)?

I am using Material UI table components (which is not more than a styled and convenient API for HTML table elements) and I want to make my columns expand collapse on click.
This means that I need that when I click on a column, its sub-columns will be visible and all the rows will also show values for the sub-columns, and when I click on the main column again, the sub-columns will collapse and be invisible again, along with all the values in the rows for those sub columns.
I would also like it to be animated with a nice transition of the columns expanding from the main column into view and collapsing into the main column to invisible.
It doesn't necessarily need to be in react or using MUI, it could regular HTML and CSS, but the animations are crucial!
Thank you in advance for the help :)
I tried to use MUI tables components with the Collapse component (which is an animation component to put things into view with a nice transition) but it was neither smooth nor pretty and not even working properly as the columns were sometimes not aligned..
I've looked everywhere on google and couldn't find any example/library for such a feature anywhere.
I was only able to find examples for expand/collapse rows..

React Virtualized List losing focus after arrow key scrolling within container

I'm using react-window library as a way of virtualizing an item list. And while I'm making it accessibility proof by using arrow keys to navigate through the items, I noticed that at some point, the focus on the items would be lost. Falling back to body element.
At first I thought it was something in the app causing it, but when I checked the library demo I noticed it's replicable there.
The way to test it is just click in the container and start using the arrow keys to navigate/scroll through the list. You will see that eventually the focus on the scrollable container will be lost.
I thought that it could possibly be some rendering time issue on the virtualized items, letting some space or time to render so you would move smoothly without losing focus, especially if you go fast.
So what I attempted is whenever I move to an item up/down, I would scroll the container so that the item is always centered, kind of forcing the list to render more and more items. But unfortunately it didn't work.
Do you guys know how to achieve this without losing focus? Any ideas? I can't have an accessibility experience where the person loses focus out of nowhere.
Thanks in advance.

I ViewUI Vue.js show more expanding component

It's used on all the demos, the clickable blurred expand/collapse button. Is there a component for doing this for you or a demo that shows the code/styles used to do it? Would figure since they use it for all their demos and they have variations of it, they must have one in there.
https://www.iviewui.com/components/card-en
I'm hoping there's a wrapper component that does it for you. The blurring effect and the auto-expanding button. I've had to implement my own by hooking into the element and using scrollHeight/clientHeight. Hoping for a component that does the blurring and expansion for you. I'm open to other libraries.
Created my own using $refs and checking scrollHeight and clientHeight.

Problems with height of containers with Angular Material Tabs

I'm making an Angular-app using Angular Material, and I'm having big issue with the height of my tab content. This is my first attempt at Angular, but I'm familiar with HTML, CSS and JavaScript.
The situation is that I have an app with the MatSidenav component, and inside the Sidenav content I have a MatTab component, which contains a wrapper to load other components dynamically into new tabs. This all works as I want it to, the problem is the content of the tabs, specifically the tabs that get their content after the tab is created (e.g. tabs containing components that load data from the REST service).
I've created a stackblitz based on my actual app, to illustrate the problem.
When going to "Test One" from the menu, it only shows the buttons on the top. The "Get Data" button will simply populate the BehaviorSubject that the data table (AgGrid) uses, (sort of an attempt at simulating a REST-call, which the actual app has). All gets populated and shown as I want, but the container element (one of them, I can't for the life of me figure out which one is the actual cuprit) isn't high enough, so the table doesn't actually show.
The "Test Two" is just an example of a tab with static content, which displays as I expected (same as the Home-tab really).
I've put a button to toggle the height property of the container-div of the table between 500px and blank. Of course, this would be great if I wanted a static height value of 500px (or any px value), but I want it to be as high as the remaining part of the viewport.
I've tried messing with the dynamicHeight property of the mat-tab-group, but if I turn that off it causes a whole deal of other problems since I have tabs with very variable content heights.
I've also tried with various flexbox settings, using both Bootstrap d-flex as well as Angulars own ngFlex, but nothing seems to work.
Now this specific case is for the AgGrid table, but I'm having the same issue with a tab with Google Maps embedded, but I figure if I can solve this one, I'll be able to apply a similar method to fix the maps issue. I'm assuming it is caused by the content changing after the page has been rendered, but that's sort of the point as well, and so that the CSS doesn't seem to keep up confuses the hell out of me.
The only way I've managed to solve this, is by using JavaScript and setting the heights of various elements in ngAfterViewInit and binding an event to window resize, but this seems like a very hack-ish way of doing it, and it also means I have to do it for all components that can be loaded into tabs, not just where I'm currently having problems (because I have to set the height of several of the Tab container elements, which will be the same elements even when tabs are switched).
Any help with this would be greatly appreciated.
I've only used ag-grid sparingly, but I have noticed that they handle height strangely. I think you're missing a 'autoHeight' domLayout property:
<ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-balham mat-elevation-z8"
[rowData]="loadedData"
[columnDefs]="agtablecolumns"
[domLayout]="'autoHeight'"
>
</ag-grid-angular>
Adding that in the stackblitz caused an empty table to appear before any data is retrieved, though. Not sure if that's the goal.

Is it possible to add infinite scrolling to React Tool Box Table body?

I am using react-toolbox table component in my app(react-toolbox for material styles implementation). I need to add infinite scrolling pagination for the table body. I found some libraries which does this for me, some of those are react-infinite, react-infinite-scroller, But the problem is, to use any library I need to put table rows as children inside the their library component, but ract-toolbox table does not allow me to use any div's or special components inside, from the docs:
An element that represents a row in the Table. It should be place as a
direct descendant of Table and it should has TableCells children. It
receives extra properties from Table to decide if checkboxes should be
placed as a first column.
Actually there is a closed issue on their library but it does not solved my problem. Please help me to do this, or suggest me a suitable library (or) if there is any other way to infinite pagination with out using any library?
Any help would be appreciated.
Try to wrap a table inside a div and give a fixed height to that div also make overflow-y: scroll table will be rendered inside the div which will be scrollable and also of fixed height.
Then render this whole markup as children of react-infinite-scroller

Categories