I would like to freeze columns in jsf using js, i.e. I want by using one scroll all tables to move and the name column to move with it , currently it works for me only on the main table and in the tables in <row:Expansion/> no longer. For each name column in each table there is an added class .frozen-column with positon:Sticky; please help.
<h:form id="budgetReportByLocationForm">
<div class="grid table-demo">
<div class="col-12">
<div class="card">
<div class="flex justify-content-between align-items-center mb-2">
<div class="flex justify-content-center align-items-center">
<h4 style="margin: 0!important;">Planowanie Budżetu #{budgetPlanBean.budgetYear} - #{budgetSessionScope.budgetPlanLocationName}</h4>
<p style="margin-left: 10px; color: #1b74c5; font-weight: bold;">Limit Budżetu: #{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.budgetLimit)}</p>
</div>
<div>
<h:outputText value="Opcje:" styleClass="mr-2"/>
<p:menuButton icon="pi pi-ellipsis-v" styleClass="rounded-button">
<p:submenu label="Generuj plik" icon="pi pi-file">
<p:menuitem value="XLS" styleClass="mr-2 mb-2">
<p:dataExporter type="xls"
target="budgetReportByLocationForm:tableBudgetReportObject"
fileName="Budżet-#{budgetPlanBean.budgetYear}-#{budgetSessionScope.budgetPlanLocationName}"/>
</p:menuitem>
<p:menuitem value="XLSX" styleClass="mr-2 mb-2">
<p:dataExporter type="xlsxstream"
target="budgetReportByLocationForm:tableBudgetReportObject"
fileName="Budżet-#{budgetPlanBean.budgetYear}-#{budgetSessionScope.budgetPlanLocationName}"/>
</p:menuitem>
<p:menuitem value="PDF" styleClass="mr-2 mb-2">
<p:dataExporter type="pdf"
target="budgetReportByLocationForm:tableBudgetReportObject"
fileName="Budżet-#{budgetPlanBean.budgetYear}-#{budgetSessionScope.budgetPlanLocationName}"/>
</p:menuitem>
<p:menuitem value="CSV" styleClass="mr-2 mb-2">
<p:dataExporter type="csv"
target="budgetReportByLocationForm:tableBudgetReportObject"
fileName="Budżet-#{budgetPlanBean.budgetYear}-#{budgetSessionScope.budgetPlanLocationName}"/>
</p:menuitem>
<p:menuitem value="XML" styleClass="mr-2 mb-2">
<p:dataExporter type="xml"
target="budgetReportByLocationForm:tableBudgetReportObject"
fileName="Budżet-#{budgetPlanBean.budgetYear}-#{budgetSessionScope.budgetPlanLocationName}"/>
</p:menuitem>
</p:submenu>
<p:menuitem value="Edytuj informacje o budżecie" oncomplete="PF('budgetEditBudgetDialog').show()" process="@this" update="messages" icon="ui-icon-pencil"/>
</p:menuButton>
</div>
</div>
<p:dataTable
var="budgetPlan" rowIndexVar="lp" id="tableBudgetReportObject"
editable="true" widgetVar="datatableVarBcg"
rowKey="#{budgetPlan.budgetPositionId}"
showGridlines="true"
emptyMessage="Brak elementów"
value="#{budgetPlanBean.budgetValues.budgetPositionList}">
<p:ajax event="rowToggle"
listener="#{budgetPlanBean.updateBudgetPlanMap(budgetPlan.budgetPositionId)}"/>
<!-- <p:ajax update="messages" action="#{budgetPlanBean.checkBudgetLimit}" event="load"/>-->
<div class="linked">
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="Lp."
style="width:20px;!important;" styleClass="frozen-column"/>
<p:column colspan="2" headerText="Nazwa grupy kosztowej"
style="width:300px;!important; position: sticky!important; background-color: #f8f9fa; "
styleClass="frozen-column"/>
<p:column colspan="2" headerText="Edycja" style="width: 100px!important;"/>
<p:column colspan="2" headerText="MPK"
style="width:100px;!important; background-color: #f8f9fa; "/>
<p:column colspan="2" headerText="Suma roczna" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Styczeń" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Luty" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Marzec" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Kwiecień" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Maj" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Czerwiec" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Lipiec" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Sierpień" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Wrzesień" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Październik" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Listopad" style="width: 100px!important;"/>
<p:column colspan="2" headerText="Grudzień" style="width: 100px!important;"/>
</p:row>
<p:row>
<p:column colspan="2" headerText="Suma" style="width: 300px!important;"
styleClass="frozen-column"/>
<p:column styleClass="columnBcgOdd" colspan="2" headerText="" style=""/>
<p:column styleClass="columnBcgOdd" colspan="2" headerText="" style=""/>
<p:column styleClass="columnBcgOdd" colspan="2"
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.yearValue)}"
style="color: #{budgetPlanBean.isBudgetLimitExceededSum() ? 'red' : 'inherit'};"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[0])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[1])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[2])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[3])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[4])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[5])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[6])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[7])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[8])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[9])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[10])}"/>
<p:column styleClass="columnBcgOdd" colspan="2" style=""
headerText="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlanBean.budgetValues.monthValueList[11])}"/>
</p:row>
</p:columnGroup>
<p:column style=" width: 20px!important;" styleClass="frozen-column">
<h:outputText value="#{lp+1}"/>
</p:column>
<p:column style="width:300px;!important; " styleClass="frozen-column" colspan="2">
<p:rowToggler rendered="#{not budgetPlan.last}"/>
<h:outputText value="#{budgetPlan.budgetPositionName}"/>
</p:column>
<p:column rendered="#{not budgetPlan.last}" style="width: 100px!important;"
colspan="2"/>
<p:column styleClass="columnBcgOdd" colspan="2" style="width: 100px!important;"
rendered="#{budgetPlan.last}">
<div style="display: flex!important; justify-content: center!important; align-items: center!important;">
<p:commandButton icon="pi pi-pencil"
styleClass="rounded-button ui-button-flat ui-button-flat"
onclick="PF('openingPlanEdit').show()"
process="@this"
update="dialogForm messages"
actionListener="#{budgetPlanBean.initUpdateBudgetPlanPosition(budgetPlan)}"
/>
<p:commandButton icon="pi pi-times"
styleClass="rounded-button ui-button-danger ui-button-flat"
process="@this"
ajax="false"
update="budgetReportByLocationForm"
actionListener="#{budgetPlanBean.clearBudgetPlanPosition(budgetPlan)}"
onstart="return confirm('Czy na pewno chcesz wyzerować?')"/>
</div>
</p:column>
<p:column style="width:100px;!important; " colspan="2">
<h:outputText value="#{budgetPlan.budgetPositionMpk}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.yearValue)}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[0])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[1])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[2])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[3])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[4])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[5])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[6])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[7])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[8])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[9])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[10])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan.monthValueList[11])}"/>
</p:column>
</div>
<p:rowExpansion rendered="#{not budgetPlan.last}">
<p:dataTable value="#{budgetPlanBean.budgetPlanMap.get(budgetPlan.budgetPositionId)}"
rowKey="#{budgetPlan2.budgetPositionId}"
emptyMessage="Brak elementów"
styleClass="linked"
showGridlines="true"
id="tableBcge" var="budgetPlan2" rowIndexVar="lp">
<p:ajax event="rowToggle"
listener="#{budgetPlanBean.updateBudgetPlanMap(budgetPlan2.budgetPositionId)}"/>
<div class="linked">
<p:column style="" styleClass="frozen-column">
<h:outputText value="#{lp+1}"/>
</p:column>
<p:column style="width:300px;!important; margin-left: 0!important; "
styleClass="frozen-column" colspan="2">
<p:rowToggler rendered="#{not budgetPlan2.last}"/>
<h:outputText value="#{budgetPlan2.budgetPositionName}"/>
</p:column>
<p:column rendered="#{not budgetPlan2.last}" style="width: 100px!important;"
colspan="2"/>
<p:column styleClass="columnBcgOdd" colspan="2"
style="flex-direction: column!important; width: 100px!important;"
rendered="#{budgetPlan2.last}">
<div style="display: flex!important; justify-content: center!important; align-items: center!important;">
<p:commandButton icon="pi pi-pencil"
styleClass="rounded-button ui-button-flat ui-button-flat"
onclick="PF('openingPlanEdit').show()"
process="@this"
update="dialogForm messages"
actionListener="#{budgetPlanBean.initUpdateBudgetPlanPosition(budgetPlan2)}"
/>
<p:commandButton icon="pi pi-times"
styleClass="rounded-button ui-button-danger ui-button-flat"
process="@this"
update="budgetReportByLocationForm"
actionListener="#{budgetPlanBean.clearBudgetPlanPosition(budgetPlan2)}"
onstart="return confirm('Czy na pewno chcesz wyzerować?')"/>
</div>
</p:column>
<p:column style="width:100px;!important; " colspan="2">
<h:outputText value="#{budgetPlan2.budgetPositionMpk}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.yearValue)}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[0])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[1])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[2])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[3])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[4])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[5])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[6])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[7])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[8])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[9])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[10])}"/>
</p:column>
<p:column styleClass="columnBcgOdd" colspan="2" style="">
<h:outputText
value="#{numberFormatter.formatDecimalNumberWithCommas(budgetPlan2.monthValueList[11])}"/>
</p:column>
</div>
.frozen-column { position: sticky!important; left: 0!important; color: #657380!important; z-index: 997; background: #F6F9FE!important; }
I tried using the built-in frozen-column in primefaces but it was crashing my table