vue-tables-2 | Vue.js 2 grid components | Grid library

I'm trying to build tables based off a few selected properties from a previous component: I'm rendering a component called 'branch-comparison' to compare XML files and their properties and values. This component takes in two props:

selectedEnvs: An array of objects with a name and object

commonFiles: An array of files with a name and object

I'm using vue-tables-2 to build these tables. At the top of the template it runs a function called getProps() to generate a set of all possible properties from each file. I've hard coded 0 because currently I'm only letting the user choose 1 file at a time. It then goes through each file (only 1) and gets data for the main table and the comparison tables. They are virtually the same function (getHeadData and getTableData) but I've seperated them for now for further customization. The code is not that important for actually generating the tables, however something inside of them is causing my code to go in an infinite loop.

On the initial render of the component, there is never an infinite loop. Everything runs through, and doesn't break at all and works wonderfully. Once however the component has been rendered, and I make a change to the props, or even simply save the file in the editor and vue-cli hot reloads it, it goes into and infinite loop. All the data still get's generate fine and the component does as it's supposed to. But it loops through 101 times no matter what.

Things I've looked into:

Changing the data: I fully understand a component re renders on data change... however I don't believe I am changing any reactive data in any method call. I'm simply declaring it locally inside the function and returning it to that temporary variable. Also if this was the case, I believe it would go into an infinite loop on the initial component load, but this is not the case. It goes into the infinite loop only on a refresh or prop change.

Mutating the Vuex state: I looked into this but I am never changing the state of anything. I am simply accessing it in the getTableData and getHeadData methods. I then thought, perhaps assigning a variable to point to this state object is causing it to re render based on something accessing the state, so I tried instead of

How do I import sweetalert2 correctly so that I can use Swal? only want to use it in this file. And why doesn't work like on the official site?

I'm struggling to get a custom filter in vue-tables-2 to emit an event from a nested, single-page component in Vue. The problem may be that I'm not capturing / handling it correctly upstream.

I have a custom filter inside a custom template for dataTable which emits Event.$emit("vue-tables.filter::filterByBrand", this.brand).

I want to capture this 'filterByBrand' event in a top-level, router component called which is where I have my plus the attendant options including my customFilters.

Any thoughts on where I've gotten off course?

Grid.vue

Using vue-tables-2 component in my @vue/cli 4.0.5 app I see that GET request generated

Implementing in my @vue/cli 4.0.5 app vue-tables-2 component with server-table and looking at this https://matanya.gitbook.io/vue-tables-2/server-table/custom-request-function

I try to set additive Authorization parameter to request like:

So I'm using vue tables 2 and found little problem. Let's assume Im getting list of items and they have column called status, each status is constant and now I need to get translated values so making here relation status=key(constant). Table with translated values has color which I'd like to use to fill row.

I see in documentation that there is rowClassCallback, but I'd to return inline style like: background-image: $color (for selected status).

Even in this function (rowClassCallback) I can't check value of color because it's in data.

Here in options rowClassCallback is example what I'd to make.

Please help. I have been using Vue Tables 2 for > 2 years now, and I have never had this problem. My table shows up perfectly as usual, but now whenever I click on a cell, it is surrounded by a blue outline on chrome and a dotted outline on firefox. It is exhibiting the same behavior as if I had clicked on an input. I went through my Vue Tables 2 options one by one, disabling each in turn and it did not change the behavior. I looked through bootstrap 4 tables documentation, and could not find the same behavior as a option, so i believe it is vue tables that is doing it. The demo fiddle on the Vue Tables 2 page also has this behavior. It is very distracting and I am trying to get it to stop.

My goal is to have the table show the behavior it has before, which is to do nothing when you click on a cell.

I am using Bootstrap 4.4, and Vue-Tables-2 version 1.6.25

My options array looks like so

I can't figure out why the hiddenColumns option does not work. When I set it to hiddenColumns:['name'], I still can see the name column... I've tried the newest version but the problem remains.

EDIT

I want to have name column hidden by default but user can unhide it using columnsDropdown. So I can't just remove it from the columns array.