Custom Detail Panel

By default, the custom detail panel shows all columns. The renderDetailPanel can be used to overwrite this behavior.

The renderDetailPanel default code is available here.

✨ Example Tony

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!

((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 about the filter() method, please visit: Array.prototype.filter() – JavaScript

✨ Example rendering only Two Columns

((columnValues, table) => {

	// Define the list of columns to display
	const MyColumns = Object.keys(columnValues).splice(12, 2);

	// Create an array of HTML elements (an HTML elements is created for each column)
	const columnElements = MyColumns.map(columnName => 
		`<div class="panel-column">
			<div class="label">${columnValues[columnName].label}</div>
			<div class="content">${columnValues[columnName].renderedValue}</div>
		</div>`
	)

	// Add elements to 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>
	`

})