lost event click after dosearch about vue3-table-lite

[linmasahiro]

Hi, @mambari
If you want to filter data on client, you should be use static-mode.
I fixed your code on here, and it good work.

<template>
  <div class="contentAccountsTab">
    <vue-table-lite
      :is-static-mode="true"
      :has-checkbox="true"
      :is-loading="table.isLoading"
      :columns="table.columns"
      :rows="table.rows"
      :total="table.totalRecordCount"
      :sortable="table.sortable"
      :messages="table.messages"
      @is-finished="tableLoadingFinish"
      @return-checked-rows="updateCheckedRows"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from "vue";
import VueTableLite from "vue3-table-lite";
// import { useAuth } from "@/composable/auth";

// Define row data interface
interface rowData {
  id?: number;
  name: string;
  email: string;
  role?: string;
}

export default defineComponent({
  name: "AccountsTab",
  components: { VueTableLite },
  setup() {
    // const {
    //   listUsers,
    // } = useAuth();

    // Init Your table settings
    const table = reactive({
      isLoading: false,
      columns: [
        {
          label: "ID",
          field: "id",
          width: "3%",
          sortable: true,
          isKey: true,
        },
        {
          label: "Email",
          field: "email",
          width: "15%",
          sortable: true,
        },
        {
          label: "Role",
          field: "role",
          width: "10%",
          sortable: true,
        },
        {
          label: "Action",
          field: "quick",
          width: "3%",
          display(row: rowData) {
            return `<button type="button" data-id="${row.id}" data-email="${row.email}" class="is-rows-el remove-btn">Supprimer</button>`;
          },
        },
      ],
      rows: [] as Array<rowData>,
      totalRecordCount: computed((): number => {
        return table.rows.length;
      }),
      sortable: {
        order: "id",
        sort: "asc",
      },
      messages: {
        pagingInfo: "Showing {0}-{1} of {2}",
        pageSizeChangeLabel: "Row count:",
        gotoPageLabel: "Go to page:",
        noDataAvailable: "No data",
      },
    });

    /**
     * lis all users
     */
    const listAllUsers = async () => {
      table.isLoading = true;
      const data: rowData[] = [];
      for (let i = 0; i < 126; i++) {
        data.push({
          id: i,
          name: "TEST" + i,
          email: "test" + i + "@example.com",
          role: "ADMIN",
        });
      }
      // To Mehdi: restore your source plz.
      // const list = JSON.parse(await listUsers());
      // const offst = 0;
      // const limit = list.users.length;
      // for (let i = offst; i < limit; i += 1) {
      //   data.push({
      //     id: i,
      //     name: `USER ${i}`,
      //     email: `${list.users[i].email}`,
      //     role: `${list.users[i].role}`,
      //   });
      // }
      table.rows = data;
    };

    /**
     * Table search finished event
     */
    const tableLoadingFinish = (elements: Array<HTMLElement>) => {
      console.log("elem = ", elements);
      table.isLoading = false;
      Array.prototype.forEach.call(elements, function (element: HTMLElement) {
        if (element.classList.contains("remove-btn")) {
          element.addEventListener("click", function () {
            console.log(`${this.dataset.id} name-btn click!!`);
          });
        }
      });
    };

    /**
     * Row checked event
     */
    const updateCheckedRows = (rowsKey: number) => {
      console.log("rowsKey = ", rowsKey);
    };

    listAllUsers();

    return {
      table,
      tableLoadingFinish,
      updateCheckedRows,
    };
  },
});
</script>

※ You can reference Filter example or Asynchronous filter example to helpful you.

[mambari]

Hi, thank you for your help 🙏 .
I copy past your solution but I get that (stuck with loading):
(But I am with "vue3-table-lite": "^1.0.7" )

[linmasahiro]

Hi, @mambari

Hi, thank you for your help 🙏 . I copy past your solution but I get that (stuck with loading): (But I am with "vue3-table-lite": "^1.0.7" )

Has a tableLoadingFinish method not working on static-mode bug on version 1.0.7, fixed on v1.0.8.
So upgrade to upper v1.0.8, thanks.

[mambari]

Thank you so much. I updated and It works like a charm.