po-table: table com infinite-scroll nao exibindo as colunas

[RBalconi]

Reprodução

Passos para reproduzir:

1. Crie uma po-table;
2. Adicione as configuraçoes necessarias para usar o infinite-scroll:

(p-show-more)="showMore()"
[p-infinite-scroll]="true"
p-infinite-scroll-distance="80"
p-height="450"

Qual o comportamento atual?

A tabela "encolhe" as colunas, no desktop aparentemente comportou normal, porém no mobile/tablet ficam deformada. Segue prints de exemplo:

PrintScreen em Desktop - Exibindo normal PrintScreen em Mobile - Exibindo com as colunas "encolhidas"

Ambas sao a mesma tabela.

Obs.: Ao remover a opçao p-height="450" do HTML esse problema é corrigido, porem o infinite-scroll nao funciona.

Que comportamento você esperava ver?

Deveria manter o tamanho das colunas e adicionas em scroll horizontal, como é feito nas tabelas sem o infinite-scroll: Segue um PrintScreen de exemplo:

Ambiente

• PO UI: 6.0.0
• Angular: 13.1.1
• Browser(s):
  • [x] Chrome
  • [ ] Firefox
  • [ ] Edge
  • [ ] Safari
  • [ ] IE 11
  • [ ] Outros
• Operating System:
  • [x] Windows
  • [ ] macOS
  • [x] Ubuntu
  • [ ] Outros

[brunoromeiro]

Bom dia @RBalconi,

Estamos analisando, e em breve daremos retorno.

[brunoromeiro]

@RBalconi já tentou utilizar a propriedade ´p-columns´? Criei um exemplo aqui para ver se te ajuda no curto prazo, https://stackblitz.com/edit/po-ui-jk3vxj?file=src%2Fapp%2Fapp.component.html.

Fico no aguardo.

[RBalconi]

@RBalconi já tentou utilizar a propriedade ´p-columns´? Criei um exemplo aqui para ver se te ajuda no curto prazo, https://stackblitz.com/edit/po-ui-jk3vxj?file=src%2Fapp%2Fapp.component.html.

Fico no aguardo.

Sim sim, usamos a [p-columns], percebi que passa valor em pixel no seu exemplo, aqui usamos porcentagem. Mas de resto tudo igual.

.html
      <po-table
        #tableTest
        id="tableTest"
        p-selectable
        p-hide-select-all="false"
        p-sort="true"
        p-striped="true"
        [p-columns]="columns"
        [p-items]="dataFiltered"
        [p-literals]="customLiterals"
        (p-change-visible-columns)="columnsManager($event)"
        (p-show-more)="showMore()"
        [p-infinite-scroll]="true"
        p-infinite-scroll-distance="80"
        p-height="450"
      >
      </po-table>

//-----------------------------------------------------------------

.ts
const columns: Array<PoTableColumn> = [
  { property: 'col1', label: 'test1', width: '6%' },
  { property: 'col2', label: 'test2.', width: '6%' },
  { property: 'col3', label: 'test3', type: 'date', width: '9%' },
 . . .
]

[RBalconi]

Confirmei aqui, ao trocar no seu exemplo de px para % ocorreu o mesmo, problema, vou sugerir essa alteraçao no projeto ate ser resolvido. Obrigado :)