JSF 2 - Primefaces <p:dataTable> Configurar tamnho da coluna

8 respostas
clebiovieira

Pessoal, não estou conseguindo alterar o tamanho das minhas colunas no <p:dataTable>.

Alguém já teve esse problema ?

Segue código:

&lt;div id="divLista" style=" position:relative;  margin-right: 35%; "&gt;	
			&lt;p:panel id="pnListaUsuario"&gt;
			    &lt;p:growl id="growl" showDetail="true"/&gt;
			
			    &lt;p:dataTable var="usuario" value="#{usuarioBean.usuarios}" paginator="true" rows="10" selectionMode="single"
			                 onRowSelectUpdate="display growl"
			                 onRowUnselectUpdate="growl" &gt;
			
			        &lt;f:facet name="header"&gt;
			            Lista de Usuários
			        &lt;/f:facet&gt;
			        			        
			        &lt;p:column&gt;			           
			            &lt;f:facet name="header"  &gt;
			                &lt;h:outputText value="Código"/&gt;
			            &lt;/f:facet&gt;			           			             
			            &lt;h:outputText value="#{usuario.id}"  style=""/&gt;			        			            
			        &lt;/p:column&gt;
			        
			        &lt;p:column&gt;
			            &lt;f:facet name="header"&gt;
			                &lt;h:outputText value="Login" /&gt;
			            &lt;/f:facet&gt;
			            &lt;h:outputText value="#{usuario.login}" /&gt;
			        &lt;/p:column&gt;
			
			    &lt;/p:dataTable&gt;
			&lt;/p:panel&gt;
			&lt;/div&gt;

8 Respostas

Polverini

se for da coluna usa o style na coluna (<p:column>) se não no dataTable

silasjr

Boa noite,

Vc já tentou assim:

<p:column style="width=20%">

Acabei de testar aki e funcionou

clebiovieira

silasjr:
Boa noite,

Vc já tentou assim:

<p:column style="width=20%">

Acabei de testar aki e funcionou

O problema é quando vc usa em mais de uma coluna, parece que ele para de respeitar.
Mesmo usando a media em px ou %.

Tenta utilizar esse comando em duas colunas na mesma tabela e verá o que estou falando…

abraços

E

Tente utilizar

No seu datatable

styleClass="coluna1, coluna2"

E no css

<style type="text/css">

        .coluna1 {
            width: 135px;
        }
        .coluna2 {
            width: 150px;
        }

    </style>
clebiovieira
edudebom:
Tente utilizar

No seu datatable

styleClass="coluna1, coluna2"

E no css

<style type="text/css">

        .coluna1 {
            width: 135px;
        }
        .coluna2 {
            width: 150px;
        }

    </style>

Não funcionou.. ;(

Abraço. valeu por ter ajudado.

<p:dataTable var="disciplina" value="#{disciplinaBean.disciplinas}" paginator="true" rows="10" 
			                 selection="#{disciplinaBean.disciplina}" selectionMode="single"
							 rowUnselectListener="#{disciplinaBean.onRowUnselect}" 			                 
			                 onRowSelectUpdate="formDisciplinaCad growl"
			                 onRowUnselectUpdate="growl formDisciplinaCad"
			                 styleClass="coluna1, coluna2">
E

Minha datatable tem 2 colunas. Por isso styleClass=“coluna1, coluna2”. E funciona. Se tiveres mais, tente repetir os campos, só para ver se esse exemplo resolve.
Se tiver 3 tente styleClass=“coluna1, coluna2, coluna2”.

takeshi_spoow

apos apanhar muito para a datatable descobri que as colunas tendêm à se expandir de acordo com o tamanho dos itens apresentados nela quando se usa scroll e livescrolling. Então, para resolver isto, peguei as colunas que não tendêm à se expandir e defini na suas styles max-width e min-witdh, e para a coluna aonde deve ficar a scrollbar um tamanho fixo.

georgeicapui

Quebrei a cabeça com esse mesmo problema. Depois de muitas tentativas e muita paciência (essencial para um programador), cheguei a conclusão demonstrada no exemplo de código a seguir:

obs1: dataTable com 2 colunas de largura fixa.
obs2: o estilo overflow: hidden foi usado para “esconder” algum conteúdo que ultrapassar o limite da coluna.
obs3: a soma das larguras das colunas = largura do dataTable - 50px (conclusão após várias tentativas).
obs4: nem JSF + Primefaces escapa de algumas “gambis”, algo que não gosto muito de usar mas que as vezes é necessário.

<p:dataTable 
                        var="linha" 
                        value="#{linhasBean.linhas}"
                        paginator="true" rows="15"
                        selectionMode="single"
                        style="max-width: 550px; min-width: 550px"
                        emptyMessage="Nenhum registro.">
                        
                        <p:column 
                           style="max-width: 450px; min-width: 450px; overflow: hidden"
                           headerText="Coluna 1" 
                           >
                           <h:outputText
                              value="#{linha.coluna1}"/> 
                        </p:column>

                        <p:column 
                           style="max-width: 50px; min-width: 50px; overflow: hidden"
                           headerText="Coluna 2" 
                           >
                           <h:outputText
                              value="#{linha.coluna2}"/>
                        </p:column>
                     </p:dataTable>

Valeu.

Criado 20 de março de 2011
Ultima resposta 22 de out. de 2011
Respostas 8
Participantes 6