Primefaces Dropdown with Datatable - jsf

Question

Im trying to implement a JSF-Webapp with Primefaces. In that case i need a Dropdown with a Datatable inside.
The datatable contains over 30.000 entries (3 columns). I already implemented a datatable with virtual scrolling that works fine (i still need to think about initial data loading, maybe its possible to load data only from db, if end of view is reached).
Idea is a dropdown with a String as value (generated from database) and after clicking on the dropdown, you see the datatable, where the user can choose and select one. The selected should be written into database after submit.
<p:selectOneMenu>
<f:selectItems>
<p:dataTable var="entry" value="#{scrollView.lazyModel}"
scrollRows="20" scrollable="true" virtualScroll="true"
scrollHeight="200" lazy="true" rows="40" style="margin-bottom:0">
<p:column headerText="e1" footerText="e1">
<h:outputText value="#{entry.e1}" />
</p:column>
<p:column headerText="e2" footerText="e2">
<h:outputText value="#{entry.e2}" />
</p:column>
<p:column headerText="e3" footerText="e3">
<h:outputText value="#{entry.e3}" />
</p:column>
</p:dataTable>
</f:selectItems>
</p:selectOneMenu>
EDIT: I found a solution to get columns in my dropdown (thx!), but if i solve it this way, i cant use virtual scrolling. My problem is, that i dont know how to check, if scrollbar is at bottom of the dropdown. My idea was to check and if true reload the selectonemenu with new data.
XHTML:
<p:selectOneMenu id="test"
value="#{bean.dto == null ? '': bean.dto}"
var="d">
<f:selectItem
itemLabel="#{bean.dto == null ? '': bean.dto}" />
<f:selectItems value="#{docScroll.currentData}" var="doc" itemValue="#{doc}"
itemLabel="#{doc.forename} #{doc.surname}, #{doc.city}" />
<p:column>
#{d.surname}
</p:column>
<p:column>
#{d.forename}
</p:column>
<p:column>
#{d.city}
</p:column>
<f:ajax event="change" onevent="#{scripts.checkScrollBottom}" listener="#{docScroll.reloadData}" update="test"/>
</p:selectOneMenu>
reloadData:
public void reloadData() {
if (pos == data.size() - 1) {
return;
}
pos += range - 1;
if (pos >= data.size()) {
pos = data.size() - 1;
}
currentData = data.subList(0, pos);
}
checkScrollBottom:
function checkScrollBottom(event){
var source = event.target;
if(source.offsetHeight + source.scrollTop == source.scrollHeight){
alter("END!!");
}
}