Vue-good-table: Custom row templates don't work in IE

[arivera12]

This plugin doesnt work on IE11.
I added the polyfills for includes and entries to fix this and still doesn't work.
Take a look of these threads in stackoverflow.

Link Includes
Link Entries

Any solution for this?

[arivera12]

I think that these polyfills aren't working maybe cause the object's type are not set correctly. The method includes is on a string context and the method entries is on an object's context. Does this makes any sense or I am wrong?

[arivera12]

I was wrong with the polyfills I where using after reading the code.
The polyfills needed are based on Arrays rather than string or object so I added this polyfills and now the errors has gone but data isn't being displayed correctly.
This is how it should work (google chrome screenshot)

This is how is working on (IE11 screenshot)

Why this isn't working yet on IE11? I need this very rush please help :cry:

Here is the source of the polyfills of includes and entries I am using:

if (!Array.prototype.includes) {
    Object.defineProperty(Array.prototype, 'includes', {
        value: function (searchElement, fromIndex) {

            if (this == null) {
                throw new TypeError('"this" is null or not defined');
            }

            // 1. Let O be ? ToObject(this value).
            var o = Object(this);

            // 2. Let len be ? ToLength(? Get(O, "length")).
            var len = o.length >>> 0;

            // 3. If len is 0, return false.
            if (len === 0) {
                return false;
            }

            // 4. Let n be ? ToInteger(fromIndex).
            //    (If fromIndex is undefined, this step produces the value 0.)
            var n = fromIndex | 0;

            // 5. If n ≥ 0, then
            //  a. Let k be n.
            // 6. Else n < 0,
            //  a. Let k be len + n.
            //  b. If k < 0, let k be 0.
            var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

            function sameValueZero(x, y) {
                return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
            }

            // 7. Repeat, while k < len
            while (k < len) {
                // a. Let elementK be the result of ? Get(O, ! ToString(k)).
                // b. If SameValueZero(searchElement, elementK) is true, return true.
                if (sameValueZero(o[k], searchElement)) {
                    return true;
                }
                // c. Increase k by 1. 
                k++;
            }

            // 8. Return false
            return false;
        }
    });
};

(function (exports) {
    'use strict';

    function ToObject(val) {
        if (val === null || val === undefined) {
            throw new TypeError('can\'t convert ' + val + ' to object');
        }

        return Object(val);
    }

    function AssertProperty(obj, key) {
        if (!obj.hasOwnProperty(key)) {
            throw new TypeError('ArrayIterator next called on incompatible ' + String(obj));
        }
    }

    function NonEnumerable(obj) {
        Object.keys(obj).forEach(function (key) {
            Object.defineProperty(obj, key, {
                enumerable: false
            });
        });
        return obj;
    }


    function ArrayIterator(obj) {
        this.iteratedObject = ToObject(obj);
        this.index = 0;
        this.kind = 'key+value';
    }

    ArrayIterator.prototype.next = function next() {
        var self, object, index, kind;

        self = ToObject(this);
        AssertProperty(self, 'iteratedObject');
        AssertProperty(self, 'index');
        AssertProperty(self, 'kind');

        if (self.iteratedObject === undefined) {
            return { value: undefined, done: true };
        }

        object = self.iteratedObject;
        index = self.index;
        kind = self.kind;

        if (index >= (object.length || 0)) {
            self.iteratedObject = undefined;
            return { value: undefined, done: true };
        }

        self.index += 1;

        if (kind === 'key') {
            return { value: index, done: false };
        }

        if (kind === 'value') {
            return { value: object[index], done: false };
        }

        if (kind === 'key+value') {
            return { value: [index, object[index]], done: false };
        }

        throw new TypeError('Invalid ArrayIterationKind');
    };


    if (typeof Array.prototype.entries !== 'function') {
        Array.prototype.entries = function entries() {
            return NonEnumerable(new ArrayIterator(this));
        };
    }

    exports.arrayEntries = Function.prototype.call.bind(Array.prototype.entries);

}(typeof exports !== 'undefined' ? exports : this));

[arivera12]

This is the template I am using for this

<vue-good-table title="Areas de Necesidades o Adiestramientos"
                            :columns="[
                            { label:'Área Necesidad o Adiestramiento' },
                            { label:'Acciones'}
                            ]"
                            :rows="rows"
                            :paginate="true"
                            :line-numbers="true"
                            style-class="table table-bordered table-striped condensed">
                <template slot="table-row" slot-scope="props">
                    <td v-text="props.row.NeedAreaOrTrainingDescription"></td>
                    <td>
                        <button class="btn btn-default btn-xs" v-on:click="view(props.row.NeedAreaOrTrainingID, $event)"><i class="fa fa-eye"></i></button>
                        <button class="btn btn-primary btn-xs" v-on:click="edit(props.row.NeedAreaOrTrainingID, $event)"><i class="fa fa-edit"></i></button>
                        <button class="btn btn-danger btn-xs" v-on:click="del(props.row.NeedAreaOrTrainingID, $event, props.index)"><i class="fa fa-remove"></i></button>
                    </td>
                </template>
            </vue-good-table>

[arivera12]

Digging more deeper into this I found 2 things on this on IE11.

If I change this
<td v-text="props.row.NeedAreaOrTrainingDescription"></td>
into this
<td>{{ props.row.NeedAreaOrTrainingDescription }}</td>

The props data gets rendered correctly.

So vuejs directives like v-text and v-html aren't working as expected on slots on IE11.

The second thing is that I found that props aren't being inserted in the elements.

Please take a look of this screenshot in IE11.

There is no <td> element inside the <tr> element.

I don't know if there anyone facing this problem as me but anyone who gets into any version of IE maybe fall in the error as me.

I have been 2 days trying to fix this but still can't find any solution.

Please help @xaksis :cry:

[xaksis]

@arivera12 sorry Ive been sick last few days. This is happening because IE doesn't allow tag inside tables: https://github.com/vuejs/vue/issues/3028
I will need to write up a fix for this later today. I apologize for the inconvenience.

[arivera12]

@xaksis I have been sick too these days :cry: there is something in the air that everyone is getting sick I got my kids and my brother sick too.
I hope you get well soon!
In the meantime this plugin isn't working with any IE version since.
I have test it on IE9, IE10, IE11.
I looked at the referenced issue you added to this thread and I went over it yesterday I knew after various test that this was a bug cause I couldn't fix it in any way.
I tried to edit span tag for td tag but still does't work.
I was looking at the source code I think the error is on these lines over here.

[arivera12]

I think you should state that for using this plugin with IE include the 2 polyfills I added here so this plugin can work on IE for other users of this plugin.

[arivera12]

@xaksis any update on this?

[xaksis]

@arivera12 i was able to solve it by adding babel-polyfill to my projects. Just install babel-polyfill
npm i --save-dev babel-polyfill
then, if you're using webpack build for your vue project, add babel-polyfill to your webpack.base.config:

entry: {
    app: [
      'babel-polyfill',
      './src/main.js'
    ]
},

(don't forget to remove the earlier polyfills that you added, babel takes care of all those)
closing.

[arivera12]

@xaksis Babel-polyfill at least makes the table render but not to render correctly on IE.

IE still doesn't render correctly take a look:

IE doesn't put <td> inside<tr> as specified and expected on the template slot

Please reopen this issue is not resolved, IE doesn't work yet. Did you really test this on IE?

[arivera12]

v-text and v-html directives aren't even working on the template scope they just render blank on IE.

[xaksis]

@arivera12 can you try https://xaksis.github.io/vue-good-demos/#/dynamic-table on your browser and paste a screenshot here?

[arivera12]

The demo site works as expected. The problem that I have is that on my project this doesn't render correctly. I updated vuejs, this plugin and still doesn't work.
I will share my code here so if u can see anything is wrong with it cause I don't see anything wrong with this.

<vue-good-table title="Areas de Necesidades o Adiestramientos"
                            :columns="[
                            { label:'Área Necesidad o Adiestramiento' },
                            { label:'Acciones' }
                            ]"
                            :rows="rows"
                            :paginate="true"
                            :line-numbers="true"
                            style-class="table table-bordered table-striped condensed">
                <template slot="table-row" slot-scope="props">
                    <td v-text="props.row.NeedAreaOrTrainingDescription"></td>
                    <td>
                        <button class="btn btn-default btn-xs" v-on:click="view(props.row.NeedAreaOrTrainingID, $event)"><i class="fa fa-eye"></i></button>
                        <button class="btn btn-primary btn-xs" v-on:click="edit(props.row.NeedAreaOrTrainingID, $event)"><i class="fa fa-edit"></i></button>
                        <button class="btn btn-danger btn-xs" v-on:click="del(props.row.NeedAreaOrTrainingID, $event, props.index)"><i class="fa fa-remove"></i></button>
                    </td>
                </template>
            </vue-good-table>

The <td> element never gets rendered and both cells are inside the <tr>.

This is what it gets rendered using this code.

This is what is inside the table row

I saw for a moment that your example uses the mustache tag for example {{ props.row.NeedAreaOrTrainingDescription }} and at least data gets displayed but still gets rendered out of the <td>.

using v-text works on chrome and other browsers without any problems but it seems that IE doesn't understand the v-text directive don't know what is wrong with this on IE.

@xaksis is there anything wrong with my source?

[arivera12]

Can you share vue-good-table code that is being used on the demo to see what's difference with my source? Thanks.

[xaksis]

@arivera12 if you weren't able to fix your build... try updating to v1.18.2 I have added the polyfills to the built plugin so hopefully you don't need to do anything else.

the source to vue-good-demo is available on github: https://github.com/xaksis/vue-good-demos

[leonardochen30]

Hi bro, i really need your help. i just create a new project with command npm install --global vue-cli and them vue init webpack my-project, them import the plugin and works great, but when a test it on IE10 it din't work. just launch a syntax error.
is not necessary create a component that use the tables, just import it and the error appear. Please help mem IE10 is the minimun browser that i need support. I read about es6 transpile, but google it and nothing found.

[arivera12]

@leonardochen30 Use latest version of vue-good-table. I am still having the same rendering issue on the tables on IE which td elements doesn't gets render. Please let me know if you have the same problem as me so we can reopen this thread.

[leonardochen30]

Hi, i use the last version of vue-good-table yesterday with npm.

[leonardochen30]

On IE11 works great and chromiun based browser, on IE10 not load.

[arivera12]

@leonardochen30 can you please share with me your vuejs version and the working sample you are using for vue-good-table that works on IE?. I don't know why code doesn't work on IE11. Thanks in advance.

[leonardochen30]

I resolve the issue adding this resolve('node_modules/vue-good-table/src') to the babel-loader include section.
On IE10 was my issue, IE11 work fine.

[arivera12]

I am not using babel or webpack either. Just wanted a working template of vue-good-table....

[xaksis]

@arivera12 i think i was finally able to pinpoint what was going on. package.json had module entry pointing to the source file. so if you were using any kind of bundler, it would use the source file instead of the polyfilled umd version of the plugin. In version 1.18.6, I have:

1. removed module field from package.json
2. removed babel-polyfill from the project (not recommended for standalone libraries)
3. replaced with babel-runtime.

I have tested on IE11 and everything seems to be in order. Try again with the new version of the library and let me know what you see.

[arivera12]

@xaksis I just tried the new build and I am still having the same issue...

[arivera12]

@xaksis Please try this example I am putting here so you can see for your self that templates doesn't work on IE.

This works on IE.

data () {
    return {
      columns: [
          {
            label: 'Name',
            field: 'name',
          },
          {
            label: 'Age',
            field: 'age',
            type: 'number',
          },
          {
            label: 'Joined On',
            field: 'joined',
            type: 'date',
            inputFormat: 'YYYYMMDD',
            outputFormat: 'MMM Do YYYY',
          },
        ],
      rows: [
        {name:"John", age:20, joined: '20120201'},
        {name:"Jane", age:24, joined: '20120305'},
        {name:"Susan", age:16, joined: '20140823'},
        {name:"Chris", age:55, joined: '20161109'},
        {name:"Dan", age:40, joined: '20170612'},
      ],
    };
  }

<vue-good-table
  title="Simple Table"
  :columns="columns"
  :rows="rows"/>

This doesn't work on IE11

data () {
    return {
      columns: [
          {
            label: 'Name',
            field: 'name',
          },
          {
            label: 'Age',
            field: 'age',
            type: 'number',
          },
          {
            label: 'Joined On',
            field: 'joined',
            type: 'date',
            inputFormat: 'YYYYMMDD',
            outputFormat: 'MMM Do YYYY',
          },
        ],
      rows: [
        {name:"John", age:20, joined: '20120201'},
        {name:"Jane", age:24, joined: '20120305'},
        {name:"Susan", age:16, joined: '20140823'},
        {name:"Chris", age:55, joined: '20161109'},
        {name:"Dan", age:40, joined: '20170612'},
      ],
    };
  }
<vue-good-table title="Simple Table"
                            :columns="columns"
                            :rows="rows">
                <template slot="table-row" slot-scope="props">
                    <td>{{ props.row.name }}</td>
                    <td>{{ props.row.age }}</td>
                    <td>{{ props.row.joined }}</td>
                </template>
            </vue-good-table>

Slot templates doesn't work on IE. Even v-text and v-html directives on templates aren't working on IE.

[leonardochen30]

@arivera12 are you using it via CDN? I Try your example in IE10 and IE11 and it worked correctly. I do use a project via vue-cli with webpack and babel.

[arivera12]

@leonardochen30 please try the second example that I say it doesn't work first and confirm that this is working or not. I have all my files locally.

I am using vue-good-table latest
Vue.js v2.5.11

Try the example with the template slot and see if its working or not.

[arivera12]

@leonardochen30
Try this and tell me whats is your output on IE?

data () {
    return {
      columns: [
          {
            label: 'Name',
            field: 'name',
          },
          {
            label: 'Age',
            field: 'age',
            type: 'number',
          },
          {
            label: 'Joined On',
            field: 'joined',
            type: 'date',
            inputFormat: 'YYYYMMDD',
            outputFormat: 'MMM Do YYYY',
          },
        ],
      rows: [
        {name:"John", age:20, joined: '20120201'},
        {name:"Jane", age:24, joined: '20120305'},
        {name:"Susan", age:16, joined: '20140823'},
        {name:"Chris", age:55, joined: '20161109'},
        {name:"Dan", age:40, joined: '20170612'},
      ],
    };
  }
<vue-good-table title="Simple Table"
                            :columns="columns"
                            :rows="rows">
                <template slot="table-row" slot-scope="props">
                    <td>{{ props.row.name }}</td>
                    <td>{{ props.row.age }}</td>
                    <td>{{ props.row.joined }}</td>
                </template>
            </vue-good-table>

[leonardochen30]

Yes, i tried the last example and it works:

IE10:

IE11:

[arivera12]

@leonardochen30
OMG!!!! Why it doesn't work on my browser!!!! Please send me a build of your project to see if I can make this work out of the box! I tried the new build on the dist folder vue-good-table.min.js and still doesn't work on my browser. Please help me I have struggling on this over exactly one month!!!!!

[leonardochen30]

Hi bro, attached a demo project. Execute:

npm install
npm run dev.

Test.zip

[arivera12]

@leonardochen30
Gonna give it try and reply very soon!!!!
Thanks in advance!!!!

[arivera12]

I couldn't test it or integrate this into my project... So sad for me :cry:

[leonardochen30]

What error gave to you?
Nmp install?
Npm run dev?

[arivera12]

I am not using vue-loader or webpack or any module bundler. I am just using the https://github.com/xaksis/vue-good-table/blob/master/dist/vue-good-table.min.js into my project and thats all.

This seems to be working on the module bundle but the standalone lib doesn't work on IE.

If you just add the vue.min.js & vue-good-table.min.js without any module bundle you will run into my problem.

This plugin using the vue-good-table.min.js as standalone lib work everywhere but no on IE. I am thinking we are on different channels regarding on this based the way we are integrating this on the project.

Can you try a new clean project ONLY without any module bundle using vue.js & vue-good-table.js and a sample index.html and adding the static files into it?

If this works for you just don't know what in hell is going on!!!!!

There are differences in terms of JS using the module bundle and the standalone installation.

[khe817]

@arivera12 Did you figure it out or find a fix for it yet? I've encountered the same issue with <td> tags not being rendered at all.

[arivera12]

@khe817 No I could never figure it out. This plugins only works out of the box if you are packaging it using webpack. If you use this as standalone version it won't work. @xaksis any update on this?

[xaksis]

@khe817 how are you incorporating the plugin? what version are you using?

[khe817]

I did the same thing @arivera12 did here in my project:

@arivera12 said: "Can you try a new clean project ONLY without any module bundle using vue.js & vue-good-table.js and a sample index.html and adding the static files into it?"

To clarify, I include vue.js and vue-good-table.js directly as <script> tags in my project. No webpack, nor bundle anything.

I am using the newest versions for vue and vue-good-table downloaded from npm (2.5.13 and 1.20.0 respectively).

When I try to use <template slot="table-row" slot-scope="props"> to customise the content of <tr> rows, the <td> tags are not rendered in IE 11 for me. The code I use is the same as @arivera12 's :

data () {
    return {
      columns: [
          {
            label: 'Name',
            field: 'name',
          },
          {
            label: 'Age',
            field: 'age',
            type: 'number',
          },
          {
            label: 'Joined On',
            field: 'joined',
            type: 'date',
            inputFormat: 'YYYYMMDD',
            outputFormat: 'MMM Do YYYY',
          },
        ],
      rows: [
        {name:"John", age:20, joined: '20120201'},
        {name:"Jane", age:24, joined: '20120305'},
        {name:"Susan", age:16, joined: '20140823'},
        {name:"Chris", age:55, joined: '20161109'},
        {name:"Dan", age:40, joined: '20170612'},
      ],
    };
  }
<vue-good-table title="Simple Table"
                            :columns="columns"
                            :rows="rows">
                <template slot="table-row" slot-scope="props">
                    <td>{{ props.row.name }}</td>
                    <td>{{ props.row.age }}</td>
                    <td>{{ props.row.joined }}</td>
                </template>
            </vue-good-table>

[xaksis]

I'm going to re-open this issue. This is only happening in the case of custom template because IE doens't allow anything inside tr other than td or th. So the slot gets removed before Vue has had a chance to parse it. Unfortunately, I cannot provide a workaround for this without introducing breaking changes. so a fix will come in the new major version (v2.0.0) which is in alpha right now.

I'll update here when the fix is part of the alpha.

[arivera12]

@xaksis thanks I will wait for this!

[xaksis]

alright I think the alpha is finally ready for IE

There are quite a few changes, so make sure you read the upgrade guide:
https://github.com/xaksis/vue-good-table/wiki/Guide-to-upgrade-from-1.x-to-v2.0

You can read the full documentation here:
https://github.com/xaksis/vue-good-table/tree/new-build

If you're using the CDN version, these links will get you the latest alpha
js file: https://unpkg.com/vue-good-table@alpha/dist/vue-good-table.js
css file: https://unpkg.com/vue-good-table@alpha/dist/vue-good-table.css

[arivera12]

@xaksis I will try this on these days, I am little busy for the moment. I will give you feedback about it. @khe817 try to give feedback on this.

[khe817]

@xaksis I have tested it in my project. It works beautifully in all major browsers (firefox, chrome, Edge, IE 11).

There is a small bug in IE 11 and Edge though:

• When the page loads initially, in pagination, "Rows per page" is set to All instead of 10 like it should. However, clicking on Next, or select a different "Rows per page" will set it back to being functional normally.

There is a small bug in all browsers:

• props.index no longer reflects the current row index but the index of the fields in the row. If I try to print props.index for all cells in the table, it would look like this:

col1  | col2  | col3   | col4
[0]   | [1]   | [2]    | [3]
[0]   | [1]   | [2]    | [3]

As opposed to what we want:

col1  | col2  | col3   | col4
[0]   | [0]   | [0]    | [0]
[1]   | [1]   | [1]    | [1]

I also got this error in console log, but it does not affect anything as far as I am aware:

TypeError: this$1.columnFilters is undefined
Stack trace:
loop@http://localhost:8002/portal/js/vendor.js:40095:1
filterRows@http://localhost:8002/portal/js/vendor.js:40112:58
boundFn@http://localhost:8002/portal/js/vendor.js:23202:9
handler@http://localhost:8002/portal/js/vendor.js:40139:9
run@http://localhost:8002/portal/js/vendor.js:26209:11
flushSchedulerQueue@http://localhost:8002/portal/js/vendor.js:25959:5
nextTick/<@http://localhost:8002/portal/js/vendor.js:24820:9
flushCallbacks@http://localhost:8002/portal/js/vendor.js:24741:5
 vendor.js:24724:5

[xaksis]

💥 ! good news that this is now working in IE. and @khe817 thank you so much for spending time testing the new version out!! I'll make fixes to this and update once they're in.

[xaksis]

@khe817 v2.0.0-alpha.7 should now have the fix for

• correct index for the dynamic rows
• no columnFilter errors on table update.

[khe817]

@xaksis v2.0.0-alpha.7 works as expected.

Another note for the pagination bug in IE 11 and Edge. If I specify :per-page and :custom-rows-per-page-dropdown, then the Rows per page will display correctly on the first page load.

[xaksis]

closing.