Perspective Table Selected Row Color

Ignition Early Access
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.

2

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

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

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

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

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.

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?

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

12

Is the “rowData” feature the added feature you spoke about as up-and-coming? Is there an example on how to implement “rowData”

13

Is there a way to do this be column instead of by row?
or, if possible, by cell as well?

14

Hello Yousuf,

Can you please explain this with more details for changing the color of selected row in a perspective table.

Thanks.

15

This might help to change the color of a specific cell, using a style created previously in Perspective. Please note that this particular example won’t be the best solution for a table with several columns, which if so, a for loop using the quantity of columns could be used.

data = []

for i in range(value.getRowCount()):
value0 = value.getValueAt(i,“Column0”)
value1 = value.getValueAt(i,“Column1”)
value2 = value.getValueAt(i,“Column2”)
value3 = value.getValueAt(i,“Column3”)

if value0 != "Running":
	thisdict = {"Col0":value0, "Col1":{"value":value1,"style":{"classes":""}}, "Col2":value2, "Col3":value3}
else:
	thisdict = {"Col0":value0, "Col1":{"value":value1,"style":{"classes":"RunningStyle"}}, "Col2":value2, "Col3":value3}
data.append(thisdict)

return data