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 #
- columnName: column name of column being rendered
- originalValue: column value as stored in the database
- renderedValue: column value after default rendering
- row: object containing the original values of all columns
row: {
column_1: " - value column 1 - ",
column_2: " - value column 2 - ",
column_n: " - value column n - ",
}Return value #
Template literal, DOM element or jQuery object
Additional built-in functions #
The following additional 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)
Parameter columnName is optional. If omitted the column name of the rendered column is used.
Basic example of a column renderer representing the default behaviour #
((columnName, originalValue, renderedValue, row) => {
return renderValue
})A renderer may also include content and styles, for example, to add a Font Awesome icon #
((columnName, originalValue, renderedValue, row) => {
return `<span>
<i class="fa-solid fa-check"></i>
${renderedValue}
</span>`
})Accessing other column values for conditional rendering #
((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
})Example using multiple column references and built-in functions #
((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.
- 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.
