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() – JavaScript
