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.

#	Name	Country	Age
1	Richard Hendricks	United States	26
2	Bertram Gilfoyle	Canada	30
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

Disable Filtering

Filtering can be disabled by setting the filtering attribute to false.

#	Name	Country	Age
1	Richard Hendricks	United States	26
2	Bertram Gilfoyle	Canada	30
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: [ ... ]
        }
    }
}

#	Name	Email	Age
1	Richard Hendricks	richard.hendricks@email.com	26
2	Bertram Gilfoyle	bertram.gilfoyle@email.com	30
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 update event occurs whenever the search input is updated.