Vue Data GridText Formatting

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.

Please note the Value Formatter params won't always have 'data' and 'node' supplied, e.g. the params supplied to the Value Formatter in the Set Filter.

As a result favour formatter implementations that rely upon the 'value' argument instead, as this will lead to better reuse of your Value Formatters.

If you want more than text formatting, e.g. you need Buttons in the Cell, then use a Cell Component.

Formatting for Export

By default, the grid uses the value formatter when performing other grid operations that need values in string format.

This behaviour can be prevented by setting the column definition property useValueFormatterForExport = false (note this does not apply to rendering).

Using the value formatter for export applies to the following features:

• Copy/Cut
• Fill Handle
• Copy Range Down
• CSV Export
• Excel Export

Using a value formatter for export is normally used in conjunction with Using a Value Parser for Import, where a Value Parser is defined that does the reverse of the value formatter.

The following example demonstrates the default behaviour using the value formatter for export with each of the supported features mentioned above.

Note that if any of the following conditions are true, then useValueFormatterForExport is ignored for that feature and the value will be either the original value or that set in the custom handler:

• If processCellForClipboard is provided when using copy/cut.
• If fillOperation is provided when using fill handle.
• If processCellForClipboard is provided when using copy range down.
• If processCellCallback is provided when using CSV export.
• If processCellCallback or Excel Data Types are provided when using Excel export.
• If the underlying value is a number when using Excel export. To export formatted number values to Excel, please use the Excel Data Type feature.