Creating a custom component Vue3js

Question

I downloaded the DataTable component vue3-easy-data-table. Then I created a custom component where I define the theme for the table. Since the easy-data-table uses slots to operate on the table items, how can I redirect my template tags to the table instead of my custom component?

<script>

export default {
    setup() {
        const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');

        return { themeColor }
    }
}
</script>

<template>
    <DataTable table-class-name="table-theme" :theme-color="themeColor" alternating>

        <template #expand="item">
            <slot name="expand" v-bind="item"></slot>
        </template>
    </DataTable>
</template>

<style lang="scss" scoped>
.table-theme {
    width: 100%;
    height: 100%;

    overflow: hidden;
}
</style>

This is my custom component. At the moment I manually created a copy template for the expand function and it works alright, but not only it looks ugly and redundant, it also won't work to access specific items. Do you have a solution?

alessandromanzini · Accepted Answer · 2023-02-01 14:23:58Z

2

I found a solution. The slots object that you get in your setup function will contain the "parent requested slot" even if they are not defined in the template.

Therefore you can easily pass the slots names to the template, iterate through them and automatically generate the needed slots.

<script>

export default {
    setup(props, { slots }) {
        const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');

        const slotNames = Object.keys(slots)

        return { themeColor, slotNames }
    }
}
</script>

<template>
    <DataTable table-class-name="table-theme" :theme-color="themeColor" alternating>
        <template v-slot:[slot]="model" v-for="slot in slotNames">
            <slot :name="slot" v-bind="model"></slot>
        </template>
    </DataTable>
</template>

answered Feb 1, 2023 at 14:23

alessandromanzini

1418 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tolbxela · Accepted Answer · 2023-01-31 23:34:32Z

You don't really need to wrap the table with a custom component.

But unfortunately the vue3-easy-data-table does not update with changing the themeColor.

So, the quick and dirty solution is to force the table recreate, by destroying it using v-if.

Here is the playground (check it in the full page)

const App = {
    components: {
      EasyDataTable: window['vue3-easy-data-table'],
    },
    data () {
      return {
        themeColor: "#f48225",
        headers:[
          { text: "Name", value: "name" },
          { text: "Age", value: "age", sortable: true }
        ],
        items: [
          { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
          { "name": "James", "height": 180, "weight": 75, "age": 21 },
          { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
        ],
      }
    },
    methods: {
      resetTable() {
        this.themeColor = null;
      }
    }
  };
  Vue.createApp(App).mount('#app');

<div id="app">
  Theme Color: {{themeColor}}<br /><br />
 <input type="radio" v-model="themeColor" value="#f48225" @input="resetTable"/> #f48225 
 <input type="radio" v-model="themeColor" value="#123456" @input="resetTable" /> #123456 <br /><br />
  <easy-data-table v-if="themeColor != null"
    :headers="headers"
    :items="items"
    :theme-color="themeColor"
    buttons-pagination
    alternating
  />
</div>
<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table"></script>

Hey, thanks for the response. The idea of a custom component is to reuse the table without the need of restyling it. I can also code some behaviour that will automatically be shared across all implementations.

Collectives™ on Stack Overflow

Creating a custom component Vue3js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related