bind to remote data using managed bean for xhtml jsf webapp

General
1

Hello,

How could I bind the table ?

Example of my html table:

Remote data binding:

How would I connect a managed bean to your component?

My main interest is:

HIERARCHY - nested grid / row detail (child)
Global SEARCH as you type
Column FILTER as you type
Column SORTING as you type
PAGING

Highlight search as you type

example html table at http://35.164.222.200/

<h:head>
queryData
</h:head>
<h:body>
<h:dataTable width=“100%” value=“#{queryBean.getDataList()}” var=“u”
border=“1”>

    <h:column>
        <f:facet name="header">Number</f:facet>
        #{u.caseno}
    </h:column>

</h:dataTable>

</h:body>