We were discussing build times in #ionic-questions Slack channel today and Mike noted that you should be on Node v10. Apparently, the @LTS has some bugs that are affecting performance. If you haven't upgraded and plan to do any work with Ionic v4.0, I recommend it. It significantly improves build and refresh tine. Specifically, I installed v10.12.0.
The Fabric React DetailsList component is a great way to display your tabular data when building an SPFx web part. It's nice, but if you have a lot of rows in your list, you might need a sticky header so that you can see which column you are looking at. As a developer building out this scenario for the first time, you might run into guidance and a code sample from the ScrollablePane documentation. I found this hard to find because I would expect this example to be linked to the DetailsList documentation. This will get you up and going fairly quickly. However, when you are implementing it using the code sample, you'll find that there isn't an event called onScroll on DetailsList when you are building an SPFx web part. That's because that event doesn't exist in Fabric React 5. Maybe you proceed anyways and notice that the sticky header is working just fine. At least you thogught it was working.
Here's where the problem starts. if you have a lot of columns (or your users' screen resolution is very low), you may need to deal with horizontal scrolling. Nothing good ever comes from horizontal scrolling. When you need to horizontally scroll, a scrollbar appears in the sticky header. Great. That's exactly what you wanted. The problem is the rows in the grid, don't scroll with it. Now you have columns that don't line up to the data. That's a problem.
When trying to fix it, you might run into the following issue on GitHub. This pointed me in the right direction. The answer is to react to the scroll events and set the scrollLeft property to match. You need to create a new function to listen to the scrolling of the div element. This effectively responds to the scrolling of the div element where your content is and sets the scroll of the Sticky to match it. It's pretty simple.
private handleScroll(event) {
let element = document.querySelector("[class*='stickyAbove-']");
if (element != null)
element.scrollLeft = event.target.scrollLeft;
}
Then all you need to do is add the event to your div element that contains the ScrollablePane.
<div
style={{
height: '1000px',
position: 'relative',
maxHeight: 'inherit'
}}
onScroll={this.handleScroll}
>
This helped me to part of the solution but not all of it. This only handles when the user scrolls the data using the scrollbar at the bottom. What we need to add to it is an event to respond to when the user scrolls the Sticky element. I did this by registering an event handler in componentDidMount. I used pure JavaScript in my example, but you could reference the Sticky component using componentRef if you wanted.
public componentDidMount(): void {
let stickyElemrent = document.querySelector("[class*='stickyAbove-']")
if (stickyElemrent != null) {
stickyElemrent.addEventListener('scroll', this.hnadleStickyScroll);
}
}
In my event handler, we have similar code except that we are getting a reference to the DetailsList element.
private hnadleStickyScroll(event) {
let gridElement = document.querySelector("[class*='ms-DetailsList']");
if (gridElement)
gridElement.scrollLeft = event.target.scrollLeft;
}
Once you add this, you should be able to scroll your rows of content or the sticky header horizontally and they will stay in sync. If you have run into this issue, give it a try.
You just built this amazing SPFx web part and it works great in modern browsers. You then go to test (or even worse your users go to test) and you find that nothing works. After examining your logs, you start finding the following error message.
TypeError: Object doesn't support property or method 'from'
What does that mean? Basically, all of your calls to SharePoint made through PnPJS are failing. You start to panic as you realize everything you built doesn't work in IE11. Not to worry though, this can be fixed. After doing some research, you might stumble upon this issue reported in GitHub. The reason for this is that in version PnPJS 1.2.0, they dropped direct support for Internet Explorer. That doesn't mean you are out of luck though and you need to go tell the client the solution you spent weeks on won't work for half their users. You just need to add the right polyfills to your project and you are back in business.
Just add the following polyfills to the relevant part of your project.
import "core-js/modules/es6.promise"
import "core-js/modules/es6.array.iterator.js"
import "core-js/modules/es6.array.from.js"
import "whatwg-fetch"
import "es6-map/implement"
I find that if you are developing an SPFx web part, you can just add this to the web part's class (not the React component). Add them anywhere near the top of that class and your IE users should be able to use your web part as intended.