Set Up Columns Demo

When setting up columns in AG Grid there are 2 ways to render data so that the display value in the cell differs from the 'raw' value:

  • Value Formatters: enable formatting a column so the display value fits precise requirements (e.g. decimal places, showing a currency sign, negative numbers in brackets etc.)
  • Cell Renderers: designed for more complicated use cases (e.g. showing an image in the cell, rendering cells in complex ways)

AdapTable will recognise when either of these are being used to format the data and will allow you still to filter the column on the raw (i.e. underlying) values (e.g. in the quick filter bar).

The only difference is that when a Value Formatter is used the Display Value is shown in the Filter dropdown, but for a Cell Renderer the raw value is displayed.

Note: AdapTable functionality like Percent Bar and Gradient Column effectively create advanced cell renderers on the fly for you.

To format columns on the fly, or for more complicated date and numeric formats, use the AdapTable Format Column Module (as done below for First Bought and Price Columns)

In this demo we have created value formatters for the Efficiency, First Used and Efficiency Rating columns and a Cell Renderer for the Energy Rating column.

Note also how we pass in the columnTypes array to GridOptions and then reference the required column type when we create each column (e.g. 'abColDefNumber')

AdapTable Help Resources:

Generating dummy data, please wait ...