Sorted/Filtered table with data from Pinia store does not expose correct item id for use with expand row

[gantonjo-tnm]

I have a table where data in the table is fetched from a MySQL database and stored in Pinia store. I have enabled expand row so that details for the expanded row is fetched from the MySQL backend based on the piniastore.item.id. When unsorted and unfiltered, the piniastore.item.id is correctly found in the tables item[x], where row[x] contains row[x]. However, when sorting, searching or filtering the data in the table, item[x] is displayed in row[y]. It is the row number in the view that is used by expand row functionality, hence I can't find the correct piniastore.item.id for use towards the MySQL backend (e.g. row[0] does not point to item[0] after sort).

Problem is that I cannot use item.id as parameter to expand row, but I can use it for triggering other functions per row. E.g. I can call createExcel(item.id) at click of a button in the row and get an Excel file for that row's data. This works correctly whether the table is sorted, filtered or in unchanged status. That is, for onClick actions item.id is OK, but expand row function obviously uses the row id and not the item.id, as far as I can tell.

I probably have missed some important part in the documentation, but am not able to figure out how to secure the correct behaviour.

Another problem I have seen, is that a refresh of the data deletes the expanded data of the expanded row(s), but leaves the row(s) in expanded status. I have to unexpand and expand the rows to show the expanded data. Is there a way to close all expands when table or row is reloaded?

[gantonjo-tnm]

Never mind, by reading the code in the repository, I found that the expand-row function actually can be created to handle both the row index and row item, not only the row index as indicated in the documentation at https://hc200ok.github.io/vue3-easy-data-table-doc/features/expand-slot.html.

So, the example code:

const loadIntroduction = async (index: number): Promise<void> => {
  const expandedItem = items.value[index];
  if (!expandedItem.introduction) {
    expandedItem.expandLoading = true;
    expandedItem.introduction = await mockItemIntroduction(expandedItem.player);
    expandedItem.expandLoading = false;
  }
};

should have shown the following:

const loadIntroduction = async (index: number, item: Item): Promise<void> => {
  const dbid = item.id;
  const expandedItem = items.value[index];
  if (!expandedItem.introduction) {
    expandedItem.expandLoading = true;
    expandedItem.introduction = await mockItemIntroduction(expandedItem.player, dbid);
    expandedItem.expandLoading = false;
  }
};

Or something like that to indicate how to fetch value from one of the cells in the expanded item.

For me this would have solved the issue before having to ask the question here ;-)