Improve the Demo page in the docs (replace BigExample, fix iframe-related problems)

[krzysztofspilka]

Description

We restored the demo page at https://handsontable.com/docs/demo/ but we need to put finishing touches to it.

We can achieve that by:

• Removing tabs (.row .tab)
• Placing links to GitHub below the demo under the header "Find the code on GitHub"
• Setting the background to transparent (.bigPreviewExample>div:not(.tab))

Before

After

[warpech]

In other words, remove <BigExample /> is favor of an iframe and a list of links. As an author of that component, I can do that.

[warpech]

There are more problems with the Demo in the Docs that need to be urgently fixed. Most of them were found in https://docs.google.com/spreadsheets/d/15q2Bv4UCIoXLktZDDqSTupTLSSO0BWvoxfJbeUbCauU/edit by @aninde and @krzysztofspilka:

1. After filtering by column Rating (stars) and vertical scrolling there is some row-headers misalignment
   • @aninde please provide steps to reproduce.
2. Autofill doesn't work
   • I can reproduce. I don't think iframe is to blame, because it works in other iframes
3. This demo isn't exact copy of the https://handsontable.com/demo. Column order is different
   • I think it is not a problem. this was done on purpose by me (https://handsoncode.slack.com/team/U4RV24US2), because the content column is narrower in the docs.
4. We missing checkbox in the rows headers.
   • I can reproduce, probably it was done by mistake
5. Column menu, context menu don't fit in the iframe.
   • Related to the iframe. If I remember correctly, there was a solution for it, but it is not documented. (Slack thread https://handsoncode.slack.com/archives/C4PV4S33Q/p1653468120335759). If not, we can solve that by incresing the container height so that it is larger than the menu height.
6. Enable numeric editor in the Stars and Chart cells.
7. Removal of the abnormally high row causes the grid to show the blank space above it instead of the remaining rows. Steps to reproduce: Edit a cell, insert multiple newline characters (ALT+ENTER), close the editor, delete the whole row.
   • Edit: I asked @aninde to investigate, this should be a separate issue because it is not related to this demo: https://handsoncode.slack.com/archives/C01SYSTAGCT/p1653566463432189
   • Edit 2: This might be solved in Only first column renders if it's wider than the viewport #9473, because it's the same problem on a different axis

I am removing it from the React docs project, because I think it can be fixed separately and quicker on develop.

[aninde]

1. After filtering by column Rating (stars) and vertical scrolling there is some row-headers misalignment

Reproduction

1. Filter by value 3 on column Rating
2. Scroll horizontally to the right

Result:
Too much offset between cells and headers. The cells slide under the wtHolder headers

[warpech]

The PR #9531 implements the problem expressed in the first message, but not the problems implemented in the later comments.

[warpech]

Another (maybe) problem:

8. When a filter is expanded, its position is not updated after scrolling:

[warpech]

I created a new issue to remove IFRAME from the Demo page: https://github.com/handsontable/dev-handsontable/issues/34

Other issues about bugs in Handsontable related to iframe (not to the Demo page) should be reported as a separate issues. Then this issue can be closed. @aninde can you do that?

[aninde]

1. Improve the Demo page in the docs (replace BigExample, fix iframe-related problems) #9209 (comment) reported as Misaligned column headers in the main demo #9580

2. Autofill doesn't work

shouldn't, is not imported.

3. 3., 4., 5. all done
4. reported as Progress and Rating columns should be editable in the main demo #9581
5. resolved
6. Improve the Demo page in the docs (replace BigExample, fix iframe-related problems) #9209 (comment) to check

Hence most of the above issues are resolved, I'm closing #9209.