Copying table headers if selected does not work

Getting help Questions
,
1

Hello,
I’m having problems copying table headers (handsontable v15.3.0). I had a similar issue here, but I opened new thread because it’s a different issue.

I want to be able to highlight table header cells and copy them, the same way as table data cells. Drag-selecting some table cells and header cells does not highlight/copy header cells. I tried shortcut ctrl+shift+space (select all cells and headers), but when copy pasting, it does not copy headers.

I know there is an option to use

let copyPastePlugin = hot.getPlugin("CopyPaste");
copyPastePlugin.copyWithColumnHeaders();

But this will copy headers every time (at least it should - see linked thread above), even if they’re not selected/highlighted.

EDIT: to be precise, I want to be able to copy with ctrl+c / ctrl+v. Using “copy with headers” in context menu will sadly not do.

2

Hi @kragelj.valentin

I’m not sure if I understand your problem correctly. Can you please send a code demo and steps how to reproduce it?

3

Yes sure, let’s take boilerplate hot example: hot example - JSFiddle - Code Playground

1st example:
By default no cells and headers are selected

brave_screenshot_jsfiddle.net
brave_screenshot_jsfiddle.net618×357 11.8 KB

If we use shortcut to select whole table with headers, we see all cells and headers highlighted (in blue color)

image
image612×373 12.2 KB

But if I use ctrl+c and paste with ctrl+v to e.g. Microsoft Excel, the headers are not copied, only data cells

image
image666×246 6.57 KB

2st example:
Here I selected 3 header cells and 6 data cells:

image
image1266×112 5.45 KB

Again, if I use ctrl+c and paste to to Microsoft excel, the headers are not copied, only data cells.

I would expect headers to also be copied, since they are highlighted (in blue color).

Since this is not the case, I’d have to write some code so that headers get copied also. The solution to use copyWithColumnHeaders() is not correct, since this will copy headers even if they are not highlighted. Solution to enable “copy with headers” option in context menu is ok, but I’d like this functionality when using ctrl+c shortcut.

4

Hi @kragelj.valentin

@adrian.szymanski will be off for a couple of days so I’ll do my best to reply.

For that given case I would use the beforeCopy hook to alter the data argument. In this case you’d just need to push an array of headers if those are selected. So I created a demo where we have a boolean variable that determines that and logic to apply headers upon copying the data. Here’s a demo Handsontable example - JSFiddle - Code Playground.

If you would like to do the same for the context menu you would need

  • create a context menu with the new set of options
  • push the logic of the hook to the callback function of the option
1 Like
5

That’s great, exactly what I needed. Thank you!