How to style a column of data table.

[listeng]

Hi all. I want to make a custom style for a column in data table by the field value. For a example, the row in table, if the value of the Status field is 1 then show color green, if the value is 0 then show color red. I can not find any document for it, How to do it? Thanks.

[mjashanks]

It's not possible at the moment, though we do have a long list of table improvements that we plan to do in the next few months: #1913

I have added your comment in there - thanks!

[Toucan14]

Hey all, any news on that? Would be really helpful right now. Thanks!

[christophsanz]

I found a workaround:

1. Add a custom color to the column you want to add css to and give it some name (does not have to be a valid color)
   
2. add an embed with the following code, referencing your "color" :

<style>
.spectrum-Table-cell[style="color: whatever;"]
{
     font-weight: bold; // add whatever css your heart desires
}
</style>

The same should also work with the background color to style the entire cell, but i haven't tried this.

[rafikApp]

hey @christophsanz
I tried but it didn't work. any help please?

[christophsanz]

What exactly does not work?
You basically just use the css attribute selector in combination with the style tag.
Try it only with the text color if you have also a background color applied.
You can add the background color in your css again.

[rafikApp]

Hey @christophsanz, thank you for your help.
I gave the name (test) to the text color of the column

and added an embed to the table which contains the following code.

{{#eq New Table.CONSIGNATIONS.statut "A confirmée" }}
<style>
.spectrum-Table-cell[style="color:test;"]
{
    font-weight: bold; 
     color: green
}
</style>
{{ else }}
<style>
.spectrum-Table-cell[style="color:test;"]
{
    font-weight: bold; 
    color: black
}
{{/eq}}

but the status is always displayed in green regardless of its value

[christophsanz]

I think the space between "color:" and "test" is important.
Also i am not sure if you need a semicolon on color: black;
Also try with "!important" and check the chrome devt-tools for colliding styles or if the styles attribute is written exactly like you do.

[rafikApp]

Yes i tried, but the same probleme

[christophsanz]

Looks like the comparison with #eq is your problem.
try #is instead of #eq

[rafikApp]

No i don't think.
It works for you ?

[NicolasBio]

Hi,
I was wondering if this still works using the current table component?
I'm looking for column setting to color a column but can't seem to find it.

[mikesealey]

@listeng @christophsanz @rafikApp @Toucan14

We're looking into adding extra styling controls to tables and would love to hear your thoughts. Please head to Discussion #13918 (comment) and leave a reply. The better we can understand our communities needs the better we can serve them.