CDataTable not showing columnFilter on external datasource

[ayrtonandino]

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)
"

[woothu]

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

[woothu]

Fixed in 3.1.2 version release.