fix(DataTable): remove selection when row is not exist anymore

example/src/views/DataTableView.vue

@@ -782,6 +782,10 @@ function toggleRow(row: any, expanded: any[] | undefined) {
   else
     expanded?.push(row);
 }
+
+function removeRow(table: DataTableProps, id: number) {
+  table.rows = table.rows.filter(row => row.id !== id);
+}
 </script>
 
 <template>
@@ -833,15 +837,17 @@ function toggleRow(row: any, expanded: any[] | undefined) {
             <template #header.text.address.city>
               city custom header
             </template>
-            <template #item.action>
+            <template #item.action="{ row }">
               <RuiButton
                 icon
                 variant="text"
                 size="sm"
+                @click="removeRow(table, row.id)"
               >
                 <RuiIcon
-                  name="more-fill"
-                  color="primary"
+                  name="delete-bin-line"
+                  size="14"
+                  color="error"
                 />
               </RuiButton>
             </template>

src/components/forms/checkbox/Checkbox.vue

@@ -83,6 +83,12 @@ watch(indeterminate, (val) => {
       input.value = 'on';
   }
 });
+
+watch(modelValue, (val) => {
+  const input = get(el);
+  if (input && input.checked !== val)
+    input.checked = val;
+});
 </script>
 
 <template>

src/components/tables/DataTable.vue

@@ -826,11 +826,10 @@ function resetCheckboxShiftState() {
  * toggles a single row
  * @param {boolean} checked checkbox state
  * @param {string} value the id of the selected row
- * @param {number} index the index of the selected row
  * @param {boolean} userAction whether the select triggered by user manually
  *
  */
-function onSelect(checked: boolean, value: string, index: number, userAction = false) {
+function onSelect(checked: boolean, value: string, userAction = false) {
   if (get(shiftClicked) && userAction)
     return;
 
@@ -875,7 +874,7 @@ function onCheckboxClick(event: any, value: string, index: number) {
           const valueToApply = isSelected(lastSelectedData[id]);
 
           if (lastIndex === index) {
-            onSelect(!valueToApply, value, index);
+            onSelect(!valueToApply, value);
           }
           else {
             const from = Math.min(lastIndex, index);
@@ -884,7 +883,7 @@ function onCheckboxClick(event: any, value: string, index: number) {
             for (let i = from; i <= to; i++) {
               const currSelectedData = tableData[i];
               if (isRow(currSelectedData) && !isDisabledRow(currSelectedData[id]))
-                onSelect(valueToApply, currSelectedData[id], i);
+                onSelect(valueToApply, currSelectedData[id]);
             }
           }
 
@@ -898,6 +897,13 @@ function onCheckboxClick(event: any, value: string, index: number) {
   }
 }
 
+function deselectRemovedRows() {
+  get(selectedData)?.forEach((key: TableRow[TableRowKey]) => {
+    if (isSelected(key) && !get(visibleIdentifiers).includes(key))
+      onSelect(false, key, true);
+  });
+}
+
 function scrollToTop() {
   const { top } = useElementBounding(table);
   const { top: scrollerTop } = useElementBounding(scroller);
@@ -971,7 +977,11 @@ watch(search, () => {
   resetCheckboxShiftState();
 });
 
-watch(sorted, setInternalTotal);
+watch(sorted, (items) => {
+  if (!get(multiPageSelect))
+    deselectRemovedRows();
+  setInternalTotal(items);
+});
 
 onMounted(() => {
   setInternalTotal(get(sorted));
@@ -1159,7 +1169,7 @@ onMounted(() => {
                     color="primary"
                     class="select-none"
                     hide-details
-                    @input="onSelect($event, row[rowAttr], index, true)"
+                    @input="onSelect($event, row[rowAttr], true)"
                     @click="onCheckboxClick($event, row[rowAttr], index)"
                   />
                 </td>