Using AG Grid Cell Rendering

Summary

AG Grid's Value Getters, Value Formatters and Cell Components are fully supported in AdapTable
Nevertheless we recommend using AdapTable Styling and Formatting wherever possible instead

AG Grid Rendering Objects

AG Grid provides very powerful functionality to enable custom cell and column content.

This is primarily achieved using 2 objects (depending on the complexity of the use case):

Value Formatters - allow users to format the values which are displayed (essentially text formatting)
Cell Components (previously called Cell Renderers) - allow users to display anything in a cell

Both of these will work in AdapTable and nothing will be lost.

However, despite the richness of the AG Grid rendering capabilities, we recommend not using AG Grid's Value Formatters or Cell Components, where possible.

Instead we recommend using:

AdapTable's Display Formats in place of Value Formatters
AdapTable's Styling and Styled Columns in place of Cell Components

Note

Behind the scenes AdapTable will, itself, convert its objects to AG Grid Value Formatters and Cell Components

This recommendation is made for a number of reasons, based on extensive user experience, including:

AdapTable's objects can be changed at run-time via Wizards
AdapTable's objects are fully saveable in State, and therefore shareable with colleagues
AdapTable will ensure that they always work if AG Grid's api changes (i.e. they are future-proofed)

Hint

Additionally, AG Grid supports Value Getters which allow users to retrieve the cell value using custom logic
These can sometimes be replaced with AdapTable Calculated Columns

AG Grid Cell Rendering & Formatting

Fork Fork

This demo shows how AG Grid Column Components and Value Formatters works with AdapTable
We created a (nonsensical) data set which we render using a mixture of different AG Grid and AdapTable formatting and rendering options (often displaying same field twice) as follows:
- Made appears twice, once with an AG Grid Value Formattter and once with an AdapTable Date Display Format
- Price appears twice, once with an AG Grid Value Formattter and once with an AdapTable Numeric Display Format
- Rating appears 3 times, once with an AG Grid Value Formattter, once with an an AG Grid Cell Component and once with an AdapTable Custom Display Format
- Composite appears twice, once with an AG Grid Value Getter and once using an AdapTable Calculated Column
- Model has an AdapTable (Badge) Styled Column configured in Initial Adaptable State

Try It Out

Export Current Layout to Excel and note how AdapTable can display the display values for columns using AG Grid's Value Formatter (but not if using a Cell Component)

import {
  AdaptableOptions,
  CustomDisplayFormatterContext,
} from '@adaptabletools/adaptable';
import {Car} from './rowData';

export const adaptableOptions: AdaptableOptions<Car> = {
  primaryKey: 'model',
  adaptableId: 'AG Grid Cell Rendering',
  formatColumnOptions: {
    customDisplayFormatters: [
      {
        id: 'ratingFormat',
        label: 'Rating Format',
        scope: {
          DataTypes: ['number'],
        },
        handler: (
          customDisplayFormatterContext: CustomDisplayFormatterContext
        ) => {
          const cellValue: number =
            customDisplayFormatterContext.cellValue as number;
          return '*'.repeat(cellValue);
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      PinnedToolbars: ['Export'],
    },
    Export: {
      CurrentReport: 'Current Layout',
      CurrentFormat: 'VisualExcel',
    },
    Theme: {CurrentTheme: 'dark'},
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'model',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: 'DarkGray',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-price_adaptable',
          Scope: {
            ColumnIds: ['price_adaptable'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              FractionDigits: 2,
              Prefix: '$',
            },
          },
        },
        {
          Name: 'formatColumn-made_adaptable',
          Scope: {
            ColumnIds: ['made_adaptable'],
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'dd/MM/yyyy',
            },
          },
        },
        {
          Name: 'formatColumn-rating_df',
          Scope: {
            ColumnIds: ['rating_df'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              CustomDisplayFormats: ['ratingFormat'],
            },
          },
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          ColumnId: 'composite_adaptable',
          FriendlyName: 'Composite (AdapTable)',
          CalculatedColumnSettings: {
            DataType: 'text',
          },
          Query: {
            ScalarExpression: '[make] + " - " + [model] ',
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'make',
            'model',
            'made_aggrid',
            'made_adaptable',
            'price_aggrid',
            'price_adaptable',
            'rating_vf',
            'rating_cc',
            'rating_df',
            'composite_aggrid',
            'composite_adaptable',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousConfiguring GridOptions NextAG Grid Pagination

Framework: