bind to remote data using managed bean for xhtml jsf webapp

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>
    <title>queryData</title>
</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>