Add/remove columns with custom renderers

Tags: #<Tag:0x00007f8b19cc2f80>
#1

Hello :wave:

I’ve just started evaluating latest version of handsontable to see if would find a place in the app that we’re building.

One of the things I’m trying to do at the moment is to let user add new columns via the context menu with editable headers and custom formatting.
I’ve created a example of what I’m trying to achieve:
https://jsfiddle.net/mateuszsiek/p138oqwv/35/

As you can see I’m using custom renderers for both headers and columns. I’ve noticed that after adding custom columns renderer all the column controls in the context menu are being disabled :disappointed:

I’ve tried to find solution to that but best what I’ve found was suggestions that I could create custom items in the context menu which is not ideal cause that would mean I have to implement the items like: “Insert column left”, “Insert column right”, remove and probably more.

Hope there is a way to make it work without too much hacking :crossed_fingers:

#2

Hi Mateusz, welcome on our Forum.

If you use columns or object data all predefined column-related options are disabled. However, you can add custom options to your menu and get the same effect.

Here’s an example of a custom menu structure http://jsfiddle.net/d1ye98u7/. Your column options should use instance.updateSettings({ columns: new_structure }) in the callback option of a new custom menu.

#3

Thanks for quick reply.

I was hoping I won’t have to implement those options in the context menu :disappointed:

Luckily I think I’ve found a workaround :crossed_fingers:
Instead of using columns renderer I’ve used afterRenderer callback to manually change contents of the cells

afterRenderer:  (TD, row, column, prop, value)=>{
  if(column > 0) {
	TD.innerHTML = value + "%";
  }
};

Here is updated demo:
https://jsfiddle.net/mateuszsiek/p138oqwv/50/

With this approach seems like I have custom formatting and the context menu is working properly. What do you think about this approach? Is there something I should be worried about?

#4

it looks good. You not get extra calls to the renderer https://jsfiddle.net/AMBudnik/geq3jwym/ so it shouldn’t cause any performance issues.

#5