Vue Data Grid

Text Formatting

vue logo

Use a Value Formatter to provide text formatting of values.

In the example below:

  • Columns A and B display the value of the field property
  • Columns £A and £B use a currencyFormatter to display the value as a currency
  • Columns(A) and (B) use a bracketsFormatter to display the value inside brackets
<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    // simple currency formatter
    { field: 'price', valueFormatter: p => '$' + params.value },
    // simple UPPER CASE formatter
    { field: 'code', valueFormatter: p => params.value.toUpperCase() }
];

Value Formatter Definition

Below shows the column definition properties for value formatters.