Vue Data GridCell Content

Methods for providing and displaying values within cells.

The different parts of the grid concerned with cell values are as follows:

  • Value Getter: Instead of specifying colDef.field, you can use colDef.valueGetter to provide a function for getting cell values. This is more flexible than providing field values for specific cells.
  • Value Formatters: Use formatters to format values.
  • Cell Components: Include images, links, and buttons within a cell.
  • Reference Data: Reference data is used to display alternative values to what is in your data, eg your data could be 'USA' but you want to display 'America' instead.

Rendering Flow

It is helpful to understand how value getters, formatters and cell renderers work together to provide the end result.

Value Getter Flow