The renderDetailPanel hook allows developers to implement custom detail panels. This hook is highly versatile, enabling the creation of banners, data entry forms, or any HTML content containing your desired elements. As a JavaScript hook, it also supports adding external resources via AJAX calls.
Parameters #
- columnValues: column labels, original values and rendered values
- table: reference to the table instance and state
columnValues: {
columnName: {
label: " - column label - ",
originalValue: " - original column value - ",
renderedValue: " - rendered column value - ",
}
}table: {
instance: " - reference to table api - ",
state: " - reference to table store - ",
requery: " - function to perform requery - ",
}Return value #
Template literal, DOM element or jQuery object
Example of a renderDetailPanel hook that returns the default detail panel #
((columnValues, table) => {
// Variable log contains a reference to the built-in logger.
// Variable columnValues contains all column labels, original values and rendered values.
// Use logger to view columns on console.
// log.info(columnValues)
// Create an HTML element for each column. Elements are added to the template below.
const columnElements = Object.keys(columnValues).map(columnName =>
`<div class="panel-column">
<div class="label">${columnValues[columnName].label}</div>
<div class="content">${columnValues[columnName].renderedValue}</div>
</div>`
)
// Return template
// This example template contains all detail panel CSS. CSS can also be defined outside the template.
return `
<div class="my-custom-detail-panel">
${columnElements.join("")}
</div>
<style>
.my-custom-detail-panel {
margin: 0;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 0.25rem;
}
.my-custom-detail-panel .panel-column {
display: grid;
grid-template-columns: 2fr 4fr;
align-items: start;
gap: 0.5rem;
}
.my-custom-detail-panel .panel-column .label {
text-align: right;
white-space: no-wrap;
overflow: visible;
direction: rtl;
}
.my-custom-detail-panel .panel-column .content {
font-weight: bold;
}
</style>
`
})Example of a renderDetailPanel hook that returns all columns except the 8th column #
((columnValues, table) => {
// Variable log contains a reference to the built-in logger.
// Variable columnValues contains all column labels, original values and rendered values.
// Use built-in logger to view columns on console.
// wpda.log.info(columnValues)
// Define a final list of columns to display
const MyColumns = Object.keys(columnValues).slice(0,7);
// Create an HTML element for each column. Elements are added to the template below.
const columnElements = MyColumns.map(columnName =>
`<div class="panel-column">
<div class="label">${columnValues[columnName].label}</div>
<div class="content">${columnValues[columnName].renderedValue}</div>
</div>`
)
// Return template
// This example template contains all detail panel CSS. CSS can also be defined outside the template.
return `
<div class="my-custom-detail-panel">
${columnElements.join("")}
</div>
<style>
.my-custom-detail-panel {
margin: 0;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 0.25rem;
}
.my-custom-detail-panel .panel-column {
display: grid;
grid-template-columns: 2fr 4fr;
align-items: start;
gap: 0.5rem;
}
.my-custom-detail-panel .panel-column .label {
text-align: right;
white-space: no-wrap;
overflow: visible;
direction: rtl;
}
.my-custom-detail-panel .panel-column .content {
font-weight: bold;
}
</style>
`
})Defining the final list of columns to display uses the
slice() array method. To learn more, please visit: Array.prototype.slice() – JavaScript
