<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

<script>

  import { ref } from "vue";

  import { MDBDatatable, MDBInput } from "mdb-vue-ui-kit";

  export default {

    components: {

      MDBDatatable, MDBInput

    },

    setup() {

      const search3 = ref("");

      const dataset10 = {

        columns: [

          { label: "Name", field: "name" },

          { label: "Position", field: "position" },

          { label: "Office", field: "office" },

          { label: "Contact", field: "contact", sort: false }

        ],

        rows: [

          {

            name: "Tiger Nixon",

            position: "System Architect",

            office: "Edinburgh",

            phone: "+48000000000",

            email: "tiger.nixon@gmail.com"

          },

          {

            name: "Sonya Frost",

            position: "Software Engineer",

            office: "Edinburgh",

            phone: "+53456123456",

            email: "sfrost@gmail.com"

          },

          {

            name: "Tatyana Fitzpatrick",

            position: "Regional Director",

            office: "London",

            phone: "+42123432456",

            email: "tfitz@gmail.com"

          }

        ].map((row,id) => {

          return {

            ...row,

            contact: `

               <div class="add-icon">data-row-${id}</div>`

          };

        })

      };

      const iconsTemplate=`<button class="message-btn btn ms-2 btn-primary btn-floating btn-sm"><i class="fa fa-envelope"></i> </button>`

​

      const addIcons = () => {

        document.querySelectorAll(".add-icon").forEach(item=>{

          const currentHTML = item.innerHTML

          if (currentHTML.includes(iconsTemplate)) return

          item.innerHTML = `${iconsTemplate} ${currentHTML}`

        })

      }

      return {

        dataset10, search3, addIcons

      };

    }

  };

</script>