react-stick | React component to stick a portaled node to an anchor node | Runtime Evironment library

I just updated my Gatsby to v3. Right before that I had just updated gatsby-source-wordpress to v5 and everything was working with Gatsby v2.32.9

Now when doing gatsby develop, I get the following message :

After @typescript-eslint upgrade es-lint started lint errors like:

28:15 error 'token' is defined but never used @typescript-eslint/no-unused-vars

in source code:

I am using material-ui/core v.4.10.2 on the normal react-scripts start dev-server everything works perfectly.

But when built and served through Nginx or npm-module serve the rendering is not working correctly...

(I saw similar issues on the material-ui Github, but they were all (falsely) closed

So I have tables that I am trying to classify by date, with headers like (today, yesterday, last week, ...) and I am trying to make them sticky depending on the current table in the viewport. I tried using the react-sticky library specifically the stacked example as it seems to be the effect I am looking for but I am unable to recreate it.

Please, am I missing some thing on the library usage.

Also a solution without the library is very welcome

What I have been trying

Goal

I'm wanting to create a table with a scrolling body and a sticky header. The table header cell widths need to match their corresponding body column widths.

It's in React, and the Table component contain two separate components (one for the header, and another for the rows in the body). The content of the components will be coming from an outside source, so I can't make any assumptions on the widths of anything. The body of the table will have a lot of rows, so the table header is going to need to be sticky and stay at the top.

Problem

While the widths of the columns in the table body are automatically set, the widths are not automatically set in the table head. The table header widths need to be automatically set based on the contents of the table.

You can see the issue and my test code here: https://codesandbox.io/s/y0jx5rp081

Things to note

• I'm open to using plugins or libraries if there's a good enough reason, but would rather not if possible
• I've already tried react-sticky, which doesn't support table format
• I've also tried react-sticky-table, which doesn't allow me to split the table into row components, which I need to do in order to help with more efficient rendering
• Once again, I need the widths to all be set automatically. The only solutions I have seen so far involve setting the width in the header manually

• I am trying to add the react sticky header to my stepper.

• but the problem is if I add inside my App.js its not rendering.

• so I started debugging the App.js code.
• if I give console inside my render method of App.js its not displaying console.log("App---->");
• right now I am getting Cannot read property 'getState' of undefined error
• can you tell me how to fix it.
• so that in future I will fix it myself.
• providing my code snippet and sandbox below

https://codesandbox.io/s/6zv5n0ro9z

App.js

I am using below react component https://www.npmjs.com/package/react-sticky-table

Is there a way to add a border to this component?

I added an external component module that does not include @type. I modified a sample to like this.

https://www.npmjs.com/package/react-sticky-table

I am using material UI and react-sticky and its working good but i got one issue. https://codesandbox.io/s/xv41xzvyp I have shared what i have tried yet. Step to reproduce

1. Go to bottom of first tab and tab will stick
2. Try to go another tab but content will stay there it need to scroll to start position and