How do I get the page number of a table's selected row?

💬 App Building
,
1

Say you have a table like this:

image
image751×373 53.2 KB

This selected row is index=25 in the original dataset:

image

However, it is index=59 in the sorted table. In my case, I'd like to move the table to the page of the selected row from a query, which is executed when a user selects one of those rows from a map.

AFAICT, there aren't any fields on the Table component which provide you with the index of the selected row in the sorted table. And there also aren't any fields that provide you with the sorted dataset. The only option I can think of is to take the Table's data, sort it, then find the index of this row. Is there a better way?

2

Hello @colin! Good to hear from you again :slight_smile:

You are correct - the table.selectedRow.index property maps to the index of the selected row in the original dataset, not the sorted version displayed in the table. I’ve fiddled around a bit and can’t find anything that would solve your issue directly :frowning:

There are a couple of workarounds that I can think of - the easiest one would be to filter the table based on the triggered query, instead of selecting a particular row. Another one would be to get the index of the row you want to select via filtering the original dataset through JS.

3

Thanks for taking a look into this, Justin! I ended up doing the latter (sorting in JS) and that works good enough for me:

const sortedData = [...attractionsTable.data]
sortedData.sort((a, b) => {
  const col = attractionsTable.sort[0].id
  if (a[col] == b[col]) {
    return 0
  }
  
  const order = a[col] < b[col] ? 1 : -1
  return attractionsTable.sort[0].desc ? order : -order
})
const sortedIndex = sortedData.findIndex(d => d.name == map.selectedPoint.name)
attractionsTable.selectPage(sortedIndex / attractionsTable.pageSize)
1 Like
4

Ah dope! Glad you were able to get it working!