Headers should not be selectable

[aioobe]

Describe the bug
No spreadsheet software that I've tested allows the user to select / copy the header cells. This makes it messy to copy / paste a whole table/whole row/whole column to and from other spreadsheet software.

Current behavior
ReactGrid allows the user to select and copy/paste both column and row headers.

Expected behavior
The header cells (both row headers and column headers) should be exempt from selections.

Screenshots or gifs

Your environment details

• Device: desktop
• OS: Linux
• Browser: Firefox

[MichaelMatejko]

Hi aioobe!
It's always depends on the case. In your case of course I understand that it is not beneficial to copy the headers on the left side.

We just released Version 5 alpha. In this version it will be possible to make a custom selection based on a click on a particular cell. This will allow to implement the desired funktionality.

Would you like to try it?

[aioobe]

Cool! Yes, I'll definitely give it a try. Is there any docs on this new functionality by any chance?

[webloopbox]

@aioobe Currently, we are working on the docs for v5. For now, you can look at these examples showcasing the individual functionalities: https://github.com/silevis/reactgrid/tree/v5-dev/reactgrid/stories

[aioobe]

I've switched over to v5 and it's definitely better in many regards. The API feels simplified without limiting use cases.

I do experience a bunch of new issues though:

• It seems harder to do custom cell rendering. I ended up having to copy the whole TextCell code to tweak it. If I try to reuse a TextCell I get weird border issues even if I simply do <div><TextCell {...props} /></div>:

  

  Also, I don't understand what version of TextCell is shipped with 5.0.0-alpha2 because the isAlphaNumericWithoutModifiers function seems to be missing 🤔

  All in all, it would be great if there was a way to extend TextCell somehow with my own custom rendering. Allowing the user to wrap the content in a custom component would be very nice.

• In v5 I managed to get further with my custom copy/paste behavior. Specifically I want to automatically extend the number of rows in the grid to fit the data pasted by the user. However, there seems to be regressions in the built in copy/paste behavior. The grid crashes on this line if I paste some text/plain content. This seems hard to work around in the current version.

I don't know if you like me to post these issues individually, but it feels like fairly obvious things that worked fine in 4.1.9, so I imagine you're aware and this will be sorted out soon.

Finally, do you happen to have an example of my initial issue posted here, regarding customizing selection when clicking headers? Should I put something in onFocusLocationChanging, and set selection using initialSelectedRange?

[webloopbox]

@aioobe Thanks for the feedback, we appreciate it!
Copying and overriding the default templates is something we're aiming for in v5.

As for isAlphaNumericWithoutModifiers, in the next alpha release, it will be possible to import it directly from the reactgrid package (you can still customize it yourself if the built-in version doesn't fully meet your needs).

Could you provide a snippet or a sandbox with your custom cell implementation? That would help us better understand the issue you're facing with the borders.

As for your initial question, you can do this using the handler passed to onCopy, for example, by skipping cells where cellsRange.startRowIndex === 0 when placing data into the clipboard. You can also completely disable header selection by setting isSelectable to false within the cell object.

[aioobe]

Cool, thanks.

As for isAlphaNumericWithoutModifiers, in the next alpha release, it will be possible to import it directly from the reactgrid package (you can still customize it yourself if the built-in version doesn't fully meet your needs).

That's great. I did in fact tweak it a bit when I copied the implementation to my code. I added 'åäö'.includes(e.key.toLowerCase()) since we have a lot of swedish users. (A small side track... I wonder if it would be better to blacklist a few keys that do not start editing a cell, instead of whitelisting some keys that do start editing 🤔 I imagine people might want to start editing cells by typing =, / or - for example.)

Could you provide a snippet or a sandbox with your custom cell implementation?

I copied TextCell and changed this line from

initialText

to

<>
    <ProblemCorner problems={validationProblems} />
    {initialText}
</>

to achieve this:

You can also completely disable header selection by setting isSelectable to false within the cell object.

Thanks for this suggestion. The isSelectable works exactly as I expect and want it to when it comes to dragging a selection area. I note however that enableRowSelectionOnFirstColumn still allows me to "select" also the first column. 🫤

I realize that all use cases are different, but would it be a reasonable feature request to exempt not isSelectable cells from the selection if enableRowSelectionOnFirstColumn is set?