PrimeFaces Datatable Editable Row Not Working

I have implemented an editable p: datatable. After I click the Edit button and change the value, the Edit and Cancel buttons do not work and the row remains open for editing. May I know about any error that I am facing?

Code

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

<p:dataTable value="#{bean.dataList}" var="data"
                    id="table" editable="true">

    <p:ajax event="rowEdit" listener="#{bean.onRowEdit}"/>
    <p:ajax event="rowEditCancel" listener="#{bean.onRowCancel}"/>

    <p:column>
        <f:facet name="header">
            <h:outputLabel value="ID" />
        </f:facet>
            <h:outputText value="#{data.id}" />
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputLabel value="Name" />
        </f:facet>

        <p:cellEditor>
            <f:facet name="output">
               <h:outputText value="#{data.name}" />
            </f:facet>
            <f:facet name="input">
               <p:inputText id="editName" value="#{data.name}">
                    <f:validateLength minimum="3" maximum="30" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>
    <p:column>
        <f:facet name="header">
            <h:outputLabel value="Gender" />
        </f:facet>

        <p:cellEditor>
            <f:facet name="output">
               <h:outputText value="#{data.gender}" />
            </f:facet>
            <f:facet name="input">
               <p:inputText id="editGender" value="#{data.gender}">
                    <f:validateLength minimum="3" maximum="30" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>             
    <p:column>
        <f:facet name="header">
            <h:outputLabel value="Edit" />
        </f:facet>
        <p:rowEditor />
    </p:column>
</p:dataTable>

</p:panel>