11<template >
22 <div >
3- <div v-if =" itemsPerPageSelect || tableFilter" class =" row my-2 mx-0"
3+ <div
4+ v-if =" itemsPerPageSelect || haveFilterOption"
5+ class =" row my-2 mx-0"
6+ >
47 <div
58 class =" col-sm-6 form-inline p-0"
6- v-if =" tableFilter "
9+ v-if =" haveFilterOption "
710 >
8- <label class =" mr-2" label >
9- <input
10- class =" form-control"
11- type =" text"
12- :placeholder =" tableFilterData.placeholder"
13- @input =" tableFilterChange($event.target.value, 'input')"
14- @change =" tableFilterChange($event.target.value, 'change')"
15- :value =" tableFilterState"
16- aria-label =" table filter input"
17- >
11+ <template v-if =" tableFilter " >
12+ <label class =" mr-2" label >
13+ <input
14+ class =" form-control"
15+ type =" text"
16+ :placeholder =" tableFilterData.placeholder"
17+ @input =" tableFilterChange($event.target.value, 'input')"
18+ @change =" tableFilterChange($event.target.value, 'change')"
19+ :value =" tableFilterState"
20+ aria-label =" table filter input"
21+ >
22+ </template >
23+ <slot name =" cleaner" :clean =" clean" :isFiltered =" isFiltered"
24+ <template v-if =" cleaner " >
25+ <CIcon
26+ v-if =" cleaner"
27+ v-bind =" cleanerProps"
28+ @click.native =" clean"
29+ />
30+ </template >
31+ </slot >
1832 </div >
1933
2034 <div
2135 v-if =" itemsPerPageSelect"
2236 class =" col-sm-6 p-0"
23- :class =" { 'offset-sm-6': !tableFilter }"
37+ :class =" { 'offset-sm-6': !haveFilterOption }"
2438 >
2539 <div class =" form-inline justify-content-sm-end"
2640 <label class =" mr-2" label >
4054 {{number}}
4155 </option >
4256 </select >
43- <CIcon
44- v-if =" cleaner"
45- v-bind =" cleanerProps"
46- @click.native =" clean"
47- />
57+
4858 </div >
4959 </div >
5060 </div >
7686 width =" 18"
7787 :content =" $options.icons.cilArrowTop"
7888 :class =" iconClasses(index)"
79- aria-label =" change column sorting"
89+ : aria-label" ` change column: '${name}' sorting` "
8090 />
8191 </slot >
8292 </th >
8898 <th :class =" headerClass(index)" :key =" index"
8999 <slot :name =" `${rawColumnNames[index]}-filter`"
90100 <input
91- v-if =" !fields || fields[index].filter !== false"
101+ v-if =" itemsDataColumns.includes(colName) &&
102+ (!fields || fields[index].filter !== false)"
92103 class =" form-control form-control-sm"
93104 @input =" columnFilterEvent(colName, $event.target.value, 'input')"
94105 @change =" columnFilterEvent(colName, $event.target.value, 'change')"
95106 :value =" columnFilterState[colName]"
96- :aria-label =" `column name: ${colName} filter input`"
107+ :aria-label =" `column name: ' ${colName}' filter input`"
97108 />
98109 </slot >
99110 </th >
@@ -275,7 +286,7 @@ export default {
275286 loading: Boolean ,
276287 clickableRows: Boolean ,
277288 noItemsView: Object ,
278- cleaner: [ Boolean , Object ]
289+ cleaner: Boolean
279290 },
280291 data () {
281292 return {
@@ -351,6 +362,11 @@ export default {
351362 })
352363 return items
353364 },
365+ itemsDataColumns () {
366+ return this .rawColumnNames .filter (name => {
367+ return this .generatedColumnNames .includes (name)
368+ })
369+ },
354370 tableFiltered () {
355371 let items = this .columnFiltered
356372 if (! this .tableFilterState || (this .tableFilter && this .tableFilter .external )) {
@@ -359,7 +375,7 @@ export default {
359375 const filter = this .tableFilterState .toLowerCase ()
360376 const hasFilter = (item ) => String (item).toLowerCase ().includes (filter)
361377 items = items .filter (item => {
362- return this .rawColumnNames .filter (key => hasFilter (item[key])).length
378+ return this .itemsDataColumns .filter (key => hasFilter (item[key])).length
363379 })
364380 return items
365381 },
@@ -454,17 +470,21 @@ export default {
454470 }
455471 return customValues .noItems || ' No items'
456472 },
473+ isFiltered () {
474+ return this .tableFilterState ||
475+ Object .values (this .columnFilterState ).join (' ' ||
476+ this .sorterState .column
477+ },
457478 cleanerProps () {
458- if (typeof this .cleaner === ' object'
459- return this .cleaner
460- }
461- const isFiltered = this .tableFilterState ||
462- Object .keys (this .columnFilterState ).length ||
463- this .sorterState .column
464479 return {
465480 content: this .$options .icons .cilFilterX ,
466- class: ` ml-2 ${ isFiltered ? ' text-danger' : ' transparent' } `
481+ class: ` ml-2 ${ this .isFiltered ? ' text-danger' : ' transparent' } `
482+ role: this .isFiltered ? ' button' : null ,
483+ tabindex: this .isFiltered ? 0 : null ,
467484 }
485+ },
486+ haveFilterOption () {
487+ return this .tableFilter || this .cleaner || this .$scopedSlots .cleaner
468488 }
469489 },
470490 methods: {
@@ -518,7 +538,9 @@ export default {
518538 return classes
519539 },
520540 isSortable (index ) {
521- return this .sorter && (! this .fields || this .fields [index].sorter !== false )
541+ return this .sorter &&
542+ (! this .fields || this .fields [index].sorter !== false ) &&
543+ this .itemsDataColumns .includes (this .rawColumnNames [index])
522544 },
523545 headerClass (index ) {
524546 const fields = this .fields
0 commit comments