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

Disable Filtering

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

Data Table Default Filtering

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

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.

Data Table Async Filtering