Can I use custom select inside of the table?

[lavezzi1]

• Vue.js version: 1.0.28
• consumed using: webpack

Hello. Thanks for the great component!

I need to know, can I use custom select component like (https://josephuspaye.github.io/Keen-UI/#/ui-select-docs) in the table?

My case: I have a lot if items, each item has unique id. So, I need to put the select with options like 'View', 'Edit', 'Delete' and so on. So data for this dropdown should looks like this:

dataDropdown: [
    {
        id: item.id,
        text: 'Edit',
        url: '/item/id/edit'
    },
    {
        id: item.id,
        text: 'Delete',
        url: '/item/id/delete'
    }
];

Is it possible? Thanks!

[matfish2]

Do you mean as a filter, or as a custom column?

[lavezzi1]

Please take a look at this example:

But instead of this default select I want to use custom dropdown like this https://josephuspaye.github.io/Keen-UI/#/ui-select-docs

So when I click on view or edit I'll go to the specific page.

dataDropdown: [
    {
        id: item.id,
        text: 'Edit',
        url: '/item/id/edit'
    },
    {
        id: item.id,
        text: 'Delete',
        url: '/item/id/delete'
    }
];

[matfish2]

You can use anything you want using the templates option and setting compileTemplates to true.

[lavezzi1]

Yeah, but:

import Icon from '../components/icon';
var VueTables = require('vue-tables');
Vue.use(VueTables.client, {
    compileTemplates: true
});

        columns:['id','name','age', 'more'],
        tableData: [
            ...
        ],
        options: {
            templates: {
                more:'<icon icon="keyboard_arrow_down"></icon>'
            }
        }

Got error:

Unknown custom element: <icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Yes, I registered it too, and it has a name. Forks fine on the page but not inside of table.

[matfish2]

Duplicate of #41

[lavezzi1]

@matfish2 I am doing multiple page app, so each page has enry point (main.js) so it means that I can not register my component globally right? I already tried that and it still doesn't work.

[matfish2]

Why not? Simply declare

Vue.component('icon', Icon)

whenever you want to use the component. Did you do that and still got the unregistered error?

[lavezzi1]

@matfish2 Oh my mistake, yes it works. Now seems like it can't access the data, <menu :options="arrayOptions"></menu I did this and then pass the array with options in data. But it displays an empty menu. Whats wrong?

[lavezzi1]

Outside of the table works fine.

[matfish2]

Again, a scoping issue. You need to use $parent. This is explicitly stated in the docs for compileTemplates.

[lavezzi1]

@matfish2 Thanks. Can I use search outside of the table component? I didn't find anything about that in docs.

[matfish2]

Yes. Use customFilters

[lavezzi1]

@matfish2 Please help. My template looks like this:

img: '<div class="image-status" :class="{ \'image-status--active\' : {active} }"><img class="image-status__icon" src="{url}" alt="{alt}"></div>',

url and alt works. But {active} doesn't. What I do wrong? Got error:

[Vue warn]: Invalid expression. Generated function body:  {'image-status--active':{scope.active}}

And is it possible to write data like this: For example I got column called imageStatus

imageStatus: {
    url: 'https:/site.com/image.png',
    alt: 'alt',
    active: true
}

and then in component:

img: '<div class="image-status" :class="{ \'image-status--active\' : {imageStatus.active} }"><img class="image-status__icon" src="{imageStatus.url}" alt="{imageStatus.alt}"></div>',

And if I do this

:options="[{text:\'View\', url:\'/image/{id}/view\'}]"

{id} I dont see actual id in url, only href="/image/{id}/view". But it works if I use {id} in plain html link, not in array.

Thank you.

[matfish2]

For complex templates use a function instead of a string (String templates are actually deprecated and about to be removed). See the templates option documentation, and the templates on the live demo.

Something like:

{
   img: function(row) {

      let activeClass = row.active?'image-status--active':'';

       return `<div class="image-status ${activeClass}">
                     <img class="image-status__icon" 
                              src="${row.src}" 
                              alt="${row.alt}">
                    </div>`;
   }
}

Inside the function you will also have access to a this context referring to the root instance.