ATable does not change on rows Prop change #67
Description
When I set the rows Prop of the ATable to a reactive Array it displays the content as expected. If I change the reactive Array (like adding a new element) ATable does not refresh its content. If I change the pagination the new row becomes visible.
Here the relavant code:
<script setup lang="ts">
const fakeDatabase: User[] = [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april
...
}]
const dbRef = ref<User[]>(fakeDatabase)
function addRow() {
dbRef.value.push({
id: 100,
name: 'New User',
username: 'newuser',
email: 'newuser@whatever.com',
...
})
}
</script>
<template>
<div class="cards-demo-container">
<ABtn @click="addRow">Add New Item</ABtn>
<ATable :rows="dbRef" :columns="cols" :page-size="15" />
</div>
</template>Looking at the code recalculateCurrentPageData is only called when the search or the sorting is changed, but not when the rows are changing.
In general, the question is what the designated way is to update the content of the ATable?