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 empty items: []
, 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 -->
<tr v-if="columnFilter" class="table-sm">
<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)"
class="form-control form-control-sm"
@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 case
v-if="
(itemsDataColumns.includes(colName) || columnFilter.external)
&&
(!fields || fields[index].filter !== false)
"
Activity
woothu commentedon Jul 24, 2020
The problem with your solution is that column with no data would have a column filter when there are no items, and no filter when the items are there.
So the solution is to remove
automatic
column filter removal when column doesn't have data, this feature was introduced in 3.1.0 version:8976054#diff-0f3bc2a0701817028951551a8e56d6f2R101
fix: CDataTable disable auto removing columnFilter #113
woothu commentedon Jul 24, 2020
Fixed in 3.1.2 version release.