Skip to content

CDataTable not showing columnFilter on external datasource #113

Closed
@ayrtonandino

Description

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

Activity

woothu

woothu commented on Jul 24, 2020

@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

woothu commented on Jul 24, 2020

@woothu

Fixed in 3.1.2 version release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      CDataTable not showing columnFilter on external datasource · Issue #113 · coreui/coreui-vue