@is-finished looks like not triggering. about vue3-table-lite

[linmasahiro]

Hi, @mambari
I rewrite my document. Hope helpful for you.
https://linmasahiro.github.io/vue3-table-lite/dist/

[linmasahiro]

    const tableLoadingFinish = function loadingFinish(elements) {

Fix this row to

const tableLoadingFinish = (elements)  => {

[mambari]

I did but still, nothing is happening.
Sorry I am not good enough to get why it's happening.
Thank you for your help. If I succeed to make it work I will do documentation of how to integrate your code.

[mambari]

Perhaps it can help. I have this message

<script lang="ts">
import { reactive } from 'vue';
import VueTableLite from 'vue3-table-lite';

Could not find a declaration file for module 'vue3-table-lite'. '/Users/mehdiambari/Desktop/Projets/NNP2/node_modules/vue3-table-lite/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/vue3-table-lite` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue3-table-lite';`Vetur(7016)

[linmasahiro]

Perhaps it can help. I have this message

<script lang="ts">
import { reactive } from 'vue';
import VueTableLite from 'vue3-table-lite';

Could not find a declaration file for module 'vue3-table-lite'. '/Users/mehdiambari/Desktop/Projets/NNP2/node_modules/vue3-table-lite/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/vue3-table-lite` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue3-table-lite';`Vetur(7016)

Did you add 「shims-vue.d.ts」to your 「src」folder?

├── dist
│   ├── ...
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
└── tsconfig.json

If not, maybe you can try to create shims-vue.d.ts file and contents will be like

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

[linmasahiro]

I create a example by TypeScript.

Example.vue

<template>
  <table-lite
    :has-checkbox="true"
    :is-loading="table.isLoading"
    :is-re-search="table.isReSearch"
    :columns="table.columns"
    :rows="table.rows"
    :total="table.totalRecordCount"
    :sortable="table.sortable"
    :messages="table.messages"
    @do-search="doSearch"
    @is-finished="tableLoadingFinish"
    @return-checked-rows="updateCheckedRows"
  ></table-lite>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import TableLite from "./components/TableLite.vue";

// create fake data1
const sampleData1 = (offst: number, limit: number): Array<rowData> => {
  offst = offst + 1;
  let data = [];
  for (let i = offst; i <= limit; i++) {
    data.push({
      id: i,
      name: "TEST" + i,
      email: "test" + i + "@example.com",
    });
  }
  return data;
};

// create fake data2
const sampleData2 = (offst: number, limit: number): Array<rowData> => {
  let data = [];
  for (let i = limit; i > offst; i--) {
    data.push({
      id: i,
      name: "TEST" + i,
      email: "test" + i + "@example.com",
    });
  }
  return data;
};

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

export default defineComponent({
  name: "App",
  components: { TableLite },
  setup() {
    // Init Your table settings
    const table = reactive({
      isLoading: false,
      isReSearch: false,
      columns: [
        {
          label: "ID",
          field: "id",
          width: "3%",
          sortable: true,
          isKey: true,
        },
        {
          label: "Name",
          field: "name",
          width: "10%",
          sortable: true,
          display: function (row: rowData) {
            return (
              '<a href="#" data-id="' +
              row.id +
              '" class="is-rows-el name-btn">' +
              row.name +
              "</a>"
            );
          },
        },
        {
          label: "Email",
          field: "email",
          width: "15%",
          sortable: true,
        },
        {
          label: "",
          field: "quick",
          width: "10%",
          display: function (row: rowData) {
            return (
              '<button type="button" data-id="' +
              row.id +
              '" class="is-rows-el quick-btn">Button</button>'
            );
          },
        },
      ],
      rows: [] as Array<rowData>,
      totalRecordCount: 0,
      sortable: {
        order: "id",
        sort: "asc",
      },
      messages: {
        pagingInfo: "Showing {0}-{1} of {2}",
        pageSizeChangeLabel: "Row count:",
        gotoPageLabel: "Go to page:",
        noDataAvailable: "No data",
      },
    });

    /**
     * Table search event
     */
    const doSearch = (offset: number, limit: number, order: string, sort: string) => {
      table.isLoading = true;
      setTimeout(() => {
        table.isReSearch = offset == undefined ? true : false;
        if (offset >= 10 || limit >= 20) {
          limit = 20;
        }
        if (sort == "asc") {
          table.rows = sampleData1(offset, limit);
        } else {
          table.rows = sampleData2(offset, limit);
        }
        table.totalRecordCount = 20;
        table.sortable.order = order;
        table.sortable.sort = sort;
      }, 600);
    };

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

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

    doSearch(0, 10, 'id', 'asc');

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

[mambari]

Perhaps it can help. I have this message

<script lang="ts">
import { reactive } from 'vue';
import VueTableLite from 'vue3-table-lite';

Could not find a declaration file for module 'vue3-table-lite'. '/Users/mehdiambari/Desktop/Projets/NNP2/node_modules/vue3-table-lite/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/vue3-table-lite` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue3-table-lite';`Vetur(7016)

Did you add 「shims-vue.d.ts」to your 「src」folder?

├── dist
│   ├── ...
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
└── tsconfig.json

If not, maybe you can try to create shims-vue.d.ts file and contents will be like

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Yes I do

[mambari]

Ok thank you really much. Almost done.
Everything is working except buttons that are not reacting. (No message in the console). 😔

[linmasahiro]

Ok thank you really much. Almost done. Everything is working except buttons that are not reacting. (No message in the console). 😔

I has a mistake on origin example. But already fixed on the example. fix 「row.user_id」 to 「row.id」 on 「display�」 method please.

display: function (row: rowData) {
  return ('<button type="button" data-id="' + row.id + '" class="is-rows-el quick-btn">Button</button>');
},

[mambari]

Thank you so much for your help
The issue was is-rows-el missing in class inside my code