Primefaces datatable not editing - primefaces

Question

I'm trying to make editable primefaces datatable. I'm using http://www.primefaces.org/showcase/ui/datatableRowEditing.jsf. All database table data showing up, but then I trying to edit data in a table I'm getting following error:
/index.xhtml #23,90 listener="#{tableBean.onEdit}": Target Unreachable, identifier 'tableBean' resolved to null: javax.el.PropertyNotFoundException: /index.xhtml #23,90 listener="#{tableBean.onEdit}": Target Unreachable, identifier 'tableBean' resolved to null
index.xhtml
<h:head>
<title>index.xhtml</title>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable var="u" value="#{logonTest.userList}" id="carList" editable="true">
<f:facet name="header">
In-Cell Editing
</f:facet>
<p:ajax event="rowEdit" listener="#{tableBean.onEdit}" update=":form:messages" />
<p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}" update=":form:messages" />
<p:column headerText="Name" style="width:30%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{u.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{u.name}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Surname" style="width:20%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{u.surname}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{u.surname}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
TableBean.java
public void onEdit(RowEditEvent event) {
FacesMessage msg = new FacesMessage(" Edited", ((User) event.getObject()).getName());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onCancel(RowEditEvent event) {
FacesMessage msg = new FacesMessage(" Cancelled", ((User) event.getObject()).getName());
FacesContext.getCurrentInstance().addMessage(null, msg);
}