ngx-datatable: как исправить итоговую строку (при прокрутке)? - PullRequest
Новая
       14

ngx-datatable: как исправить итоговую строку (при прокрутке)?

0 голосов
/ 17 октября 2018

Я сделал фиксированный заголовок 

<ngx-datatable
[scrollbarV]="true">

Но как исправить сводную строку, когда я прокручиваю страницу?

enter image description here

 <p-dialog 
  ...
  <ngx-datatable
    ...
    [scrollbarV]="true"
    >

<ngx-datatable-column name="AMOUNT" [summaryTemplate]="totalCost" [flexGrow]="1">
  ...
</ngx-datatable-column>

...


  <ng-template #totalCost>
   ...
  </ng-template>


</p-dialog>

1 Ответ

0 голосов
/ 25 октября 2018

Для начала - вот пример с фиксированным многострочным нижним колонтитулом, включая сводку, вот ссылка на источник

То же самое можно применить кheader, так что ваш пользовательский header-component.ts может выглядеть так: 

import { Component } from '@angular/core';

@Component({
  selector: 'header-demo',
  template: `
  <ngx-datatable
    class="material"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [footerHeight]="50"
    [headerHeight]="100"
    [rowHeight]="'auto'"
    [scrollbarV]="true">
    <ngx-datatable-header>
      <ng-template 
        ngx-datatable-header-template 
        let-rowCount="rowCount"
        let-pageSize="pageSize"
        let-selectedCount="selectedCount"
        let-curPage="curPage"
        let-offset="offset">
        <div style="padding: 5px 10px">
          <div>
            <strong>Summary</strong>: Amount
          </div>
          <hr style="width:100%" />
          <div>
            Rows: {{rowCount}} |
            Size: {{pageSize}} |
            Current: {{curPage}} |
            Offset: {{offset}}
          </div>
        </div>
      </ng-template>
    </ngx-datatable-header>
  </ngx-datatable>
`
})
export class HeaderDemoComponent {
  rows = [];

  columns = [
    ...
    ..
    .
  ];

  ...
  ..
  .

}

Как вы можете видеть, вполне законно формировать любую div-конструкцию в, которую вы хотели бы достичь ..

Подсказка: используйте объявления заголовка и класса ячеек

, как в этом примере, для достижения желаемого стиля: 

 <ngx-datatable-column 
     name="SomeColumn" 
     [headerClass]="'ngxSomeColumnNameHeader'" 
     [cellClass]="'ngxSomeColumnNameCell'"
     prop="SomeColumnName">
     ...
     ..
 </ngx-datatable-column>

А также подумайте об использовании[columnMode] = "'force'", [rowHeight] = "'auto'" & [limit] = "12" в теге ngx-datatable при необходимости ..

...