We will see how to delete records from a paginated table using Vue 3 with Caterpillar UI.

For the paginated list in Vue built on previous posts, we define the function to delete a post or records:

  deletePost(row) {
      this.posts.data.splice(row.index,1)
      console.log(row);
      this.$axios.delete("/api/post/"+row.row.id);
    },

And the action on the OrugaUI table or component

<o-table-column field="slug" label="Acciones" v-slot="p">
    <router-link :to="{ name: 'save', params: { slug: p.row.slug } }"
      >Editar</router-link
    >
    <o-button variant="danger" @click="deletePost(p)"
      >Eliminar</o-button
    >
  </o-table-column>

With this, we can delete records directly from the table in Oruga UI.