Bootstrap-table: The Fields in the option `Detail View`

[typo3ua]

I use the option Detail View

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-detail-view="true"
  data-detail-formatter="detailFormatter"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  function detailFormatter(index, row) {
    var html = []
    $.each(row, function (key, value) {
      html.push('<p><b>' + key + ':</b> ' + value + '</p>')
    })
    return html.join('')
  }
</script>

I want to see not the name of the field

id: 0
name: Item 0
price: $0
amount: 3

I want to see the title for this field, for example:

My title id: 0
My title name: Item 0
My title price: $0
My title amount: 3

How in the frontend page to show not the name of the field and only the title of the field into the option Detail View?

It is possible?

If it is possible, that i can get example how is it do it?

Thanks!

[UtechtDustin]

You could do something like this: https://live.bootstrap-table.com/code/UtechtDustin/3463

[typo3ua]

Thanks! yeah really not bad but it has one one but... the fields which not in the tag <thead>... do not have own 'title'

What if i add only two fields in the tag <thead>... or one? I need something without but...

[UtechtDustin]

Like this: https://live.bootstrap-table.com/code/UtechtDustin/3464 ?

[typo3ua]

oh yeah,, it is that what i need.. you cool ... thank you so much.

[UtechtDustin]

No problem, your welcome :-)