bhaveshpatel200 / vue3-datatable

vue3-datatable is a powerful component for creating dynamic and customizable data tables. It supports large amounts of data, sorting, pagination, and filtering and highly customizable
MIT License
100 stars 11 forks source link

vue3 datatable slot loop template of rows ? #40

Closed bombkiml closed 2 weeks ago

bombkiml commented 3 weeks ago
<template>

  <vue3-datatable :rows="rows" :columns="cols">

      <!-- 

      Please let me know ?, Can i loop template tag with v-for ?

      Example :

      <template v-for="c in 10" #code="data">
        X0{{ c }}
      </template>

      -->

  </vue3-datatable>

<template>
<script setup>
    import { ref } from "vue";
    import Vue3Datatable from "@bhplugin/vue3-datatable";
    import "@bhplugin/vue3-datatable/dist/style.css";

    const cols = ref([
      { field: "id", title: "ID", width: "90px", filter: false },
      { field: "code", title: "X Code" },
      { field: "name", title: "Name" },
      { field: "username", title: "Username" },
      { field: "email", title: "Email" },
    ]);

    const rows = ref([
      {
         id: 1,
        code: 'X01',
         name: "Leanne Graham",
         username: "Bret",
         email: "Sincere@april.biz",
       },
       {
         id: 2,
        code: 'X02',
         name: "John Doe",
         username: "John",
         email: "John@april.biz",
       },
     ]);

</scriptt>
bhaveshpatel200 commented 2 weeks ago

Hi bombkiml,

Yes, you can do anything inside slots.