Can I change anything other than row background colour when the mouse hovers over table rows?
I want to change text colour to white instead of black. I want to avoid a coloured background since colours are used to indicate statuses of things, so I want a dark grey highlight with white text.
Looks like you could add something along these lines to your stylesheet as an override:
.ia_tableComponent__body__row--hovered {
color: white;
}
I actually found that and tried it, but my props.data[x].<colname> style is overwriting the text colour 
I opted for the easier option by simply using bolder font. It's not ideal
Oh yuck...you're right. And !important doesn't appear to help either.
Only solution I can think of is to use a style class to style the cell and then use a stylesheet rule to alter the cell style class whenever the row is hovered:
.ia_tableComponent__body__row--hovered .psc-Cell_Style_Class {
color: unset;
}
css injection does not work in properties, only in styleclasses
Then you can target the cell instead:
.ia_tableComponent__body__row--hovered .ia_table__cell{
color: white;
}
I don't know what this means.
I think you mean not in background color, but instead in the background image area?
Or not in body style, but in style at the bottom of the table component props?
I read about CSS, but struggle to understand CSS syntax, structure, and targeting.
I thought that background color was part of a style class.
So I looked up the post again, and I see it was in the background image.
Time Series chart xtrace font - #4 by victordcq]
I really like this technique as the footprint is so small.
I kind of hope that in future versions we might just have a spot there designated for placing CSS and that there might be some help there to identify the objects we want to target to make it easier for myself.
It means exactly what it says: You can't use css injection directly in the properties, only in style classes.
The css property name itself doesn't matter, as we're "closing" it anyway with } {
CSS is a top-down design philosophy. It applies settings from the most specific (the actual element) to the most general (containers, body). Settings can be applied explicitly or based on a name or type match. More specific settings override less specific settings. A good design will have most of the settings done at a high level and will have very few element specific overrides.
CSS allows you to build a set of visual settings (color, background color, margin, padding, font, ...) and give it a name in the Styles part of the tree in the designer. You can then apply that style to all of the visual elements that should look like that in the style property. The designer gives you a nice pick list for that.
You should prefer to use named styles anywhere possible.
Not everything that you will want to apply a style to has a style property though. For those things you can override the individual element settings (e.g., color) that will only affect that particular element.
Instead, you can add an override in the stylesheet.css that will affect all elements in the project that match the selector. In the stylesheet.css there are lots of options.
To find the appropriate selectors, use the developer tools in the browser and inspect the elements. You can change the values, add new settings, enable/disable in the browser tool until it looks like you want.
Note that "ia_tableComponent__body_row" and "ia_table__cell" are named styles that Perspective has defined behind the scenes. They are part of a theme are designed to work with the selected theme. If you override them (or parts of them) in your stylesheet.css then you will have effectively broken (or suboptimized) the theme - it may look good in your currently selected theme but perhaps not in a different one (or a future one).
If you end up with a large number of explicit selectors in your stylesheet.css it is probably time to take a step back and refactor / abstract the visual design a bit.
