render

The render hook allows developers to implement custom renderers for specific table columns. This powerful hook enables rendering based on other column values or external data fetched via AJAX. It also supports built-in functions to change the text color and background color of other columns of the same rows.

Parameters

Parameter	Type	Description
columnName	string	Column name of column being rendered.
originalValue	any	Column value as stored in the database.
renderedValue	any	Column value after default rendering.
row	object	Object containing the original values of all columns.

Structure parameter row

row: {
	column_1: value_ column_1,
	column_2: value_column_2,
	column_n: value_column_n,
}

Return Value

Type	Description
string	An HTML string, typically created using a template literal.
HTMLElement	A DOM element node created with vanilla JavaScript.
jQuery	A jQuery object wrapping the new element.

Additional Built-In Functions

Parameter columnName is optional. If omitted the column name of the rendered column is used.

setColor(color, columnName)
setBackgroundColor(color, columnName)
setRowColor(color)
setRowBackgroundColor(color)

✨ Basic Example

Example represents the default behaviour.

((columnName, originalValue, renderedValue, row) => {
	return renderValue
})

✨ Adding Content and Styles

Using a Font Awesome icons.

((columnName, originalValue, renderedValue, row) => {
	return `<span>
		<i class="fa-solid fa-check"></i>
		${renderedValue}
	</span>`
})

✨ Accessing other Column Values

((columnName, originalValue, renderedValue, row) => {
	if (row.status === "check" && row.balance < 0) {
		return `<div style="color: red">
			<i class="fa-solid fa-check"></i>
			${renderedValue}
		</div>`
	}

	return renderedValue
})

✨ Combining Multiple Features

((columnName, originalValue, renderedValue, row) => {
	if (row.city === "Amsterdam") {
		// Change row color and background color
		setRowColor("white")
		setRowBackgroundColor("orange")

		// Change column color and background color
		setColor("blue")
		setBackgroundColor("yellow")

		// Change color and background color of column customerName
		setColor("black", "customerName")
		setBackgroundColor("white", "customerName")

		return `<strong>
			${renderedValue}
		</strong>`
	} else {
		// Don't forget to reset the column color and background color
		// Row color and background color will reset automatically
		setColor("initial", "customerName")
		setBackgroundColor("initial", "customerName")

		return renderedValue
	}
})

Other Examples

• Adding buttons with event listeners
• Using global functions to add buttons with event listeners
• Manage app settings interactively from custom buttons

Notes

• Do not manipulate the DOM directly from a hook. WP Data Access is state-based, and all (re)rendering is performed through state changes. Manipulating the DOM from a hook might crash an app. Use built-in functions to change the app state or return an element that meets your requirements.
• Column renderers are not available for computed fields, aggregations, inline editing, lookups, and WordPress media.
• When built-in functions are used to overwrite color or background color in multiple places, the last assignment takes precedence.
• It is not possible to change the color or background color of other rows.