I could really use some assistance. I have been utilizing Vue Tables 2 for over two years now with no issues until recently. My table displays perfectly as usual, but whenever I click on a cell, it is outlined in blue on Chrome and dotted on Firefox. The behavior is similar to that of clicking on an input field. I have tried disabling various Vue Tables 2 options one by one, yet the behavior persists. After reviewing Bootstrap 4 tables documentation, I couldn't find a related option, leading me to believe it's linked to Vue Tables. Even the demo fiddle on the Vue Tables 2 page exhibits this same distracting behavior.
My aim is to restore the previous behavior of the table, where clicking on a cell had no effect.
For reference, I am using Bootstrap 4.4 and Vue-Tables-2 version 1.6.25
Here is a snippet of my options array:
tableOptions: {
skin: 'table table-sm table-hover border-0',
filterable: true,
pagination: { chunk:4 },
perPageValues: [],
perPage: 18,
dateColumns: ['created_at'],
dateFormat: 'MM-DD-YYYY',
toMomentFormat: 'YYYY-MM-DD H:mm:ss',
texts:{
filter:"",
count:"",
filterPlaceholder:"Search",
page:"Page:",
noResults:"No matching records",
loading:'Loading...',
},
columnsClasses: {
cntCnt: 'text-center noOutline',
qtCnt: 'text-center noOutline',
statusName: 'text-center noOutline',
created_at: 'text-center ',
},
headings: {
id: 'Ref',
name: 'Name',
cntCnt: 'Contacts',
qtCnt: 'Quotes',
statusName: 'Status',
created_at: 'Created',
orgSelect: '',
},
}
I've attached a screenshot illustrating the issue. The outlining occurs around every cell clicked, including column headers.