Perspective Table Selected Row Color

#1

Is there a property for changing the color of the selected row? I’ve been looking for a bit and not seeing a property. I also am unable to declare a style/color property that makes any changes.

0 Likes

#2

I would also like to change the color for the rows. Did you find a way?

0 Likes

#3

Hi,

There’s currently no way to style the selected row, but we do have a ticket to expose this, and various other styles for the table component.

I also am unable to declare a style/color property that makes any changes.

Can you be more specific, please?

-Yousuf

0 Likes

#4

Hi,

There are two ways you can style rows. The first is through the rows config prop. The second is by transforming a row of your data into a custom object that has the shape:

    { 
        "value": {   // The rows value. 
            "city": "Folsom" ,
            "country": "United States", 
            "population": 1000000 
        }, 
        "style": {  // Custom row styles.
            "backgroundColor": "#F7901D",
            "classes": "some-class"
        }
    } 

Hope that helps.

-Yousuf

0 Likes

#5

I was trying to create a property or style that was able to change the selectedRow style, so if there isn’t one exposed yet, that explains why.

Thanks for the information.

1 Like

#6

Not sure if this is what you were trying to achieve? Table has a selection foreground property. Can’t we use that to change the color of the selected row?

SelectedRow
TableProperty

0 Likes

#7

That is for the table component within Vision.

The issue is there isn’t a property available for the table component within the new Perspective Module.

0 Likes

#8

I am looking for a similar solution but a bit different. I have a query with few columns and a column called Active.

I want to display the table as usually (without background color for the rows) but I do want to display the a background blue color for the rows where Active=0.

Is this possible?

0 Likes

#9

This is possible, but a bit more challenging. Each row in your dataset can have a style property, so you will need to loop through your dataset and add in a value in the json or dataset to setup the style based on the data in that row.

1 Like

#10

Hi,

We are working on polishing this example up and adding it to the docs, but you can accomplish that like so:

    output_json = []
    
    style_orange = {"backgroundColor": "#F7901D"}
    style_green = {"backgroundColor": "#00AA00"}
    
    for row in range(value.getRowCount()):
        row_object = {}
        
        row_value = {}
        row_style = {}
        for col in range(value.getColumnCount()):    
            row_value[value.getColumnName(col)] = value.getValueAt(row, col)
            row_object['value'] = row_value
            
            if value.getColumnName(col) == 'container_type':
                if value.getValueAt(row, col) == 'can':
                    row_style = style_orange
                elif value.getValueAt(row, col) == 'bottle':
                    row_style = style_green

            row_object['style'] = row_style
            
        output_json.append(row_object)
        
    return output_json
0 Likes

#11

hi ynejati,

I am trying to do something similar (set the row background color based off a column value for all rows). Where would you put this transformation? Thanks.

0 Likes