How to Add or Change The Class Attribute of a Jsf Datatable (Primefaces)

How do I add or change the class attribute of a JSF dataTable (primefaces)?

If you set tableStyle or tableStyleClass attribute, it will add the css class to the table element.

Add css-class to primefaces datatable table-element

As you can see Primefaces generates its components based on it own rules. So it can have its own outer and inner elements.

Try using tableStyleClass="..."

Update datatable in primefaces with update attribute

You can try several things

1.- Ensure you have this datatable into a form tag.

2.- When you use ":" in the update this mean is absolute and the correct command will be update=":form-id:payment_table"

3.- I recommend you only use - instead of _ in the id because primefaces uses jquery and in some cases some command may fail for the search implementation of primefaces with jquery. The update looks like update=":form-id:payment-table"

4.- Create a wrapper and update the wrapper in your button the full solution to this will be:

<h:panelGrid id="grid-payment-table">
     <p:dataTable id="payment_table"
...
</h:panelGrid>

5.- Change your scope to @ViewScoped

How to programmatically change rendered attribute of a p:column in p:dataTable

With

@ListenerFor(systemEventClass=PostAddToViewEvent.class) 
public class ColumnTogglerComponent extends UINamingContainer { 
 ...

processEvent() will be called early enough.

How to apply style to a PrimeFaces dataTable?

Get the Primefaces User Guide of the version of your Primefaces here.

In that document you'll find how to override the styles of each component under Skinning heading.

For Example:

Following is the skinning for p:outputLabel

Sample Image

If you want to change color I'd use my css as which will apply for all p:outputLabels.

.ui-outputlabel{
color:blue;
}

If you want to change style for only one particular p:outputLabel you can use like this

<div class="myLabel">
   <p:outputLabel value="This is Demo" />
</div>

then the CSS would be like:

.myLabel .ui-outputlabel{
    color:blue;
}

update primefaces dataTable with new rows adding dynamically

this seems to work for me

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

@ManagedBean
@SessionScoped
public class EcritureCtrl implements Serializable {
    private static final long   serialVersionUID    = 1L;
    private String              code;
    private Date                date;

    private String              description;
    private List<Avant>         lignes              = new ArrayList<Avant>();
    private Avant               unUser;

    public String getCode() {
        return this.code;
    }

    public Date getDate() {
        return this.date;
    }

    public String getDescription() {
        return this.description;
    }

    public List<Avant> getLignes() {
        return this.lignes;
    }

    public Avant getUnUser() {
        return this.unUser;
    }

    @PostConstruct
    private void init(){
        this.lignes.add(new Avant());
    }

    public void newLine(ActionEvent actionEvent) {
        this.lignes.add(new Avant());
    }

    public void setCode(String code) {
        this.code = code;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public void setLignes(List<Avant> lignes) {
        this.lignes = lignes;
    }

    public void setUnUser(Avant unUser) {
        this.unUser = unUser;
    }

}

and

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Sorry</title>
</h:head>
<h:body>
<script type="text/javascript">
function addRowOnComplete() {
    alert();
}
</script>
    <h:form id="formPiece">

        <p:messages id="messages" showDetail="true" autoUpdate="true"
            closable="true" />

        <p:tabView id="ViewPlan">

            <p:tab id="tab2" title="Saisie 1">
                <p:panel id="panelSaisie" header="Saisir"
                    style="color: brown;font-size: 15px">
                    <h:panelGrid columns="3">
                        <p:outputLabel for="description" value="Description:"></p:outputLabel>
                        <p:inputText id="description" value="#{ecritureCtrl.description}"
                            required="true" label="Description" maxlength="100" size="75">
                            <f:validateLength maximum="100" />
                        </p:inputText>
                        <p:message for="description" />

                        <p:outputLabel for="date" value="Date:"></p:outputLabel>
                        <p:calendar locale="fr" id="date" required="true" label="Date"
                            value="#{ecritureCtrl.date}" />
                        <p:message for="date" />

                        <p:outputLabel for="code" value="Code Avant"></p:outputLabel>
                        <p:inputText id="code" value="#{ecritureCtrl.code}"
                            required="true">

                        </p:inputText>
                        <p:message for="code" />

                    </h:panelGrid>
                    <br />
                    <p:dataTable var="line" value="#{ecritureCtrl.lignes}"
                        id="dataTableSaisiePiece">

                        <p:column headerText="First Name" style="width:150px">
                            <p:inputText value="#{line.intituleCompte}" style="width:100%" />
                        </p:column>

                        <p:column headerText="Last Name" style="width:150px">
                            <p:inputText value="#{line.code}" style="width:100%" />
                        </p:column>

                    </p:dataTable>

                </p:panel>
                <p:commandButton actionListener="#{ecritureCtrl.newLine}"
                    value="New" update="dataTableSaisiePiece" oncomplete="addRowOnComplete()"
                     ajax="true" />

            </p:tab>

            <p:tab id="tab3" title="Saisie 2">
            </p:tab>

        </p:tabView>
    </h:form>

</h:body>
</html>

Changing h:datatable cell color or style dynamically in JSF

In the standard JSF <h:dataTable> component, the rowClasses attribute is unfortunately not evaluated on a per-row basis. It's evaluated on a per-table basis. Component libraries like Tomahawk and PrimeFaces however support the kind of attribute which you're looking for on their <t:dataTable> and <p:dataTable>.

With the standard JSF <h:dataTable> component you need to supply a comma-separated string of all row classes. This can look something like this:

public String getRowClasses() {
    StringBuilder rowClasses = new StringBuilder();

    for (Comment comment : comments) {
        if (rowClasses.length() > 0) rowClasses.append(",");
        rowClasses.append(comment.getCssClass());
    }

    return rowClasses.toString();
}

which is then to be referenced as

<h:dataTable ... rowClasses="#{post.rowClasses}">

Unable to send parameter from JSF to Bean through datatable value attribute

i think you need to define below line inside the p:datatable tag with passing id as parameter and instead of #{statusList.getScenarioStatusList(data.id)} in sub datatable you just do value= "#{yourBean.scenarioStatusList}". populate scenarioStatusList in loadLists(data.id) method.

<p:ajax event="rowToggle" listener="#{yourBean.loadLists(data.id)}"  />