Closed jeterson closed 5 years ago
jeterson
commented
5 years ago Para complementar, mesmo eu setando o widthda coluna, a tabela não expande horizontalmente.
Ela vai se comprimindo a largura da tela. Acredito que esteja fazendo algo errado. Não faz o scroll horizontal
rafaellygruber
commented
5 years ago Ola Jeterson, estou analisando a situação pois não consegui reproduzir em nosso componente table, você poderia me passar os dados que foram utilizados? Pode ser no formato .json.
Ou também poderia me enviar o link do exemplo utilizando https://stackblitz.com/fork/portinariui
Obrigada, aguardo sua resposta.
jeterson
commented
5 years ago Olá, Esse é o json retornado direto do endpoint:
[{"id":3,"nome":"JETERSON MIRANDA GOMES2","unidade_consumidora":"123456","sexo":"M","estado_civil":"S","banco":2,"agencia":"111111","conta_corrente":"2222222","telefone":"999999999","celular":"99999999","estado":"RO","endereco":"teste","numero":123,"bairro":"teste","cidade":"Pimenta Bueno","cep":"456789-00","rede_pago_avista":"N","rede_financ_proj_luz_campo":"N","poste_concreto":"N","ano_conclusao":2020,"doacao_rede_ceron":"N","recibos":"N","notas_fiscais":"N","juntar_copia_projeto_rede":"N","data_cadastro":null,"data_alteracao":"2019-10-22T04:00:00.000Z","data_exclusao":null,"obs":null,"nome_usuario":null,"orgao_expedidor":"SSP/RO","outro_documento":null,"remunerar":"0.00","rg":"123456","cpf":"12345678912"},{"id":2,"nome":"JETERSON MIRANDA GOMES1","unidade_consumidora":"123456","sexo":"M","estado_civil":"C","banco":2,"agencia":"88888","conta_corrente":"99999","telefone":"88888888","celular":"88888888","estado":"RO","endereco":"teste","numero":1111,"bairro":"teste","cidade":"Pimenta Bueno","cep":"7845612","rede_pago_avista":"N","rede_financ_proj_luz_campo":"N","poste_concreto":"N","ano_conclusao":null,"doacao_rede_ceron":"N","recibos":"N","notas_fiscais":"N","juntar_copia_projeto_rede":"N","data_cadastro":null,"data_alteracao":"2019-10-22T04:00:00.000Z","data_exclusao":null,"obs":null,"nome_usuario":null,"orgao_expedidor":"SSP/RO","outro_documento":null,"remunerar":"0.00","rg":"789456","cpf":"12345678912"}]Esse é o arquivo html da pagina com a tabela
<po-page-list p-striped p-title="Consultar Clientes Cadastrados" [p-filter]="filterSettings" [p-actions]="actions"
[p-breadcrumb]="breadcrumb">
<po-divider></po-divider>
<div >
<po-table p-checkbox p-single-select p-hide-select-all="true" p-sort="true" p-striped="true"
[p-columns]="columns" [p-items]="items">
</po-table>
</div>
<po-divider></po-divider>
</po-page-list>
<po-modal p-title="Filtros Adicionais" [p-primary-action]="advancedFilterPrimaryAction" #advancedFilterModal>
</po-modal>
<po-modal #printModal p-title="Dialogo de Impressão de Documentos" [p-primary-action]="printAction"
[p-secondary-action]="secondPrintAction">
<ng-container *ngIf="!agentAtivo">
<app-agent-inativo description="Ative o agente para imprimir documentos"></app-agent-inativo>
</ng-container>
<ng-container *ngIf="agentAtivo">
<app-impressao-dialog (data)="dataToPrinter = $event"></app-impressao-dialog>
</ng-container>
</po-modal>
Aqui a declaração das colunas:
columns: PoTableColumn[] = [
{
property: 'acoes', type: 'icon', icons: [
{ icon: 'po-icon-eye', value: 'ver', action: this.detalheCliente.bind(this), tooltip: 'Detalhes' },
{ icon: 'po-icon-document-filled', value: 'print', action: this.printDocModal.bind(this) }
]
},
{ property: 'id', label: 'Código', type: 'string' },
{ property: 'nome', label: 'Nome' },
{ property: 'rg', label: 'RG' },
{ property: 'cpf', label: 'CPF' },
{
property: 'estado_civil', label: 'Est. Civil', type: 'label', labels: [
{ value: 'S', label: 'Solteiro(a)', color: 'color-02' },
{ value: 'C', label: 'Casado(a)', color: 'color-08' },
{ value: 'D', label: 'Divorciado(a)', color: 'color-07' },
{ value: 'V', label: 'Viuvo(a)', color: 'color-11' }
]
},
{
property: 'sexo', label: 'Sexo', type: 'subtitle', subtitles: [
{ value: 'M', label: 'Masculino', content: 'M', color: 'color-11' },
{ value: 'F', label: 'Feminino', content: 'F', color: 'color-08' },
{ value: 'N', label: 'N/D', content: 'N', color: 'color-07' },
]
},
{ property: 'banco', label: 'Banco' },
{ property: 'telefone', label: 'Telefone' },
{ property: 'celular', label: 'Celular' },
{ property: 'endereco', label: 'Endereço', },
{ property: 'bairro', label: 'Bairro' },
{ property: 'numero', label: 'Número' },
{ property: 'cep', label: 'CEP' },
{ property: 'cidade', label: 'Cidade' },
{ property: 'estado', label: 'UF' },
];
items = [];Mandei aqui, não estou conseguindo gerar um link no stakbliz, mas assim que der certo, posso mandar também
jhosefmarks
commented
5 years ago Olá @jeterson,
As colunas se redimensionam de acordo com o espaço definido em tela e vão forçar a quebra das informações de acordo com esse espaço, como você tem muitos campos a sugestão é que você defina o tamanho para elas caso queira que as mesma fiquem maiores evitando quebras.
Para complementar, mesmo eu setando o
widthda coluna, a tabela não expande horizontalmente. Ela vai se comprimindo a largura da tela. Acredito que esteja fazendo algo errado. Não faz o scroll horizontal
Quando você define um tamanho para uma das colunas, as colunas que não tem um tamanho definido vão se ajustar ao espaço restante, como você tem muitas colunas você precisa definir um tamanho para cada uma das suas colunas para não ter esse efeito colateral. O componente não tem como saber quanto de espaço a mais ele deve reservar quando o mesmo "estoura" o tamanho da tela.
Obrigado pelo contato!
Podemos ajudar em mais alguma coisa?
jeterson
commented
5 years ago Entendi, curiosamente, reiniciei o servidor do node, e após isso, passou a criar o scroll hozirontal, que antes nao estava fazendo.
Obrigado.
É possível fazer com que a largura da coluna se ajuste ao seu conteúdo? Minha tabela está declarada da seguinte forma:
E abaixo, é como minha tabela está renderizada:
O a largura da coluna não se adapta do seu conteúdo, sei que tem a propriedade
widthna coluna. Que eu posso fixar uma largura. Mas existe algum jeito de fazer automático ?