OTable does not correctly filter/paginate/sort under many scenarios

[urkle]

Overview of the problem

Oruga version: [0.10.5+] Vuejs version: [3.5.13] OS/Browser: many (Firefox, Chrome, Safari) macOS

Description

When defining an OTable with a bound :data ref adding/removing entries to the data set does not trigger a re-filter NOR a sort. Thus causing the pagination and sorting functionality to not work.

Our application is using a pinia store and we trigger a data resync which loads data into the list of records in the store (which is bound to data either directly OR though a computed behaves the same)

I have reproduced this in a minimal example as well.

Steps to reproduce

<script setup>
import { OButton, OTable, OTableColumn } from '@oruga-ui/oruga-next';
import { ref } from 'vue';

const data = ref([]);

const random_words = [
  'apple', 'beach', 'cloud', 'dance', 'eagle', 'flame', 'grace', 'heart',
  'image', 'jolly', 'knife', 'light', 'music', 'noble', 'ocean', 'peace',
  'quick', 'river', 'storm', 'table', 'under', 'voice', 'water', 'youth',
  'zebra', 'amber', 'blend', 'craft', 'dream', 'earth', 'frost', 'green',
];

let lastId = 1;

function add() {
  data.value.push({
    id: lastId,
    name: random_words[Math.floor(Math.random() * random_words.length)],
  });
  lastId++;
}

function replace() {
  let data_copy = data.value.slice();
  data.value = data_copy;
}
</script>

<template>
<OButton @click="add">Add record</OButton>
<OButton @click="replace">Replace recordset</OButton>

<OTable :data="data" paginated :per-page="10" default-sort="name">
  <OTableColumn label="Name" field="name" sortable />
</OTable>
</template>

Expected behavior

The data to be (and remain) filtered, paginated, and sorted as new records are added. The data to be sorted when a new array is assigned to the data ref.

Actual behavior

When starting with an empty list, adding items

• ❌ it does NOT sort the entries (it should)

when adding above the page limit should filter to the page limit.

• ✅ it does correctly detect that there are more pages needed as the pager adds a "2"
• ❌it does NOT filter by the per-page limit. (it shows ALL entries)

When starting with an existing LARGE list (visually properly paginated and sorted) and adding an item (add > 10 entries on the test page and click on "page 1" and click the name header to sort)

• ❌it loses the pagination (it shows ALL records)
• ❌it loses the sorting

When assigning a new list (click the replace button to simulate this)

• ✅ it is paginated (YEAH!)
• ❌ it loses its sorting