Skip to content

add tickFillColor and crossFillColor parameters to tickCross formatter #4791

Open
eronnen wants to merge 2 commits intoolifolkerd:masterfrom
eronnen:tick-cross-color
Open

add tickFillColor and crossFillColor parameters to tickCross formatter #4791
eronnen wants to merge 2 commits intoolifolkerd:masterfrom
eronnen:tick-cross-color

Conversation

@eronnen
Copy link

@eronnen eronnen commented Aug 18, 2025

Fixes #4790

Copy link
Collaborator

@azmy60 azmy60 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @eronnen , thanks for the PR! I think it's best to take a different approach for applying colors like this. Let's remove the fill attribute from the html, and apply the fill color from the css instead. After that, the new tickFillColor and crossFillColor params are not needed. This approach will make it easier to override the colors from css, e.g., when switching dark/light theme.

cross = typeof formatterParams.crossElement !== "undefined" ? formatterParams.crossElement : '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
tickFillColor = formatterParams.tickFillColor || "#2DC214",
crossFillColor = formatterParams.crossFillColor || "#CE1515",
tick = typeof formatterParams.tickElement !== "undefined" ? formatterParams.tickElement : '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="' + tickFillColor + '" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you remove the fill attribute entirely and apply the color via css instead?

@eronnen
Copy link
Author

eronnen commented Mar 7, 2026

Hey @azmy60 , by applying it from css do you mean adding classes for tick and cross to tabulator.scss and setting the fill attribute there?

@azmy60
Copy link
Collaborator

azmy60 commented Mar 7, 2026

@eronnen yes, correct.

@eronnen eronnen force-pushed the tick-cross-color branch from 6e061cc to 9f94ff9 Compare March 8, 2026 00:24
Copy link
Author

@eronnen eronnen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@azmy60 converted to css variables

@eronnen eronnen requested a review from azmy60 March 8, 2026 00:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tickCross color options for tick and cross

2 participants