Table cell embedded view that expands to fill "auto" row height

[Ryan_Deardorff]

I've tried every combination I can think of for the table row and cell properties, but can't seem to get a view to expand to fill the auto height of a row:

I even added the position properties of basis: auto and grow: 1 to the root of the view, but it just won't resize to fill the space.

[Ryan_Deardorff]

I managed to achieve this^* by applying the background color style to the cell data rather than the view itself, using a transform on the table data:

def getStyledTableData(data):
	outputJSON = []
	for row in range(data.getRowCount()):
		rowObject = {}
		minVal = None
		for col in data.getColumnNames(): 
			if col == 'min':
				minVal = data.getValueAt(row, col)
		for col in data.getColumnNames():   
			cellObject = {}
			cellStyle = {}
			cellObject['value'] = data.getValueAt(row,col)
			if col == 'qty_total' or col == 'qty_on_hand':
				if minVal is not None and data.getValueAt(row, col) <= minVal:
					cellStyle = {
						'background-color': '#FFCCCC'
					}
				else:
					cellStyle = {
						'background-color': '#EEFFEE'
					}
			cellObject['style'] = cellStyle
			rowObject[col] = cellObject				
		outputJSON.append(rowObject)		
	return outputJSON

^*Technically, I didn't achieve the question stated in the title, which is why I'm not marking this as the solution. There still might be a case where one would want the view itself to expand to fit arbitrary row heights, so if someone knows how to do that, I'd still love to hear it.

[djs]

The style that determines that is one that is in between the style specified in the table props (cell or column) and the style of the root container in the embedded view.

On the highlighted div, notice: align-self: center; that is the property that is making things display that way.

You can target that div with a CSS child selector and override the align-self property with an !important rule. Here's my style in the advanced style sheet:

.psc-expand-child > div {
	align-self: stretch !important;
}

I put in the style in the table's column props:

(You can also put it in props.cells.style if you want it to apply to all the cells rather than just that column)

And the embedded view (which is just a colored label) expanded to fill the space:
Before:

After:

[Ryan_Deardorff]

Just what I was looking for, thanks! I prefer this over the data transform, which causes the embedded views to have to adjust their param references to account for the value key.