Populate Table after Combo Box Selection - sapui5

Question

I have a table that is populated by OData but I want it to not populate when first loading the page.
How can I have it be empty until the user selects a choice in the combo box first? Is there suppose to be a change in the view, controller, or manifest?
View
<ComboBox id="officeComboBox"
width="100%"
placeholder="Office"
selectionChange=".officeComboChange"
>
<items>
<core:Item key="{OFFICE_CODE}" text="{OFFICE_CODE}" textDirection="RTL"/>
</items>
</ComboBox>
<!-- ... -->
<Table id="statTable"
noDataText="Initializing Data"
growing="true"
includeItemInSelection="true"
headerText="EST"
items="{/ESTSet}"
>
Controller
Handler officeCodeChange works fine for displaying the right items on the table after combo box selection
onInit: function() {
var oViewModel, iOriginalBusyDelay, oTable = this.byId("officeCombo");
this._oTableSearchState = [];
},
officeCodeChange: function(event) {
var aFilters = [];
var officeCode = event.getParameter("selectedItem").getText();
var filter = new Filter("EST_ID", sap.ui.model.FilterOperator.Contains, officeCode);
var list = this.getView().byId("statTable");
var binding = list.getBinding("items");
binding.filter(aFilters.concat(filter), "Application");
},

Answer 1

Remove the initial aggregation binding items="{/ESTSet}" and the corresponding template control from the view.
Use bindItems in combination with the created filter(s):
officeCodeChange: function(event) {
const filter = /*...*/;
const table = this.byId("statTable");
const listBinding = table.getBinding("items");
if (listBinding) {
listBinding.filter(filter, FilterType.Application); // FilterType required from "sap/ui/model/FilterType"
} else {
this.bindStats(table, filter);
}
},
bindStats: function(table, filter) {
table.bindItems({
path: "/ESTSet",
filters: [filter],
template: new ColumnListItem({ // required from "sap/m/ColumnListItem"
//...
}),
});
},