CDataTable not showing columnFilter on external datasource #113

ayrtonandino · 2020-07-24T14:52:17Z

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 · 2020-07-24T17:20:03Z

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 · 2020-07-24T17:54:32Z

Fixed in 3.1.2 version release.

woothu added the bug label Jul 24, 2020

woothu added a commit that referenced this issue Jul 24, 2020

fix: CDataTable disable auto removing columnFilter #113

Loading status checks…

f2c6ebe

woothu closed this Jul 24, 2020

coreui / coreui-vue

CDataTable not showing columnFilter on external datasource #113

CDataTable not showing columnFilter on external datasource #113

ayrtonandino commented Jul 24, 2020

woothu commented Jul 24, 2020

woothu commented Jul 24, 2020

coreui / coreui-vue

Join GitHub today

CDataTable not showing columnFilter on external datasource #113

CDataTable not showing columnFilter on external datasource #113

Comments

ayrtonandino commented Jul 24, 2020

woothu commented Jul 24, 2020

woothu commented Jul 24, 2020

Essential cookies

Always active

Analytics cookies