Vue-good-table
Vue-good-table
Source
Edit
History

Column Options

카탈로그
  1. 1. Column Options
    1. 1.1. label
    2. 1.2. field
    3. 1.3. type
    4. 1.4. dateInputFormat
    5. 1.5. dateOutputFormat
    6. 1.6. sortable
    7. 1.7. sortFn
    8. 1.8. formatFn
    9. 1.9. html
    10. 1.10. width
    11. 1.11. hidden
    12. 1.12. thClass
    13. 1.13. tdClass
    14. 1.14. globalSearchDisabled

Column Options

Each column objects can contain the following configuration options:

label

type String

Text to put on column header.

1
2
3
4
5
6
columns: [
  { 
    label: 'name'
  },
  // ...
]

field

type String

Row object property that this column corresponds to. This can be:

  • String eg: 'name' - simple row property name
  • String eg: 'location.lat'- nested row property name. lets say if the row had a property ‘location’ which was an object containing ‘lat’ and ‘lon’
  • Function - a function that returns a value to be displayed based on the row object
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    columns: [
      { 
        label: 'name',
        field: this.fealdFn,
      },
      // ...
    ]
    // in methods
    fieldFn(rowObj) {
      return rowObj.name;
    }

type

type String

type of column. default: ‘text’. This determines the formatting for the column and filter behavior as well. Possible values:

  • number - right aligned
  • decimal - right aligned, 2 decimal places
  • percentage - expects a decimal like 0.03 and formats it as 3.00%
  • boolean - right aligned
  • date - expects a string representation of date eg ‘20170530’. You should also specify dateInputFormat and dateOutputFormat
1
2
3
4
5
6
7
8
9
10
columns: [
  { 
    label: 'joined On',
    field: 'createdAt',
    type: 'date',
    dateInputFormat: 'yyyy-MM-dd', // expects 2018-03-16
    dateOutputFormat: 'MMM Do yyyy', // outputs Mar 16th 2018
  },
  // ...
]

dateInputFormat

type String

provide the format to parse date string.

::: tip
Vue-good-table uses date-fns for date parsing. Check out their formats here.
:::

dateOutputFormat

type String

provide the format for output date

sortable

type Boolean

enable/disable sorting on columns. This property is higher priority than global sortable property

1
2
3
4
5
6
7
8
columns: [
  { 
    label: 'name',
    field: 'user_name',
    sortable: false,
  },
  // ...
]

sortFn

type Function

custom sort function. If you want to supply your own sort function you can use this property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// in data
columns: [
  {
    label: 'Name',
    field: 'name',
    sortable: true,
    sortFn: this.sortFn,
  }
  //...
],
// in methods
methods: {
  sortFn(x, y, col, rowX, rowY) {
    // x - row1 value for column
    // y - row2 value for column
    // col - column being sorted
    // rowX - row object for row1
    // rowY - row object for row2
    return (x < y ? -1 : (x > y ? 1 : 0));
  }
}

formatFn

type Function

Allows for custom format of values, function(value), should return the formatted value to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// in data
columns: [
  {
    label: 'Salary',
    field: 'salary',
    sortable: true,
    formatFn: this.formatFn,
  }
  //...
],
// in methods
formatFn: function(value) {
  return '$' + value;
}

html

type Boolean

indicates whether this column will require html rendering.
::: tip
The preferred way of creating columns that have html is by using slots
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// in data
columns: [
  {
    label: 'Action',
    field: 'btn',
    html: true,
  }
  //...
],
rows: [
  {
    btn: '<button>My Action</button>',
    // ...
  }
]

width

type Number

provide a width value for this column

1
2
3
4
5
6
7
8
columns: [
  { 
    label: 'name',
    field: 'user_name',
    width: '50px',
  },
  // ...
]

hidden

type Boolean

hide a column

1
2
3
4
5
6
7
8
columns: [
  { 
    label: 'name',
    field: 'user_name',
    hidden: true,
  },
  // ...
]

thClass

type String

provide custom class(es) to the table header

1
2
3
4
5
6
7
8
columns: [
  { 
    label: 'name',
    field: 'user_name',
    thClass: 'custom-th-class',
  },
  // ...
]

tdClass

type String or Function

provide custom class(es) to the table cells

1
2
3
4
5
6
7
8
columns: [
  { 
    label: 'name',
    field: 'user_name',
    tdClass: 'text-center',
  },
  // ...
]

or

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
columns: [
  { 
    label: 'name',
    field: 'user_name',
    tdClass: this.tdClassFunc,
  },
  // ...
]
// and later
methods: {
  tdClassFunc(row) {
    if (row.field > 50) {
      return 'red-class';
    }
    return 'green-class';
  },
}

globalSearchDisabled

type Boolean (default: false)

if true, this column will be ignored by the global search

1
2
3
4
5
6
7
8
columns: [
  { 
    label: 'name',
    field: 'user_name',
    globalSearchDisabled: true,
  },
  // ...
]