Conditional formatting using the Hot-Table component in Vue 3

Tags: #<Tag:0x00007efc6517a1c0> #<Tag:0x00007efc6517a080>

I’m using the Vue 3 example shown here

And looking at the documents on using conditional formatting here

it doesn’t use the hot-table component, can conditional styling be added whilst using the hot table component?

for info I’m trying to colour some columns based on their number (1-5)

Hi @joshua.gilbert

Here’s an example of conditional formatting in Vue 3:

https://jsfiddle.net/aszymanski/0raym6ow/

Hi @adrian.szymanski.

Thanks for this, managed to get something working I can expand on.

However one of my tables has about 900 rows (20 cols) and performance is now non-existent taking 39 seconds to render the page.

I assume this is because it is re-rendering the entire table? would you not expect this to be the case?

@joshua.gilbert

If you have a custom renderer in every cell it will have an impact on the performance as while opening the page or even any editor the whole table will be re-rendered. We have plans for improving this functionality but we don’t have any specific timeline when it will be done.

Here you can find a few tips that might help with the overall performance of the table:

Ok thanks.
I will keep an eye on the project as it evolves