Réglage de la largeur de la colonne de contenu dans p:dataTable

Je veux les colonnes de ma table pour ajuster la largeur du plus grand élément.
Comme double-cliquant sur un fichier excel-colonne...

J'ai essayé des tas d'attributs et des solutions d'autres questions, mais rien n'avait vraiment ce que je voulais.

Voici mes paramètres pour la dataTable qui est imbriqué dans un p:scollPanel:

<p:dataTable scrollable="true" scrollWidth="auto" scrollHeight="390"
             tableStyle="width: auto; white-space: nowrap; font-size: smaller"
             id=carTable" var="vehicles"
             value="#{dgBean.vehicles}">

À l'aide de:

primefaces 6.0
jsf 2.2.1

Mise à JOUR:

Je ne sais pas pourquoi, mais il semble que la table-layout: automatique n'est pas utilisée ET deux divs sont générés. 1 pour l'en-Tête de mon tableau et l'autre pour le corps de ma table.
C'est pourquoi le premier schéma que j'ai posté se montre et l'en-tête et le corps s'adaptent bien sur leur propre, mais l'en-tête ne rentre pas dans le corps.

HTML généré:

<div class="ui-widget-header ui-datatable-scrollable-header" style="width: 1199px;">
    <div class="ui-datatable-scrollable-header-box" style="margin-right: 15px;">
        <table role="grid">
            <thead id="j_idt5:j_idt14:carTable_head">...</thead>
        </table>
    </div>
</div>
<div class="ui-datatable-scrollable-body" tabindex="-1" style="height: 390px; margin-right: 0px; width: 1199px;">
    <table role="grid">
        <thead class="ui-datatable-scrollable-theadclone" style="height: 0px;">...</thead>
        <tbody id="j_idt5:j_idt14:carTable_data" class="ui-datatable-data ui-widget-content" tabindex="0">...</tbody>
    </table>
</div>

Il semble donc que 2 tables sont générées. Quelqu'un a une idée de comment résoudre ce problème à l'aide de pf?

Mise à JOUR de commentaire

L'application de

.ui-datatable-scrollable-header-box table, .ui-datatable-scrollable-footer-box table, .ui-datatable-scrollable-body table {
    table-layout: auto;
}

à la Vitrine
produit (supprimé mon ancien des images que la réputation n'est pas assez élevé pour plus de 2):

Vitrine, édité css

cela fonctionne si vous supprimez le css personnalisé?
je suppose que vous voulez dire la primefaces thème? non, il ne change pas une chose
pas de tableStyle choses et si ça ne fonctionne toujours pas, vérifiez également le issuelist et essayer une version plus récente (à essayer, juste pour cette question)
j'ai ajouté une photo sans le tableStyle élément. nouveaux pf version? je vais essayer plus tard, occupé maintenant 🙂
j'ai essayé la version la plus récente et en cours d'exécution 6.0 maintenant. ne pas changer une chose. je ne pouvais pas trouver un problème avec un cas similaire 🙁 contourné par réglage de l'scrollWidth à 250% pour l'agrandir toutes les colonnes, mais encore ce n'est pas ce que je veux

OriginalL'auteur cluecke | 2016-08-09

jsf primefaces

9

Je veux les colonnes de ma table pour ajuster la largeur du plus grand élément.

PrimeFaces DataTable style par défaut utilise table-layout: fixed;. Donc si ce n'est que, remplacer votre tableStyle contenu avec table-layout: auto; afin de rendre l'usage de la table automatique algorithme de mise en page comme indiqué sur w3schools.com:

La largeur de la colonne est définie par le plus grand incassable contenu dans les cellules

De tout ce que vous avez écrit (y compris les commentaires) jusqu'à maintenant, je suppose que vous voulez un à la verticale et à l'horizontale de défilement DataTable que automatiquement la taille de ses colonnes à son contenu.

Je demande ce n'est pas possible intégré dans les fonctionnalités de PrimeFaces DataTable, parce que comme vous l'avez déjà noté, si vous faites le DataTable de défilement, le rendu de la sortie en diffère en ce que les tables sont différentes pour l'en-tête, corps et pied de page (pour faire de l'en-tête et pied de page collant).

Je ne comprend pas pourquoi sa ne fonctionne pas.

Tailles de colonne calculée avec le tableau automatique algorithme de mise en page avec table-layout: auto; différentes pour tous les trois tables (sauf qu'ils ont d'ailleurs la même acception la plus inviolable de contenu, comme les en-têtes et pied de page dans Vitrine). La différence de taille obtient relativated si le tableau devient plus large (en raison de l'espace supplémentaire est également distribué aux colonnes), alors il pourrait ressembler tout est OK comme Kukeltje commenté. Mais si vous réduisez la largeur de la table, les différences obtenir visibles.
```
             |  broadest content   | stretched by 1000
--------------------------------------------------------
             | column 1 | column 2 | column 1 | column 2
--------------------------------------------------------
header table | 2        | 3        | 502      | 503
body table   | 4        | 6        | 504      | 506
footer table | 2        | 3        | 502      | 503
```
Que vous avez peut-être remarqué, le rendu du corps de la table contient également de l'en-tête de contenu, mais caché. Donc supposé l'en-tête de contenu serait plus large que le contenu du corps, tout ce qui serait bien, au moins pour l'en-tête et le corps de la table.
```
                   |  broadest content
========================================
                   | column 1 | column 2
========================================
header table       | 5        | 7
----------------------------------------
hidden header part | 5        | 7
body part          | 4        | 6
________________________________________
body table         | 5        | 7
----------------------------------------
footer table       | 2        | 3
```
La méthode la plus simple solution de contournement est de désactiver la capacité à permettre le défilement et activer la pagination. Avec cela, vous avez plus ou moins contrôlable hauteur de la DataTable (avec lignes attribut) tout en préservant les exigences restantes.

De mon point de vue, le paginator dirait qu'il est juste de remplacer le défilement vertical.

Plus ou moins (donc la méthode la plus simple solution de contournement). Le plus important, c'est qu'une seule table est renderd et donc d'en-tête, corps et pied de page de contenu est utilisé pour calculer la largeur des colonnes:
```
            |  broadest content
---------------------------------
            | column 1 | column 2
---------------------------------
header part | 2        | 3
body part   | 4        | 6
footer part | 2        | 3
_________________________________
full table  | 4        | 6
```
Comment est-ce que l'aide à mon problème horizontal?

Avec table-layout: auto; vous obtenez le défilement horizontal dans le paginator fenêtre d'affichage de la boîte.

Une autre approche est de désactiver la capacité à permettre le défilement et l'envelopper DataTable avec un ScrollPanel. Cela a des inconvénients dans l'en-tête est scrollable trop et il ya des problèmes avec le redimensionnement vous avez à gérer, donc je ne le recommanderais pas.

Meilleure solution sera un moteur de rendu personnalisé (note cachés en-tête de contenu dans le rendu du corps de la table si la capacité à permettre le défilement est activé et étendre vice verca) et/ou personnalisés JS/CSS pour votre DataTable, mais c'est hors de portée de votre question.

Solution la plus simple serait de ne pas insister sur automatique colonne de dimensionnement en fonction du contenu de la table et de prendre DataTable avec des capacités de défilement.

J'ai essayé aussi en ofc ... sans succès. Comme meantioned j'AI lu les autres questions ici. Je suppose que le premier attribut dans mes paramètres de mon dataTable est censé être de défilement ( 😛 ). Juste colonnes dans le tableau n columnGroups.
Vous l'avez dit, vous avez lu d'autres questions ici, mais pas ceux qui. Désolé, je ne suis pas un médium. Donc, à côté de la nécessité d'ajuster la largeur des colonnes pour le contenu, votre DataTable devrait être de défilement?
si vous appliquez ce qui est proposé ci-dessus, d'où vient le table-layout: auto fin? Car si je l'applique explicitement à chaque table, dans la vitrine (en-tête, corps et pied de page), il travaille pour moi. .ui-datatable-scrollable-header-box table, .ui-datatable-scrollable-footer-box table, .ui-datatable-scrollable-body table{ table-layout: auto; }
elle se termine toujours quand le <table>-Élément commence là où la .ui-datatable liste déroulante table et .ui-datatable table coup de pied dans la mise en page: fixe. Si je change ces 2 auto c'est comme meantioned avant. 🙁 je ne suis pas sûr si je suis d'appliquer votre solution de la bonne façon. pourriez-vous l'expliquer (et d'en faire un avec réponse) s'il vous plaît? 🙂
Il suffit d'appliquer le css de mon commentaire. Quand je l'applique que pour la vitrine, il fonctionne. Alors il n'est pas comme vous l'avez dit avant. Et il y avait une question dans ky commemt ci-dessus

OriginalL'auteur irieill
0

j'ai eu le même problème d'en-tête et le contenu de la table largeur était différent, j'ai créé ci-dessous css et a travaillé comme un charme pour moi, de ne pas avoir à enlever quoi que ce soit, tels que les filtres ou les barres de défilement
```
.ui-datatable-scrollable-header-box table th, .ui-datatable-scrollable-footer-box table th, .ui-datatable-scrollable-body table td{
   width: 20% !important;
}
```
la largeur peut être changé, bien sûr 🙂

OriginalL'auteur Yasir

Vous devez vous connecter pour publier un commentaire.