Data Table Filtering

Inkline's Data Table rows are easily and efficiently filtered using a fuzzy search algorithm.

Default Filtering

Filtering is enabled by default and can be changed using the filterable attribute if needed.

Data Table Default Filtering
Showentries
# Name Country Age
1 Richard Hendricks United States 26
2 Richard Hendricks United States 26
3 Dinesh Chugtai Pakistan 30
4 Jared Dunn Germany 35
5 Erlich Bachman United States 32
6 Nelson Bighetti United States 26
7 Richard Hendricks United States 26
8 Bertram Gilfoyle Canada 30
9 Dinesh Chugtai Pakistan 30
10 Jared Dunn Germany 35
# Name Country Age

Selective Filtering

By setting the filterable column property to true, you can easily add filtering support to specific table columns.

export default {
    data() {
        return {
            filteringConfig: {
                fuse: {
                    keys: ['name']
                }
            },
            columns: [
                { title: 'Name', path: 'name' },
                { title: 'Email', path: 'email' },
                { title: 'Age', path: 'age' }
            ],
            rows: [ ... ]
        }
    }
}
Data Table Selective Filtering
Showentries
# Name Email Age
1 Richard Hendricks richard.hendricks@email.com 26
2 Richard Hendricks richard.hendricks@email.com 26
3 Dinesh Chugtai dinesh.chugtai@email.com 30
4 Jared Dunn jared.dunn@email.com 35
5 Erlich Bachman erlich.bachman@email.com 32
6 Nelson Bighetti nelson.bighetti@email.com 26
7 Richard Hendricks richard.hendricks@email.com 26
8 Bertram Gilfoyle bertram.gilfoyle@email.com 30
9 Dinesh Chugtai dinesh.chugtai@email.com 30
10 Jared Dunn jared.dunn@email.com 35
# Name Email Age

Filtering Configuration

Filtering can be configured by providing an object for the filtering attribute. Inkline uses Fuse.js for providing a fuzzy search implementation.

The Fuse.js Configuration can be fine-tuned using the fuse field in the filtering configuration.

The default configuration is as follows:

export default {
    ...
    data() {
        return {
            filtering: {
                size: 'md',
                variant: 'light',
                fuse: {
                    keys: [],
                    shouldSort: false,
                    includeMatches: true,
                    includeScore: true,
                    threshold: 0.25,
                    location: 0,
                    distance: 75,
                    tokenize: true,
                    maxPatternLength: 32,
                    minMatchCharLength: 1
                }
            }
        };
    }
}       
<i-datatable :columns="columns" :rows="rows" :filtering="filtering" />

Async Filtering

Filtering can be handled asynchronously by setting the async attribute to true and providing an appropriate rowsCount.

This will tell the DataTable component to only display the rows and let the pagination and filtering handling be done externally using the update event.

The filtering event occurs whenever the search input is updated.

Data Table Async Filtering
Showentries
# Name Country Age
# Name Country Age