Giters

handsontable / vue-handsontable-official

Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.

Home Page:https://handsontable.com/docs/vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dynamic HotTable, CustomRenderer per-cell styling

RayNCooper opened this issue · comments

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
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.

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.

commented

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