renderDetailPanel

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

Parameter	Type	Description
columnValues	object	Column labels, original values and rendered values.
table	reference	Table instance and state.
app	reference	Context object app.
data	object	Array containing table data.

Structure parameter columnValues

columnValues: {
	columnName: {
		label: column_label,
		originalValue: original_column_value,
		renderedValue: rendered_column_value,
	}
}

Structure parameter table

table: {
	instance: *ref_to_table_api,
	state: *ref_to_table_store,
	requery: *ref_to_requery_table_function,
}

Return Value

Type	Description
string	An HTML string, typically created using a template literal.
HTMLElement	A DOM element node created with vanilla JavaScript.
jQuery	A jQuery object wrapping the new element.

✨ Example of a renderDetailPanel Hook

This code represents the default renderDetailPanel hook behavior.

((columnValues, table, app, data) => {
	// Variable wpda.log contains a reference to the built-in logger.
	// Variable columnValues contains all column labels, original values and rendered values.

	// 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>
	`
	})

Other Examples

• Custom Detail Panel