VueJs Smart Table

Filtering

Smart Table is only on charge of the actual row filtering based on the provided configuration. The visual aspect of it are in your control, allowing you to use any UI Elements to interact while it frees you from the actual filtering computation.

Filters Property filters: Object

To enable filtering you need to provide the filters property on the v-table component.

The filters configuration object has the following form:

{
  name: {value: '', keys: ['name']}
}

The entry Key is just for you, so you can reference any of the filters by its name. It is the entry Value Object what Smart Table will use to perform the filtering.

value String

This String is the value of the filter, you would normally bind it to the v-model of an input element. As you type, the rows will be filtered.

Keep in mind that an empty value means there is no filter.

keys Array

This is an Array of Strings indicating what fields of each row the filter value will apply to.

You must provide at least one key. If more than one key is provided as long as one of the row fields matches the filter, the row will be displayed.

Example

import users from './users.json'

export default {
  name: 'BasicFiltering',
  data: () => ({
    users,
    filters: {
      name: { value: '', keys: ['name'] }
    }
  })
}

<template>
    <div>
      <label>Filter by Name:</label>
      <input class="form-control" v-model="filters.name.value"/>
    
      <v-table
        :data="users"
        :filters="filters"
      >
        <thead slot="head">
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th>Address</th>
        </thead>
        <tbody slot="body" slot-scope="{displayData}">
        <tr v-for="row in displayData" :key="row.guid">
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.email }}</td>
          <td>
              {{ row.address.street }}, 
              {{ row.address.city }} 
              {{ row.address.state}}
          </td>
        </tr>
        </tbody>
      </v-table>
    </div>
</template>
Name Age Email Address
Deana Lindsay 25 deanalindsay@terrago.com 268 Garnet Street, Chicopee Pennsylvania
Wyatt Kline 39 wyattkline@medmex.com 234 Irwin Street, Irwin Maine
Harmon Huber 29 harmonhuber@snips.com 913 Gerritsen Avenue, Nash American Samoa
Penny Maddox 29 pennymaddox@baluba.com 218 Agate Court, Sandston Oregon
Morgan Gomez 39 morgangomez@affluex.com 632 Highland Avenue, Tuttle Connecticut
Beck Mckay 35 beckmckay@geologix.com 936 Woodpoint Road, Wakulla Mississippi
Massey Carlson 39 masseycarlson@earthwax.com 278 Chapel Street, Taycheedah Hawaii
Hill Hale 33 hillhale@calcu.com 618 Newport Street, Deercroft Colorado
Stokes Hurst 26 stokeshurst@datagen.com 146 Conover Street, Dahlen North Dakota
Cain Knapp 20 cainknapp@namebox.com 460 Bridgewater Street, Manchester Michigan

Custom Filters

You also have the option to provide a custom filter for more complex situations. A Custom Filter is a function with two arguments: filterValue and row. It should return true if the row should be displayed and false otherwise.

custom Function

To use a custom filter provide the filtering function on the custom property on the filter configuration object:

value Any

With custom filtering the value property is not limited to Strings, you can provide anything as the value, it will just get passed along to your custom function.

Example

<script>
import users from './users.json'

export default {
  name: 'CustomFiltering',
  data () {
    return {
      users,
      filters: {
        age: { value: { min: 21, max: 22 }, custom: this.ageFilter }
      }
    }
  },
  methods: {
    ageFilter (filterValue, row) {
      return row.age >= filterValue.min && row.age <= filterValue.max
    }
  }
}
</script>

<template>
    <div>
      <label>Min Age:</label>
    
      <InputSpinner
        v-model="filters.age.value.min"
        :min="0"
        :max="filters.age.value.max"
      />
    
      <label>Max Age:</label>
      <InputSpinner
        v-model="filters.age.value.max"
        :min="filters.age.value.min"
        :max="99"
      />
    
      <v-table
        :data="users"
        :filters="filters"
      >
        <thead slot="head">
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th>Address</th>
        </thead>
        <tbody slot="body" slot-scope="{displayData}">
        <tr v-for="row in displayData" :key="row.guid">
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.email }}</td>
          <td>
            {{ row.address.street }},
            {{ row.address.city }}
            {{ row.address.state}}
          </td>
        </tr>
        </tbody>
      </v-table>
    </div>
</template>

TIP

Please think of the InputSpinner as a fancy Input with validation. The important bit is its v-model.

Name Age Email Address
Ramirez Valdez 22 ramirezvaldez@solaren.com 932 Battery Avenue, Iola Virginia
Shepard Russo 21 shepardrusso@maximind.com 450 Stryker Court, Eagleville South Dakota
Castro Hanson 21 castrohanson@furnitech.com 932 Herkimer Court, Cavalero Texas
Iris Nielsen 21 irisnielsen@roughies.com 824 Doscher Street, Goodville South Carolina
Barry Ramsey 21 barryramsey@accupharm.com 220 Henderson Walk, Gerber California
Rich Montoya 22 richmontoya@orbaxter.com 134 Blake Court, Kaka Arkansas
Potter Cannon 22 pottercannon@mondicil.com 762 Drew Street, Riceville Michigan
Herman House 22 hermanhouse@frenex.com 770 Wyckoff Avenue, Trail Louisiana
Ebony Miller 21 ebonymiller@tetratrex.com 451 Landis Court, Elrama Tennessee
Edit this page

← Sorting →