handsontable/vue-handsontable-official

Dynamic HotTable, CustomRenderer per-cell styling

RayNCooper opened this issue · 3 comments

RayNCooper commented

Description

First of all: This is an awesome package and I fell in love with its complexity and broad range of features right after I started using it!

What I want to do: I want to color-code single cells depending on their value. These cells reside within dynamically built hot columns. I am using a CustomRenderer component that is placed within hot-table components in order to check incoming values through the use of props and then color code them respectively.

My Problem: It only color codes the value's direct background, which is not the whole TD/cell and thus not what I aim to do.

I recognize that there is the possibility of rewriting the CustomRenderer into a function, though I would prefer to keep it simple and in a component.
Also: I saw that one can use methods that are given by e.g. the HotRenderer Instance, but I haven't found any way to use methods of the CustomRenderer Instance (since TD is included in the CustomRenderer's data, I wonder if this can be manipulated).

Steps to reproduce

See JSFiddle

Demo

Will give a demo as soon as I manage to transfer my code to JSFiddle's environment

Your environment

  • Vue wrapper version: 5.1.0
  • Handsontable version: 8.2.0
  • Browser Name and version: Firefox 84.0.2
  • Operating System: Manjaro Linux
AMBudnik commented

Hi @RayNCooper

Thank you for the nice words. I'd pleasant to read good reviews.

When it comes to your use case. I'm wondering if a solution like that https://jsfiddle.net/handsoncode/4kx0L7h1/ would meet your goals? It checks the value and adds the className with a background to all the cells that meet the requirements defined in the renderer. Or even shorter (without the renderer, just the cells settings) https://jsfiddle.net/handsoncode/w2086vqg/

Let me know if that is something that works for you or you need to cover any further requiements.

RayNCooper commented

Hey @AMBudnik, thanks for the quick answer!
Also thank you very much for the provided code, it solved my use case and helped me understand handsontable in the vue context even more.

  • 👍1
AMBudnik commented

Happy to help @RayNCooper
If you'd have any questions feel free to send me an email at support@handsontable.com