How to create a Editable table

Hello first time i have to create an editable table but this table it should be able to create a new rows when i press a button , eg.g i open the app and the table should be empty, so i press a button to create a new line with a visible index, a column (editable) for a value and another column that depends of the value column that creates an icon if is empty or not . Any idea on how to create this ?

i created this table:

<Table id="idProductsTable">
									<columns>
										<Column width="10%" hAlign="Center">
											<Text text="N°"/>
										</Column>
										<Column width="70%" hAlign="Center">
											<Text text="Valor"/>
										</Column>
										<Column width="20%" hAlign="Center">
											<Text text="{i18n>valorac}"/>
										</Column>
									</columns>
									<items>
										<!--<ColumnListItem class="styleFila" id="columnListItemID" type="Active">
											<cells>
												<Text id="t_numI" text="1"/>
												<Input id="t_valor" liveChange="onValueTabla" type="Number"/>
												<core:Icon src="sap-icon://sys-cancel-2" color="#F80D0D"/>
											</cells>
										</ColumnListItem>-->
									</items>
								</Table>

controoler:

var oTable = this.getView().byId("idProductsTable");
			for ( var i = 0; i < this.maxRows; i++ ) {
				var oItem = new sap.m.ColumnListItem({
					cells : [ 
						new sap.m.Text({
							text: i
						}), 
						new sap.m.Input({
							id : "i_aregis_" + i,
							liveChange: "onValueTabla",
							type: "Number"
						}), 
						new sap.ui.core.Icon({
							src: "sap-icon://sys-cancel-2",
							size: "1.5rem",
							color: "#F80D0D"
						}) 
					]
				});
				oTable.addItem(oItem);
			}

I have just one problem , liveChange of my inputs are't not triggered , i don0t know why