const test = () => {
  for (let i = 0; i < 126; i++) {
    data.push({
      id: i,
      name: "TEST" + i,
      email: "test" + i + "@example.com",
    });
  }
}

rows: computed(async () => {
    const ret = await setTimeout(test, 3000);
    return data.filter(
      (x) =>
        x.email.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
        x.name.toLowerCase().includes(searchTerm.value.toLowerCase())
    );
  }),

<vue-table-lite
  :is-loading="table.isLoading"
  :is-slot-mode="true"
  :columns="table.columns"
  :rows="table.rows"
  :total="table.totalRecordCount"
  :sortable="table.sortable"
  :messages="table.messages"
  :page-size="2"
  @do-search="checkSearch"
  @is-finished="busy = false"
>

<template>
  <vue-table-lite
    :is-static-mode='false'
    :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-row='updateCheckedRows'
  />
</template>

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

export default {
  name: 'AccountsTab',
  components: {
    VueTableLite,
  },
  setup() : unknown {
    const sampleData1 = function (offst, limit) {
      let sampleoffst = offst;
      sampleoffst += 1;
      type Data = {
        id: number
        name: string
        email: string
      }
      const data: Data[] = [];
      for (let i = sampleoffst; i <= limit; i += 1) {
        data.push({
          id: i,
          name: `TEST${i}`,
          email: `test${i}@example.com`,
        });
      }
      return data;
    };

    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 display(row) {
            return (
              `<a href="#" data-id="${row.id}" class="name-btn">${row.name}</button>`
            );
          },
        },
        {
          label: 'Email',
          field: 'email',
          width: '15%',
          sortable: true,
        },
        {
          label: '',
          field: 'quick',
          width: '10%',
          display: function display(row) {
            return (
              `<button type="button" data-id="${row.id}" class="quick-btn">Button</button>`
            );
          },
        },
      ],
      rows: sampleData1(0, 20),
      totalRecordCount: 20,
      sortable: {
        order: 'id',
        sort: 'asc',
      },
      messages: {
        pagingInfo: 'Showing {0}-{1} of {2}',
        pageSizeChangeLabel: 'Row count:',
        gotoPageLabel: 'Go to page:',
        noDataAvailable: 'No data',
      },
    });

    const doSearch = (offset, limit, order, sort) => {
      table.isLoading = true;
      table.isReSearch = offset === undefined;
      // do your search event to get newRows and new Total
      table.rows = sampleData1(0, 10); // newRows
      table.totalRecordCount = 10; // newTotal
      table.sortable.order = order;
      table.sortable.sort = sort;
    };

    const tableLoadingFinish = function loadingFinish(elements) {
      table.isLoading = false;
      Array.prototype.forEach.call(elements, function load(element) {
        if (element.classList.contains('name-btn')) {
          element.addEventListener('click', function click(this:any) {
            // do your click event
            console.log(`${this.dataset.id} name-btn click!!`);
          });
        }
        if (element.classList.contains('quick-btn')) {
          // do your click event
          element.addEventListener('click', function click(this:any) {
            console.log(`${this.dataset.id} quick-btn click!!`);
          });
        }
      });
    };

    const updateCheckedRows = (rowsKey) => {
      // do your checkbox click event
      console.log(rowsKey);
    };

    // your first loading
    doSearch(0, 10, 'id', 'asc');

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

const searchTerm = ref('')

<input v-model="searchTerm" />

// Setup Reactive data
const data = reactive([])
// Load Random data
for (let i = 0; i < 126; i++) {
    data.push({
        id: i,
        email: faker.internet.email(), // Using Faker.js
        name: faker.name.findName(),
        address: faker.address.streetAddress(),
    })
}

const searchedData = computed(() => {
    return data.filter(
        x => 
            x.email.toLowerCase().includes(searchTerm.value.toLowerCase()) || 
            x.name.toLowerCase().includes(searchTerm.value.toLowerCase())
    )
})

return {
    searchTerm,searchedData,
}

<p>
    Data: {{searchedData}}
 </p>

watch(searchedData, () => {
    table.rows = searchedData.value
        .sort(dynamicSort(table.sortable.order, table.sortable.sort))
        .slice(0, table.pageSize)
    table.totalRecordCount = searchedData.value.length
})

const dynamicSort = (property, order) => {
    let sort_order = 1
    if (order === "desc") { sort_order = -1 }
    return function (a, b){
        if (a[property] < b[property]) {
            return -1 * sort_order
        } else if (a[property] > b[property]) {
            return sort_order
        } else {
            return 0
        }
    }
}

<template>
  <div class="contentAccountsTab">
    <vue-table-lite
      :is-static-mode='false'
      :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'
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } 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();

    const table = reactive({
      isLoading: false,
      isReSearch: 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: 0,
      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 () => {
      const data: rowData[] = [];
      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.totalRecordCount = list.users.length;
    };

    /**
     * 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!!`);
          });
        }
      });
    };

    /**
     * Table search event
     */
    const doSearch = (offset: number, limit: number, order: string, sort: string) => {
      let thislimit = limit;
      table.isLoading = true;
      const RowUsers = table.rows;
      let result;
      setTimeout(() => {
        table.isReSearch = (offset === undefined);

        if (offset >= 10 || thislimit >= 20) {
          thislimit = 20;
        }
        if (order === 'id') {
          if (sort === 'asc') {
            result = RowUsers.sort((a, b) => a.id! - b.id!);
          } else {
            result = RowUsers.sort((a, b) => b.id! - a.id!);
          }
        }
        if (order === 'email') {
          if (sort === 'asc') {
            result = RowUsers.sort((a, b) => ((a.email! < b.email!) ? 1 : -1));
          } else {
            result = RowUsers.sort((a, b) => ((a.email! > b.email!) ? 1 : -1));
          }
        }
        if (order === 'role') {
          if (sort === 'asc') {
            result = RowUsers.sort((a, b) => ((a.role! < b.role!) ? 1 : -1));
          } else {
            result = RowUsers.sort((a, b) => ((a.role! > b.role!) ? 1 : -1));
          }
        }
        // table.isLoading = false;
        table.rows = result;
        table.totalRecordCount = 20;
        table.sortable.order = order;
        table.sortable.sort = sort;
      }, 600);
    };

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

    listAllUsers();

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

// async function fetchTickets() {
// let { data: tickets, error } = await client
//     .from('tickets')
//     .select('*')
// console.log("🚀 ~ file: TicketerTicketsTable.vue ~ line 8 ~ data", tickets)
// return tickets
// }

// const fetchTickets = async (offst, limit) => {
//     offst = offst + 1;
//     let { data: tickets, error } = await client
//         .from('tickets')
//         .select('*')
//     // console.log("🚀 ~ file: TicketerTicketsTable.vue ~ line 33 ~ fetchTickets ~ tickets", tickets)

//     return tickets;
// }

// fetchTickets()

// Init Your table settings
const table = reactive({
    isLoading: false,
    columns: [
        {
            label: "ID",
            field: "id",
            width: "5%",
            sortable: true,
            isKey: true,
        },
        {
            label: "Summary",
            field: "summary",
            width: "20%",
            sortable: true,
        },
        {
            label: "Status",
            field: "status",
            width: "10%",
            sortable: true,
        },
        {
            label: "Priority",
            field: "priority",
            width: "10%",
            sortable: true,
        },        
        {
            label: "Date from",
            field: "date_from",
            width: "10%",
            sortable: true,
        },       
    ],
    rows: [],
    totalRecordCount: computed(() => {
        return table.rows.length;
    }),
    // totalRecordCount: 3,
    sortable: {
        order: "id",
        sort: "asc",
    },
});

let { data: tickets, error } = await client
    .from('tickets')
    .select('*')

table.rows = tickets
// table.totalRecordCount = 

/**
   * Search Event
   */
const doSort = (offset, limit, order, sort) => {
    console.log("do sort called")
    // table.isLoading = true;
    table.isReSearch = offset == undefined ? true : false;
    // if (offset >= 10 || limit >= 20) {
    //     limit = 20;
    // }
    // if (sort == "asc") {
    //     table.rows = fetchTickets(offset, limit);
    // } else {
    //     table.rows = fetchTickets(offset, limit);
    // }
    table.rows = tickets;
    // table.totalRecordCount = 20;
    table.sortable.order = order;
    table.sortable.sort = sort;
};
// First get data
doSort(0, 10, 'id', 'asc')

// template code
 <table-lite :has-checkbox="true" :is-loading="table.isLoading" :columns="table.columns" :rows="table.rows"
            :total="table.totalRecordCount" :sortable="table.sortable" @do-search="doSort"
            @is-finished="table.isLoading = false" @return-checked-rows="updateCheckedRows" @row-clicked="rowClicked">
        </table-lite>

<template>
  <vue-table-lite
    :is-static-mode='false'
    :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-row='updateCheckedRows'
  />
</template>

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

export default {
  name: 'AccountsTab',
  setup() : unknown {
    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 display(row) {
            return (
              `<a href="#" data-id="${row.user_id}" class="name-btn">${row.name}</button>`
            );
          },
        },
        {
          label: 'Email',
          field: 'email',
          width: '15%',
          sortable: true,
        },
        {
          label: '',
          field: 'quick',
          width: '10%',
          display: function display(row) {
            return (
              `<button type="button" data-id="${row.user_id}" class="quick-btn">Button</button>`
            );
          },
        },
      ],
      rows: [
        {
          id: 1,
          name: 'TEST1'
        },
        {
          id: 2,
          name: 'TEST2'
        }
      ],
      totalRecordCount: 2,
      sortable: {
        order: 'id',
        sort: 'asc',
      },
      messages: {
        pagingInfo: 'Showing {0}-{1} of {2}',
        pageSizeChangeLabel: 'Row count:',
        gotoPageLabel: 'Go to page:',
        noDataAvailable: 'No data',
      },
    });

    const doSearch = (offset, limit, order, sort) => {
      table.isLoading = true;
      table.isReSearch = offset === undefined;
      // do your search event to get newRows and new Total
      table.rows = newRows;
      table.totalRecordCount = newTotal;
      table.sortable.order = order;
      table.sortable.sort = sort;
    };

    const tableLoadingFinish = (elements) => {
      table.isLoading = false;
      Array.prototype.forEach.call(elements, function load(element) {
        if (element.classList.contains('name-btn')) {
          element.addEventListener('click', function click() {
            // do your click event
            console.log(`${this.dataset.id} name-btn click!!`);
          });
        }
        if (element.classList.contains('quick-btn')) {
          // do your click event
          element.addEventListener('click', function click() {
            console.log(`${this.dataset.id} quick-btn click!!`);
          });
        }
      });
    };

    const updateCheckedRows = (rowsKey) => {
      // do your checkbox click event
      console.log(rowsKey);
    };
    return (
      {
        accountsList,
        table,
        doSearch,
        tableLoadingFinish,
        updateCheckedRows,
      });
  }
};
</script>

<style>    
</style>

<table-list :row="..." ...>
   <table-column field="name">
         <router-link ...>{{columnValue}}</router-link> 
   </table>-column>
</table-list>

let columns = [
  {
     field:'name',
    label: 'Name',
    template: ' <router-link>{{value}}</router-link>' 
  }
]

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

<tr
       @click="$emit('selected', row)"
        v-for="(row, i) in rows"
        :key="i"
        class="vtl-tbody-tr"
        :class="typeof rowClasses === 'function' ? rowClasses(row) : rowClasses"
>