headerText в двух разных строках - JS - Oracle Jet

Question

Я начинаю с Oracle JET Framework (Javascript), и я отредактировал таблицу oj, я хочу, чтобы мои столбцы были короче, потому что мои headerTexts слишком длинные. Как я могу сделать что-то вроде \n в середине моего headerText, чтобы заголовки моих колонок были в двух разных строках. Спасибо

<oj-table id="table" aria-label="Tasks Table" data="[[datasource]]" edit-mode='rowEdit' row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_template", true)]]'
dnd='{"reorder": {"columns": "enabled"}}' scroll-policy='loadMoreOnScroll' selection-mode='{"row": "multiple", "column": "multiple"}'
columns='[
  {"headerText": "ID Lieu Origine", "sortProperty": "idLieuOrigine","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "ID Lieu Destination", "sortProperty": "idLieuDestination","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Date/Heure \\\n \\t de mise à disposition", "sortProperty": "dateHeureDisposition","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "ID de la commande", "sortProperty": "idCommande","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Article Reference", "sortProperty": "articleReference","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Article (reference externe)", "sortProperty": "articleReferenceExterne","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Code UM", "sortProperty": "codeUM","className":"confirmationdesexpeditions","resizable": "enabled"}
    ]'
                  style='width: 100%;'>

Answer 1

Вы можете добиться этого с помощью шаблона

Пожалуйста, проверьте ниже код

   <div id="sampleDemo" style="" class="demo-padding demo-container">
  <div id="componentDemoContent" style="width: 1px; min-width: 100%;">
    <style>
    .red{
      color:red;
      }
    </style>
    <oj-table id='table' aria-label='Departments Table'
                                    data='[[dataprovider]]' as='cell'
                                    columns='{{columnArray}}'
                                    columns-default='{"template": "cellTemplate",
                                                      "headerTemplate": "headerTemplate"}'
                                    style='width: 100%;'>
      <template slot="cellTemplate">
         <oj-bind-text value="[[cell.data]]"></oj-bind-text>
      </template>
      <template slot="ratingCellTemplate">
         <oj-rating-gauge value='[[cell.data]]' readonly style="width:60px;height:15px;">
         </oj-rating-gauge>
      </template>
      <template slot="headerTemplate" data-oj-as="header">
        <span class="red">
         <oj-bind-text value="[[header.data]]" class="red"></oj-bind-text></span><br><oj-bind-text value="[[header.data]]"></oj-bind-text><br>

      </template>
      <template slot="totalFooterTemplate" data-oj-as="footer">
         <div id="table:emp_total"><oj-bind-text value="{{emp_total_func(footer)}}"></oj-bind-text></div>
      </template>
    </oj-table>


  </div>
</div>

Добавлен дополнительный код, такой как цвет стиля или HTML-код.

Пожалуйста, проверьте этот пример: демо