Auto select inserted row in table

Would be wonderful if there were an easy way to select the inserted row in a table. I have not figured out a reliable way to do this. Still on the hunt today, If I figure something out I'll post here.

@bradlymathews if you're sorting the table, you can run a JS query that executes table1.selectRow() and pass in the index you want to select.

Yes, that is the easy part. I need to wait until the insert is complete, read the ID of the new record, wait for the table to refresh with the new data, find the index of the inserted record and then select the row.

How one puts those pieces together will depend on the app's architecture. Seeing as you are shooting for low-code, maybe there is a way to pull much this off on your end?

Here is the latest version that seems to work for one of my apps where I use a modal form (as opposed to the Add Row button of the table) to add a simple record.

// jsInsertTemplate
const templateInsert = async () => {
  // Set the name of the template I am adding to a temp state var
  // which I will use later to find the row to select. This is a shortcut
  // to reading the ID returned from the insert - won't work for every situation.
  currentTemplate.setValue(txtAddTemplateName.value)
  await qryTemplateInsert.trigger()  // Insert record
  await qryTemplatesSelect.trigger() // requery the database
  // Note to Retool devs: Can we please, please simply update 
  // myTable.data instead of requiring we requery the back end?
}
if (txtAddTemplateName.value) {  // Only execute if form is filled in.
	templateInsert() // Now trigger the function
}

Then in the qryTemplatesSelect's onSuccess I call jsSelectTemplateRow

// jsSelectTemplateRow
const idx = tblTemplates.data.template_name.indexOf(txtAddTemplateName.value)
if (idx >= 0 ) {
  tblTemplates.selectRow(idx)
}
1 Like

This is useful feedback @bradlymathews - definitely sharing with the team as we think more about improving general CRUD in Retool.