Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork131
Closed
Description
I have a datatable that lazyload from an api.
I’m using "@coreui/vue": "^3.1.1"
<CDataTable :sorter="{ external:true }" :columnFilter="{ external:true, lazy:true }" :tableFilter="{ external:true, lazy:true }" @pagination-change="changeItemsLimit" :sorter-value.sync="passedSorter" :column-filter-value.sync="columnFilter" :table-filter-value.sync="tableFilter" :loading="loading" :items-per-page-select="true" :items="items" :fields="fields">...</CDataTable>
When the api return emptyitems: [], result from a column being filtered and no matching data, the entire “columns filters” row disappear.
This is a problem when you have a lot of columns being filtered and only one that doesn’t match anything, you must remove all filters and start from scratch.
Looking at the component, the problem is that it checks if the column is present in the items array, which is empty.
<!-- line 96 from CDataTable.vue--><trv-if="columnFilter"> <template v-for="(colName, index) in rawColumnNames" > <th :class="headerClass(index)" :key="index"> <slot :name="`${rawColumnNames[index]}-filter`"> <input v-if="itemsDataColumns.includes(colName) && (!fields || fields[index].filter !== false)" @input="columnFilterEvent(colName, $event.target.value, 'input')" @change="columnFilterEvent(colName, $event.target.value, 'change')" :value="columnFilterState[colName]" :aria-label="`column name: '${colName}' filter input`" /> </slot> </th> </template></tr>
I would suggest changing this
v-if="itemsDataColumns.includes(colName) &&(!fields||fields[index].filter!==false)"
To something like this?
// untested, works for my use casev-if="(itemsDataColumns.includes(colName)||columnFilter.external)&&(!fields||fields[index].filter!==false)"