Just starting out with Vue and Vuex here. Currently using Vue 2.0 along with the bootstrap-vue component for server-side rendering to ensure correct sorting and pagination from the API. I've disabled local sorting on the b-table element.
I apologize for the lengthy explanation, but it's necessary. I've developed a component containing a table and passing in props, including an array of Fields from the parent component. Within the child b-table component, I'm specifying one of these fields as clickable by placing it into the #cell slot and incorporating a b-link tag. Below is the code snippet where I'm inserting into the #cell slot within the child component:
<!-- Edit button (key field called 'action' in fields array) -->
<template #cell(action)="row">
<b-link
size="sm"
@click="showItemDetail(row.item, row.index, $event.target)"
>
<!-- Edit -->
{{ row.item[keyField] }}
</b-link>
</template>
I've used "action" in the #cell() to correspond with the key defined in the fields array being passed down to the child component via props, which will trigger the item detail view when clicked. Here is how the fields array looks like when passed in:
fields: [
{
key: "action",
label: "Batch Id",
sortable: true,
sortBy: "batchId",
}, ...
Please note that the key "action" matches the #cell(action) in the b-table child component. This setup results in the batch id column displaying as a link, and upon clicking it, showItemDetail function is invoked to display the item details view successfully. The initial sort order remains as displayed in another column on the table.
ISSUE: When I click on the header of the batch id (action column) to sort for the first time, the server correctly responds and the data gets displayed sorted by batch id. However, the sorting indicator does not update, failing to show the ascending arrow. There is no visual indication of the applied sort except for the actual data order. Despite sending the correct sort order and direction to the server, the client side fails to reflect this on the UI.
Subsequently, upon clicking again, it reverts to ascending order (as if it was never sorted by that column before), and the ascending arrow appears highlighted. Clicking once more sorts it in descending order, accurately displaying the downward arrow. Hence, the issue lies only in the first instance of sorting, where the arrow fails to highlight and recognize the applied sort.
https://i.sstatic.net/cA97l.gif
Thank you for taking the time to read through this. It's very likely that I'm approaching this in the wrong manner, and there might be a more efficient way of abstracting the code and implementing row-click functionality to reveal details, especially in the context of server-side rendering. As I find all of this quite overwhelming at the moment, any suggestions would be greatly appreciated. Thank you.