水平と水平のヘッダーを使用してプライムフェイスのデータテーブルを設計する方法

Question

水平と垂直のヘッダーを持つプライムフェイスを使用してデータテーブルを設計したいと考えています。このような

何か：

が、それは可能ですか？

Answer 1

はい、フリーダイヤル機能を使用してこれを実現できます。つまり、の最初の列には、垂直ヘッダーのテキスト値を入力する必要があります。

<p:dataTable var="car" value="#{dtScrollView.cars5}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1"> 
    <p:column headerText="Id" footerText="Id"> 
     <h:outputText value="#{car.id}" /> 
    </p:column> 
    <p:column headerText="Year" footerText="Year"> 
     <h:outputText value="#{car.year}" /> 
    </p:column> 
    <p:column headerText="Brand" footerText="Brand"> 
     <h:outputText value="#{car.brand}" /> 
    </p:column> 
    <p:column headerText="Color" footerText="Color"> 
     <h:outputText value="#{car.color}" /> 
    </p:column> 
</p:dataTable> 

この例では、ID列は固定されており、垂直ヘッダーとして機能します。これが機能するには、scrollable属性をtrueに設定し、scrollWidthの値を設定する必要があることを覚えておいてください。

これに加えて、もう少し難しい課題があります。垂直ヘッダー列には水平ヘッダーが必要ですが、それ以外の場合は行が並んでいません。あなたはCSSを使用して、そのようなヘッダを追加したくない場合は、凍結された列ヘッダークラ​​スに高さを設定することができます

th.ui-frozen-column { 
    height: 8px !important; 
} 

ニーズに基づいた高さの値を調整します。

他の列が拡大された高さ（画像などを使用した後）の場合は、CSSで再生する必要があります。フリーズした行は自動的に高さが拡大されないので、手動で行う必要があります。

は、固定された列と行の詳細はPrimefacesサイトをチェックしてください：https://www.primefaces.org/showcase/ui/data/datatable/scroll.xhtml