render #
The render hook allows developers to implement custom renderers for specific 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 #
- log: reference to WP Data Access logger
- columnName
- originalValue: column value as stored in the database
- renderedValue: column value after default rendering
- row: objects containing the original values of all columns
Return value #
Template literal, DOM element or jQuery object
Built-in functions #
The following built-in functions are available in the render hook to change the color or background color of the current table row and cells belonging to the current table row.
- setColor(color, columnName)
- setBackgroundColor(color, columnName)
- setRowColor(color)
- setRowBackgroundColor(color)
Parameters columnName is optional. If omitted the column name of the rendered column is used.
A basic example of a column renderer representing the default behaviour #
((log, columnName, originalValue, renderedValue, row) => {
return renderValue
})A renderer may also include content and styles, for example, to add a Font Awesome icon #
((log, columnName, originalValue, renderedValue, row) => {
return `<span>
<i class="fa-solid fa-check"></i>
${renderedValue}
</span>`
})Accessing other column values for conditional rendering #
((log, 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
})An example using multiple column references and built-in functions #
((log, 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
}
})Limitations and 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.
- Using built-in functions might overwrite color or background color in multiple places; in such cases, the last assignment takes precedence.
- It is not possible to change the color or background color of other rows.
- The WP Data Access logger can be used to print values on the console and includes methods such as trace, debug, info, warn, and error.
