Как скрыть столбец в турбо-таблице PrimeNG?

Привет, я пытаюсь преобразовать свою таблицу данных PrimeNG в турбо-таблицу. На самом деле я использовал [hidden]="!cols.visibility" в PrimeNG моей таблице данных. Теперь, что я должен был использовать для достижения того же в турбо-таблице.

Код предыдущего столбца с указанием данных:

<p-column *ngFor="let col of cols"  [hidden]="!col.visibility" [field]="col.field" [header]="col.header"></p-column>

● URL документации: https://www.primefaces.org/primeng/#/datatable

Код столбца новой турбо-таблицы:

<ng-template pTemplate="header" let-cols>
      <tr>
          <th style="width: 2.25em"></th>
          <th *ngFor="let col of cols">
              {{col.header}}
          </th>
      </tr>
  </ng-template>

● URL документации: https://www.primefaces.org/primeng/#/table.

Что мне использовать? Я тоже проверил документацию, но не нашел решения.


angular primeng primeng-datatable primeng-turbotable
person Vijay Dhanvai    schedule 12.02.2018    source источник
comment
Что такое turbo table? пожалуйста, поделитесь также ссылкой на плагин?   -  person Vivek Doshi    schedule 12.02.2018
comment
Я обновил вопрос, и URL-адрес primefaces.org/primeng/#/table   -  person Vijay Dhanvai    schedule 12.02.2018

Ответы (4)


arrow_upward
10
arrow_downward

У нас есть аналогичное требование, когда нам нужно динамически скрывать / отображать столбцы, но также поддерживать порядок столбцов. Вот как мы написали код:

Определение таблицы:

<p-table [columns]="columns">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let column of columns" [ngStyle]="{'display': column.display}">
                {{ column.header }}
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let column of columns" [ngStyle]="{'display': column.display}">
                {{ rowData[column.field }}
            </td>
        </tr>
    </ng-template>
</p-table>

Определение столбца:

this.columns = [
    {
        field: 'test'
        header: 'Test Header'
        display: 'table-cell'
    },
    {
        field: 'hiddenTest'
        header: 'Hidden Column'
        display: 'none'
    }
];

Это позволит вам перебирать массив столбцов и динамически изменять встроенный стиль с «table-cell» на «none» и обратно без изменения исходного порядка столбцов.

person Isaac Irvin    schedule 28.02.2018

arrow_upward
1
arrow_downward

Я использовал ng-container с * ngIf, чтобы скрыть или показать столбцы на основе установленного мной свойства:

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr>
    <ng-container *ngFor="let col of columns">
      <td *ngIf="!col.hidden">
        {{rowData[col.field]}}
      </td>
    </ng-container>
  </tr>
</ng-template>

Тот же образец используется в заголовке.

person Sean Hunter    schedule 13.02.2018

arrow_upward
0
arrow_downward

Я также использую новую TurboTable в одном из моих проектов, и для отображения / скрытия столбцов я использовал следующий обходной путь:

<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns" [class]="!col.showOnMobile ? 'ui-table-hide-on-sm' : ''">
<span>{{rowData[col.field]}}</span>
</td>
</tr>
</ng-template>

Где "ui-table-hide-on-sm" - это класс CSS, подобный этому:

@media (max-width: 767px) {
.ui-table-hide-on-sm{
    display: none !important;
}

}

Надеюсь, это вам поможет!

person BBE    schedule 13.02.2018

arrow_upward
0
arrow_downward

Теперь это исправлено в turbotable, и это то же самое, что и в более старом DataViewModule.

скрытый = "правда"

https://github.com/primefaces/primeng/issues/190

person chris601    schedule 28.10.2019