How to change text inside the component to have vertical position

Assuming that your text is inside span component you can just add css:

Primefaces Datatable with editable rows, add button and remove button

So the goal is to implement something like that:

So as you can see we have editable component. It is possible to add new row. When the row is being edited Apply button is disabled and also when you add new row the row is automatically set to edit mode.
Let's take a look at the implementation:
This is an implementation of a from containing datable:

As you can see we used jsf compositions here. Take a look at the implementation of datatable:

And finally bean implementation:

Notice that Remove button inside third column is in the same line as Edit, Check and Close buttons. This is not a default behaviour - in order to achieve that you need to add following css:

Implementing commandButton which looses focus after onmouseup

I noticed that on chrome - commandButton from Primefaces doesn't loose focus after clicking on it. This is different behaviour than on Firefox. In order to change it you need to just add attribute

onmouseup="this.blur();"

So your commandButton implementation may look like this:

<p:commandButton 

id="moveUpButton" process="@this" immediate="true"

onmouseup="this.blur();" update="orchestrationTaskDiagram moveDownButton moveUpButton"

actionListener="#{projectAdminBean.moveUpActionListener}" 

icon="ui-icon ui-icon-arrowthick-1-n" title="Move Task Up" 

styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default" 

disabled="#{!canSaveChanges or !projectAdminBean.editMode or !projectAdminBean.isMoveUpEnabled()}" />