Is it possible to add 'return clearChecked' if 'hasCheckbox'? about vue3-table-lite

[linmasahiro]

@yuriymarad I am added clearChecked to return. So, you can call the component's method on v1.3.6

[linmasahiro]

Hi, @yuriymarad
Can you give me more details?
Because checked always be auto clear after page changed.
I am trie below code to custom pagination to change pages and it's auto clear

<template>
  <select v-model="table.page">
    <option :value="1">1</option>
    <option :value="2">2</option>
  </select>
  <table-lite
    :hasCheckbox="true"
    :is-loading="table.isLoading"
    :columns="table.columns"
    :rows="table.rows"
    :total="table.totalRecordCount"
    :sortable="table.sortable"
    :messages="table.messages"
    :page="table.page"
    @do-search="doSearch"
    @is-finished="table.isLoading = false"
    @return-checked-rows="getCheckedRows"
  ></table-lite>
</template>

<script>
import { defineComponent, reactive } from "vue";
import TableLite from "vue3-table-lite";

// Fake Data for 'asc' sortable
const sampleData1 = (offst, limit) => {
  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;
};

// Fake Data for 'desc' sortable
const sampleData2 = (offst, limit) => {
  let data = [];
  for (let i = limit; i > offst; i--) {
    data.push({
      id: i,
      name: "TEST" + i,
      email: "test" + i + "@example.com",
    });
  }
  return data;
};

export default defineComponent({
  name: "App",
  components: { TableLite },
  setup() {
    // Table config
    const table = reactive({
      isLoading: false,
      columns: [
        {
          label: "ID",
          field: "id",
          width: "3%",
          sortable: true,
          isKey: true,
        },
        {
          label: "Name",
          field: "name",
          width: "10%",
          sortable: true,
        },
        {
          label: "Email",
          field: "email",
          width: "15%",
          sortable: true,
        },
      ],
      rows: [],
      totalRecordCount: 0,
      sortable: {
        order: "id",
        sort: "asc",
      },
      page: 1,
    });

    /**
     * Search Event
     */
    const doSearch = (offset, limit, order, sort) => {
      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);
    };

    // First get data
    doSearch(0, 10, "id", "asc");

    const getCheckedRows = (rowsKey) => {
      console.log(rowsKey);
    };

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

[yuriymarad]

Hi @linmasahiro , thanks for the answer.
Well in our case we do not use :page="table.page" that will trigger watcher and set isChecked.value = [].
Pagination is completely custom and we are re-populating table with new set of data from request to backend when page is changed (in your component the page itself does not change).
In this specific case checkboxes are not unticked.

I'm wondering if it makes sense to do so (I mean add 'return clearChecked') in this case, as it's likely not what you intended for your component to do.
Nevertheless, I don't see any harm in having the ability to clear checkboxes.

[linmasahiro]

Hi, @yuriymarad
OK, I will be add it on next version, but please let me confirm again.
You mean you want an event to clear all checked, not return all checked state after clear, right?

[yuriymarad]

@linmasahiro thanks a lot!
To clear. I believe it would be good to clear and emit "all checked" state, identical that you have now:

const clearChecked = () => {
      isChecked.value = [];
      rowCheckbox.value.forEach((val) => {
        if (val && val.checked) {
          val.checked = false;
        }
      });
      emit("return-checked-rows", isChecked.value);
    };

[yuriymarad]

@linmasahiro thanks a lot! It looks perfect :)