Probably via prop of the plain-text or some other prop of the Smart Table.

The guiding principle should be maximum customizability but with the costraint of using one of the already used ways for customization. No new information sohuld be required to learn how to do a call.

The first thing to do should be to have a list of the most common ways to call a RESTful interface and verify that is a one-liner with at least 80% of them.

Hi,

Great implementation. Question - any plans for vue 2.* support?

A workaround for now is always register the component globally ($root)

A possible solution could be to traverse the tree starting from the root.

This:

https://jsfiddle.net/gurghet/736auoa1/

should work

Hello Andrea!

I wanna use dropdown component (like this for example https://github.com/JosephusPaye/Keen-UI/blob/master/src/UiMenu.vue it gets an array for options) inside of the table for each entry. And option might be 'View', 'Delete' etc. Its works fine when you need just static option, but in my case I need unique id for each entry in the table.

<smart-table
    body="dataTable"
    >
   <ui-menu :list="$parent.dataTable.dropdown"></ui-menu>
  </smart-table>

        var dataTable = [
                {
                    img: '',
                    name: '',
                    region: '',
                    dropdown: [
                        {
                            id: '',
                            text: '',
                            url: ''
                        }
                    ]
                },
            {% endfor %}
        ];

So it doesn't works. Only works if I type something like <ui-menu :list="$parent.dataTable[0].dropdown"></ui-menu> but of course it isn't solution because the id will the same for all entries. But I want to itterate them.

Please, provide some example of can I do that maybe with another dropdown component or even with basic select. Thanks you so much!

Issue found in #2

Problem

Columns in spaces are interpreted like separate classes

Solution

Pre-process column names to convert spaces to dashes -

Hi, I want to support IE11 but it seems like this component doesn't. I got this error in the console of IE11

Object doesn't support property or method 'find'

var row = father.processedSmartBody.find(byId(id));

I didn't find a solution. If you know how to fix it, share please.

Hello, @gurghet thanks for the plugin.

I just want to know how to create a search box for table, something like this http://vuejs.org/examples/grid-component.html

Thanks!

I test my pages which contain smart-table component and I found that they doesn't display in Safari (last version) and Firefox. One error display in console of the browsers

TypeError: CSS.escape is not a function. (In 'CSS.escape(col)', 'CSS.escape' is undefined)

I wanted to see how pagination works but found that demo doesn't work.
https://jsfiddle.net/gurghet/xpp80yx0/2/

I use webpack and vue-cli to init my project, then install packages,and npm run dev,but,it has two mistakes,I don not understand.

<smart-table
    :auto-load="true"
    body-path="results"
    id-col="id.value"
    endpoint="http://api.randomuser.me/?results=20"
    :order-by="['name.first', 'name.last']"

    ></smart-table>

Getting this stacktrace when using any value in endpoint. Above snippet is copy pasted from readme.

Uncaught TypeError: Cannot read property 'get' of undefined
refresh @ SmartTable.vue?c608:409
(anonymous function) @ vue.common.js?e881:216
compiled @ SmartTable.vue?c608:345
Vue._callHook @ vue.common.js?e881:8235
Vue._compile @ vue.common.js?e881:8628
Vue.$mount @ vue.common.js?e881:9446
Vue._init @ vue.common.js?e881:2468
Vue._init @ vue-router.js?e71f:1756
SmartTable @ VM47638:2

Using Vue 1.0.26, installed SmartTable with NPM and using webpack.

Is this component incompatible with Vue2?

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-489a263a!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-smart-table/src/components/SmartTable.vue
template syntax error class="col-{{col.key}} col-cell {{canOrderBy(col.key) ? 'ord' : ''}} {{orderClass(col.key)}}":
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-3e309329!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-smart-table/src/components/PlainText.vue
template syntax error - invalid expression: {{{processedText}}}

As demonstrated by the following jsfiddle
https://jsfiddle.net/gurghet/424926uf/

it appears that the dash split the column in two.

The dependency for making http requests or something hasn't installed when I called meteor npm install, but now it's complaining that I also don't have handler for babel tag.

The name suggest immutability which it isn't

When the body changes the pBody is updated but this doesn't trigger the re-application of filters and there is a chance that this has to be done for ordering to.

The solution is to trigger filtering and ordering before rendering the table.

The workaround, for now, is to use valid attribute names.

Hi Andrea,

How to create a pagination if I get data from array? No ajax or jSON.

Hello @gurghet!

I have a component (show-menu) which I put in <smart-table>. And menu component inside of show-menu component.

show-menu component html:

<menu :options="menuOptions"></menu>

show-menu component js:

    props: {
        menuOptions: {
            type: Array,
            required: true,
            default() {
                return [];
            }
        }    
    },

use smart-table on the page:

<smart-table
    :body="body"
    :order-by="['first', 'second', 'third']"
    >
    <show-menu :menu-options="menuOptions" col="third"></show-menu>
</smart-table>

inside of script tag:
var menuOptions = [
    {
        id: 'test',
        text: 'test'
    }, {
        id: 'test1',
        text: 'test1'
    }
];

and in js file of the page:
data: {
    menuOptions: menuOptions
}

It doesnt works. No error, just empty menu list. But it works perfect outside of smart-table, for example if I move this line of code outside of smart-table:

<show-menu :menu-options="menuOptions" col="third"></show-menu>

What I do wrong?

As soon as i try to require it, i get this:

Browserify Failed!: Unexpected token

/public/node_modules/vue-smart-table/src/components/SmartTable.vue:1
<template>
^
ParseError: Unexpected token

When I try to run the Hello World example from the readme file, I get this error in the console:

[Vue warn]: class="col-{{col.key}} col-cell {{canOrderBy(col.key) ? 'ord' : ''}} {{orderClass(col.key)}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.

My package.json has:

"vue": "^2.0.5",
"vue-router": "^2.0.1",
"vue-smart-table": "^2.6.0-beta5"

Any ideas on how to avoid this error and run the Hello World example? Thanks.

Sometimes you have more than one Smart Table. We should add an optional field in the filter event message that specifies that the table to be filtered to have some id. The v-ref could be used for this purpose.