Custom cell content about vue3-table-lite

[linmasahiro]

@bolerio
I add new feature to support v-slot, maybe can solve your problem. check #15 please.
And I will be close this issue. If you any question, reopen.

[linmasahiro]

Hi, @bolerio
Sorry, not support template yet.
But if you want to use "vue-router", you can code like this. It's work.

table column:

        {
          label: "Name",
          field: "name",
          display: function (row) {
            return (
              '<a href="#" data-link="' + row.link + '" class="is-rows-el route-link">' + row.name + '</a>'
            );
          },
        },

finished event:

    const tableLoadingFinish = (elements) => {
      table.isLoading = false;
      Array.prototype.forEach.call(elements, function (element) {
        if (element.classList.contains("route-link")) {
          element.addEventListener("click", function () {
            // router is your vue-router object
            router.push(this.dataset.link)
          });
        }
      });
    };

[arwinvdv]

Hi, I just made a very simple table where you can use slots.
Maybe someone can this combine with vue3-table-lite.

[WordpressArtist]

@linmasahiro How to pass methods inside column display ??? its not working

display: function (row) {
return (
'<span class="pointer" @click="editThis(row)" class="t-color">Edit | Delete'
);
},

[linmasahiro]

@linmasahiro How to pass methods inside column display ??? its not working

display: function (row) {
return (
'<span class="pointer" @click="editThis(row)" class="t-color">Edit | Delete'
);
},

Hi, @WordpressArtist , Try change row display func to

// Point: Added 「is-rows-el」and 「edit-btn」class.
// Important:  If you need action any tag. 「is-rows-el」is require.
display: function (row) {
  return '<span class="is-rows-el edit-btn pointer t-color" data-row="' + JSON.stringify(row).replace(/"/g, '&quot;') + '">Edit | Delete</span>';
},

and Fix your 「tableLoadingFinish」event to like this

    const tableLoadingFinish = (elements) => {
      table.isLoading = false;
      Array.prototype.forEach.call(elements, function (element) {
        if (element.classList.contains("edit-btn")) {
          element.addEventListener("click", function () {
            editThis(JSON.parse(this.dataset.row));
          });
        }
      });
    };

This is work, but I don't recommend. I always pass require value only. Like this

display: function (row) {
  return '<span class="is-rows-el edit-btn pointer t-color" data-id="' + row.id + '">Edit | Delete</span>';
},

    const tableLoadingFinish = (elements) => {
      table.isLoading = false;
      Array.prototype.forEach.call(elements, function (element) {
        if (element.classList.contains("edit-btn")) {
          element.addEventListener("click", function () {
            editThis(this.dataset.id);
          });
        }
      });
    };

Hope help you.