renderDetailPanel

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 - ",
}

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