Fields Definition

Rati Wannapanop edited this page Apr 7, 2017 · 9 revisions

Fields can be defined as simple string array, array of object, or the mix.

  • Fields defined as simple array

    var columns = ['name', 'email', 'birthdate', 'gender']
  • Fields defined as array of object

    var columns = [
      {
        name: 'name',
        sortField: 'name'
      },
      {
        name: 'email',
        title: 'Email Address'
      },
      {
        name: 'birthdate',
        sortField: 'birthdate',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        callback: 'formatDate|D/MM/Y'
      },
      {
        name: 'gender',
        sortField: 'gender',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        callback: 'gender'
      },
    ]
  • Fields defined as array of the mix

    var columns = [
      'name',
      'email',
      {
        name: 'birthdate',
        sortField: 'birthdate',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        callback: 'formatDate|D/MM/Y'
      },
      {
        name: 'gender',
        sortField: 'gender',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        callback: 'gender'
      },
      //...
    ]

    The difference is that if you defined a field as simple. vuetable will only display it as is without sorting or transforming options. vuetable will convert the simple field definition to field object with only name property.

    var columns = ['name']
    // will be converted to this
    // var columns = [ { name: 'name' } ]

Field options

  • name

    Name of the data field to be display.

  • sortField

    Usually, it will be the same as name option. But you can specify different value if you use different field name when querying data on the serve side, e.g. firstname.

    If specified, the field will be marked as sortable. vuetable will display appropriate clickable icon after the field title. vuetable will also make a new request to the server with the sort=<sortField> query string appended.

  • title

    If you would like to specify the title yourself, you can put it in here. Otherwise, vuetable will use the name option instead.

  • titleClass

    The css class you would like to apply for the title of this field.

  • dataClass

    The css class you would like to apply for the data of this field.

  • callback

    The name of the callback function to be called to allow any transformation of the value to be displayed. See Callback section for more info.

  • visible

    Whether this field should be visible or hidden when rendering the table.

Nested JSON Data

If the JSON data structure contains nested objects, eg:

{
  "links": {
    "pagination": {
      "per_page": 15,
    }
  },
  "data": [
    {
      "id": 1,
      "name": "xxxxxxxxx",
      "email": "xxx@xxx.xxx",
      "group_id": 1,
      "address" {
        "street_address":"123 abc place",
        "city":"townsville",
        "province":"Harbor",
        "country":"Antegria"
      }
    }
      .
      .
      .
    {
      "id": 50,
      "name": "xxxxxxxxx",
      "email": "xxx@xxx.xxx",
      "group_id": 3,
      "address" {
        "street_address":"456 xyz street",
        "city":"cityville",
        "province":"Portia",
        "country":"Norland"
      }
    }
  ]
}

In this case, the column names of nested objects can be specified in the following format:

  var columns = ['name', 'email', 'address.city', 'address.country']
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.