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

Front-end
#1

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;
#2

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

#3

Boa noite,

Vc já tentou assim:

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

Acabei de testar aki e funcionou

#4

[quote=silasjr]Boa noite,

Vc já tentou assim:

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

Acabei de testar aki e funcionou[/quote]

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

#5

Tente utilizar

No seu datatable

styleClass="coluna1, coluna2"

E no css

[code] 

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

</style>[/code]
#6

[quote=edudebom]Tente utilizar

No seu datatable

styleClass="coluna1, coluna2"

E no css

[code] 

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

</style>[/code][/quote]

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">
#7

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”.

#8

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.

#9

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.

#10