Managing Columns

Setting AG Grid Cell Data Types

Summary

  • Developers should provide the cellDataType property as part of each AG Grid Column definition
  • AdapTable will then set the data types of the columns, ensuring filters and menus are correctly configured

AdapTable needs to know the correct data type of each Column in AG Grid.

Note

This will ensure that appropriate Filter Predicates, Column Menus etc. are configured correctly for the Column

AdapTable does this by leveraging the cellDataType property that is part of each AG Grid ColDef object.

Breaking Change

  • Prior to AdapTable Version 20 the type property of the Column Definition was used for this purpose
  • This was changed to leverage the more powerful cellDataType property introduced by AG Grid v.32

If this is not provided, AdapTable will attempt to work out the DataType of the column, by analysing the data in the first row of the Grid.

Caution

Not providing Column Data Types can cause issues, particularly if the data in the first row is missing or ambiguous

AG Grid Cell Data Types

When setting up Column Definitions, developers should ensure to set the correct cellDataType property.

For the vast majority of Columns, the default values provided by AG grid will suffice:

Column Data TypeAG Grid cellDataType valueDefunct AdapTable type value
StringtextabColDefString
NumericnumberabColDefNumber
DatedateabColDefDate
Date (as string)dateStringabColDefDate
BooleanbooleanabColDefBoolean
ObjectobjectabColDefObject
const gridOptions: GridOptions = {
  columnDefs: [
    {
      headerName: 'Make',
      field: 'make',
      cellDataType: 'text', // previously type: 'abColDefString'
    },
    {
      headerName: 'Released',
      field: 'released',
      cellDataType: 'date',  // previously type: 'abColDefDate'
    },
    {
      headerName: 'Updated',
      field: 'updated',
      cellDataType: 'dateString',  // previously type: 'abColDefDate'
    },
    {
      headerName: 'Bid',
      field: 'bid',
      cellDataType: 'number',// previously type: 'abColDefNumber' 
      type: 'pricing',  // you can still use type prop to create column "sets"
    },
    {
      headerName: 'Automatic',
      field: 'automaticTransmission',
      cellDataType: 'boolean',  // previously type: 'abColDefBoolean'
    },
  ],
};
AG Grid Cell Data Types
Fork
  • This demo shows how AdapTable leverages AG Grid Cell Data Types using a (nonsensical) data set with these columns:
    • Make and Model are text
    • Price and Rating are numbers
    • Available is a boolean
    • Made is a date and Produced is a dateString - but both become AdapTable Dates (and therefore they share the same Format Column)

Array Types

There are a few use cases (all regarding array data) where the the AG Grid types are insufficient.

In this case AdapTable provides a number of different array-based cell data types.

Find Out More

See creating Array Columns for full details and accompanying demos

PreviousProviding Column TypesNextUnderstanding AG Grid ColDefs