How to load Vue components into :rows of a table

Question

I have a table listing my todos. In the last column, I have a button to mark the todo as finished. Because I'd like to reuse this button in other tables and views, I've added it as a component that is being imported.

Furthermore, I'd like to use a table package such as vue3-table-lite so that I can have quick and easy access to 1) filtering, 2) pagination, and 3) sorting features.

These packages typically uses :rows, which is pretty straightforward if you only have text. However, I don't know how to provide Vue components, in this case <FinishedButton /> from the last <td> shown in the last code block below.

How can I import Vue components into :rows of a table? Alternatively achieve filtering, pagination, and sorting without having to use :rows at all.

Here's how the button component is constructed:

<template>
    <a v-show="todo.is_finishable" v-on:click="markFinished(todo.id)"
        class="todo_finished btn btn-sm btn-light btn-light-border finalized_button">Finished</a>
</template>

<script>
    export default {
        name: 'FinishedButton',
        props: ['todo',],

        methods: {
            remove: function () {
                this.$emit("delete", this.todo);
            },

            markFinished: function (selected_todo_id) {
                this.$http.patch('/api/todo/' + selected_todo_id + "/", {
                        status: 'Done'
                    })
                    .then(response => {
                        console.log(response);
                        this.remove();
                    })
                    .catch(e => {
                        console.log(e);
                    });

            }

        },
    };
</script>

Here's how a simplified version of the table looks like (there's more columns in the actual table):

<table id="FOO" class="table table-hover table-sm">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Action</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="todo in todos" :key="todo.id">
        <td>{{ todo.name }}</td>
        <td><FinishedButton :todo=todo /></td>
      </tr>
    </tbody>
  </table>

Is it only the button that you are having issues displaying? — Tim
– Tim, Commented Oct 27, 2022 at 16:14
@Tim in this simplified example, yes. However, I’m trying to create many tables with various buttons and so I would appreciate the general approach to add HTML content in tables with the functionality described above. — Christian
– Christian, Commented Oct 27, 2022 at 17:07

Nikola Gava · Accepted Answer · 2022-10-27 18:44:47Z

While I'm not familiar with that particular library, its documentation states that if you want to use custom rendering of rows (columns?) you should use v-slot mode.

What is a v-slot? To get the basics, you should probably get familiar with Vue v-slot documentation first. It is an excellent resource to get started. But tldr, slots are a way of leaving "boxes" in your child components for "stuff" to be rendered into them from the parent component. Like props, but for template content.

Why are they useful? Well, if you're making a library that many people use, or if you reuse your components a lot throughout your app, you may find it useful to leave the "looks" to the parent component implementation. You can also have default looks set.

Within slots, there is a concept of scoped slots, that solves a problem where a parent component needs to access the data from the child component. Scoped slots are props for your slot outlets.

Now, back to the problem at hand. While it is not the same library, Vuetify has a table component as well, with slots that represent the whole row, or a particular column. Namely, item and item.column-name slots respectively.

An example of rendering a custom column would look something like this

<template v-slot:item.column="{ item }">
    <MyCustomComponent :data="item" />
</template>

But I leave a proper showcase of this to Vuetify documentation.

For your use case, you might need to take over the rendering of the entire row if you want to have a custom rendered column.

Resources:

Tim · Accepted Answer · 2022-10-27 19:01:44Z

1

No problem! This has to do with the way Vue parses the DOM. In order to avoid confusion with native HTML vs custom components. You need to tell Vue that your dynamic component may be used in this native table using the 'is' special attribute.

<td is="vue:finished-button" :todo="todo"></td>

Note that you must use kebab-case as shown because HTML tag names are case-insensitive. You do not need to rename your component as Vue automatically handles this behind the scenes.

answered Oct 27, 2022 at 19:01

Tim

4012 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to load Vue components into :rows of a table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related