Is it possible to add custom filters to specific columns? about vue3-table-lite

[linmasahiro]

Hi @KristianTyskyi

Of cause yes. I created an example for you, you can check it

Template:

<template>
  <table-lite
    ...
    @VnodeMounted="initTable".      <---- add it
  ></table-lite>
</template>

Script:

export default defineComponent({
  name: "App",
  components: { TableLite },
  setup() {

     ......

    /**
     * Trigger after initail component
     */
    const initTable = ({ el: tableComponent }) => {
      let headerTr = tableComponent.getElementsByClassName("vtl-thead-tr");
      if (! headerTr[0]) {
        return;
      }
      let cloneTr = headerTr[0].cloneNode(true); // Clone first <tr>
      let childTh = cloneTr.getElementsByClassName("vtl-thead-th");
      for(let i = 0; i < childTh.length; i++) {
        // Clear <th>'s HTML
        childTh[i].innerHTML = "";
      }

      // Create a input element and append to first <th>
      createApp(
        defineComponent({
          setup() {
            return () =>
              h("input", {
                value: searchTerm.value,
                onInput: (e) => {
                  searchTerm.value = e.target.value;
                },
              });
          },
        })
      ).mount(childTh[0]);

      // append cloned element to the header after first <tr>
      headerTr[0].after(cloneTr)
    };

    return {
      searchTerm,
      table,
      initTable,
    };
  }
});

[linmasahiro]

Hi, @KristianTyskyi
do you solve this problem? I am close this issue. If any questions, reopen it. thx.