Power Table Color Behind Header

Ignition
,
1

Is it possible to change the color of a power table behind the header? In my scenario, I have dynamic columns which automatically resize, and trigger a horizontal scroll once they reach the bounds of the table. Prior to triggering that scroll, there is white space to the right of all present header columns. Our application has a dark theme, so I would like to make this area a darker color to match.

Just to be clear, I’m talking about the area behind the header, not the header background:
image

2

Does anyone know how to get the column widths of auto-resized columns?

One thing I could potentially do is resize components based on the table column widths. So for example, get column widths and resize (transform) the table to match the sum of column widths up to a max width, after which point horizontal scroll is enabled. Or do the opposite and place a rectangle over the right side of the table to hide it, changing the rectangle width based on the column widths.

3

There should be a UIManager key you can set to override that, although I haven’t easily found what it is yet.

4

I would still love to know how to actually change the color, but I have come up with a temporary workaround based on the table column widths. In propertyChange on my table:

if event.propertyName in ['vision.bounds2d', 'viewDataset']:
	total_width = event.source.width
	header_height = event.source.getTable().getTableHeader().getHeight()
	table_width = event.source.getTable().getWidth()
	table_x = event.source.x
	table_y = event.source.y
	
	overlay_width = total_width - table_width
	overlay_x = table_x + table_width
	
	if overlay_width <= 0:
		overlay_width = 0
		overlay_x = table_x
	
	system.gui.transform(
		event.source.parent.getComponent('lblTableOverlay')
		, newX = overlay_x
		, newY = table_y
		, newWidth = overlay_width
		, newHeight = header_height
	)

I’ve put a component (called lblTableOverlay) over the white section of the table, that matches the table background color, and I am resizing it to cover that area based on the table contents. You still end up with brief flashes of the area underneath the component since it resizes slightly after the columns though. Also I want to do the same thing inside a template, which has proven much more complicated.

5

Just in case someone is wondering how I made this workaround work on a template:

if event.propertyName in ['vision.bounds2d', 'viewDataset']:
	TEMPLATE_DEFAULT_WIDTH = 2000
	TEMPLATE_DEFAULT_HEIGHT = 50
	
	total_width = event.source.width
	header_height = event.source.getTable().getTableHeader().getHeight()
	table_width = event.source.getTable().getWidth()
	table_x = event.source.x
	
	template_height = event.source.parent.height
	template_width = event.source.parent.width
	template_y = event.source.parent.y
	
	overlay_width = total_width - table_width
	overlay_x = total_width - overlay_width
	
	if overlay_width <= 0:
		overlay_width = 0
		overlay_x = table_x
	
	system.gui.transform(
		event.source.parent.getComponent('lblTableOverlay')
		, newX = int(1.0 * overlay_x * TEMPLATE_DEFAULT_WIDTH / template_width + 0.5)
		, newY = int(1.0 * template_y * TEMPLATE_DEFAULT_HEIGHT / template_height)
		, newWidth = int(1.0 * overlay_width * TEMPLATE_DEFAULT_WIDTH / template_width + 0.5)
		, newHeight = int(1.0 * header_height * TEMPLATE_DEFAULT_HEIGHT / template_height + 2 + 0.5)
	)

I have a template where the table takes up the full width and height of the template. The template is being used in a template canvas and just as a template component, and the width and height of the template by default are 2000 and 50.

This solution does the trick but I would still much prefer to just change the color.