For specific table columns (no Computed Fields) #
The code snippet below renders the detail panel for selected columns only. Thanks to one of our customers, Tony, for letting us publish this example!
Using the renderDetailPanel hook (available in the Table Builder) #
((columnValues, table) => {
// Define the exact LABELS you want to include
const includeLabels = ["Book Title", "Book Author"];
// Filter column keys based on their label values
const MyColumns = Object.keys(columnValues).filter(columnName =>
includeLabels.includes(columnValues[columnName].label)
);
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 `
<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: nowrap;
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
filter() array method. To learn more, please visit: Array.prototype.filter() – JavaScriptFor excluding table columns while also displaying Computed Fields #
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
Example of a renderDetailPanel hook that returns all columns except two consecutive columns at position 13 and 14 #
((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).splice(12, 2);
// 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 splice() array method. To learn more, please visit: Array.prototype.splice() – JavaScript
