AdapTable Free Text Columns

Some AdapTable features are showstoppers packed with advanced options that take AG Grid to the next level (e.g. Calculated Columns, Alerts, Format Columns etc.)

Other features are more modest: aiming to improve the AG Grid user experience in a limited way, but proving hugely beneficial to those who leverage them

Free Text Columns - the focus of this blog post - are an excellent example of the latter

Grids are brilliant at showing shared data from your application.

They are less helpful when someone needs a personal or operational column — ops note, “in use” flag, vendor status — that should travel with their layout and state, not rewrite the Data Source.

AdapTable's Free Text Columns solve exactly that.

Important

Free Text Columns are special columns created by AdapTable (like Calculated Columns)
Cell values are stored in Adaptable State — not written back to AG Grid’s Data Source
Once created, they behave like normal Layout columns: edit, filter, sort, format and style them

Free Text Columns have one of four data types (which ensures that AdapTable can show the right cell editor automatically):

text
number
boolean
date

Hint

You can also seed columns with initial values (and optional defaults) if required
This ensures that AG Grid is useful from first load, not only after users start typing

In the Demo

Four Free Text Columns are defined in Initial State (with pre-seeded values on several rows):
- Ops Note — free-form text (classic “user-owned” field)
- Status — text values rendered as colourful Badges, edited via a Select Cell Editor
- Last Spoken — a date Free Text Column with a Display Format
- In Use — a boolean Free Text Column (checkbox) with a default of false

Free Text Columns in AdapTable

Fork Fork

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

/**
 * Free Text Columns feature blog demo — user-owned columns with Badge Style formatting.
 */
export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'FreeText Columns in AdapTable',
  editOptions: {
    showSelectCellEditor: context => {
      return context.column.columnId === 'status';
    },
    customEditColumnValues: context => {
      if (context.column.columnId === 'status') {
        return [
          {label: 'Preferred', value: 'Preferred'},
          {label: 'Allowed', value: 'Allowed'},
          {label: 'On-boarding', value: 'On-boarding'},
          {label: 'Not Allowed', value: 'Not Allowed'},
        ];
      }
      return context.defaultValues;
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['FreeTextColumn', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['Layout', 'Export'],
        },
      ],
    },
    FreeTextColumn: {
      FreeTextColumns: [
        {
          ColumnId: 'opsNote',
          FriendlyName: 'Ops Note',
          FreeTextStoredValues: [
            {PrimaryKey: 24195339, FreeText: 'Used by US team'},
            {PrimaryKey: 224663696, FreeText: 'Favourite for demos'},
            {PrimaryKey: 82095231, FreeText: 'Required by Support'},
          ],
          FreeTextColumnSettings: {
            DataType: 'text',
            Resizable: true,
          },
        },
        {
          ColumnId: 'status',
          FriendlyName: 'Status',
          FreeTextColumnSettings: {
            DataType: 'text',
            Filterable: true,
          },
          FreeTextStoredValues: [
            {PrimaryKey: 10270250, FreeText: 'Preferred'},
            {PrimaryKey: 24195339, FreeText: 'Preferred'},
            {PrimaryKey: 74293321, FreeText: 'Allowed'},
            {PrimaryKey: 224663696, FreeText: 'On-boarding'},
            {PrimaryKey: 76694515, FreeText: 'Not Allowed'},
          ],
        },
        {
          ColumnId: 'lastSpoken',
          FriendlyName: 'Last Spoken',
          FreeTextStoredValues: [
            {PrimaryKey: 24195339, FreeText: new Date(2021, 5, 7)},
            {PrimaryKey: 10270250, FreeText: new Date(2024, 2, 12)},
            {PrimaryKey: 224663696, FreeText: new Date(2023, 10, 1)},
          ],
          FreeTextColumnSettings: {
            DataType: 'date',
          },
        },
        {
          ColumnId: 'isUsed',
          FriendlyName: 'In Use',
          DefaultValue: false,
          FreeTextStoredValues: [
            {PrimaryKey: 10270250, FreeText: true},
            {PrimaryKey: 24195339, FreeText: true},
            {PrimaryKey: 224663696, FreeText: true},
            {PrimaryKey: 82095231, FreeText: true},
          ],
          FreeTextColumnSettings: {
            DataType: 'boolean',
            Filterable: true,
          },
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-lastSpoken',
          Scope: {ColumnIds: ['lastSpoken']},
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'yyyy/MM/dd',
            },
          },
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          Name: 'status Badge',
          ColumnId: 'status',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Preferred'],
                },
                PillStyle: {
                  BackColor: 'Green',
                  ForeColor: 'White',
                },
              },
              {
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Allowed', 'On-boarding'],
                },
                PillStyle: {
                  BackColor: 'Orange',
                  ForeColor: 'White',
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Not Allowed'],
                },
                PillStyle: {
                  BackColor: 'Red',
                  ForeColor: 'White',
                },
              },
            ],
          },
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'opsNote',
            'status',
            'lastSpoken',
            'isUsed',
            'language',
            'license',
            'github_stars',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Read-only

Loading demo…

Try It Out

Click the FreeText Column Dashboard button to open the FreeText Columns section of the Settings Panel to review the definitions
Edit an Ops Note cell — the value sticks with AdapTable State, not the underlying row data
Change a Status via the dropdown and watch the Badge colour update
Open the date picker on Last Spoken and notice the yyyy/MM/dd display format
Toggle In Use checkboxes and try filtering that column
Use Add in the Free Text Columns section if you want to create another column via the Wizard

Why Free Text Columns Help

For product and ops teams, Free Text Columns are less about “another column type” and more about keeping working knowledge next to the data:

Ops notes without polluting the database — working notes belong in the grid session / user state
Lightweight workflow fields — status, flags, “spoken to client on…” dates
Same Layout story — Free Text Columns sit in the Layout like other columns (pin, hide, reorder)
Familiar editing — text, number, date and boolean each get the right cell editor

Note

For developers, Free Text Columns are declared in Initial State (or created at run-time)
They can be updated at run-time via the FreeTextColumn API — with clear replace rules

The AdapTable Full Feature Set

Because of the richness and range of the functionality it offers, AdapTable provides other features that operate in a similar space.

As this sometimes confuses users, we explain here what each feature does and when to use it:

Free Text vs Calculated Columns

Both are special columns which AdapTable creates for you.

However there is a significant difference between them:

Calculated Columns evaluate using an AdapTable QL expression so the column value is dynamically generated
Free Text Columns store user-entered values

Hint

Use Calculated when the number must stay in sync with other fields
Use Free Text when the user owns the value

Free Text vs Notes

AdapTable provides a Notes feature: personal cell annotations also shared in AdapTable State.

Although Free Text Columns can also be used for "annotations", they have wider potential usage and footprint.

Most importantly, Free Text is a full column of editable values — filterable, sortable and Layout-visible — not a sticky on one cell.

Free Text vs Comments

Another "annotations-based" feature is Comments.

Unlike Notes which are personal, Comments are collaborative threads on a cell (and are persisted in remote storage provided by the User, not in AdapTable State).

Hint

Free Text is column-shaped (one value per row)
Notes and Comments annotate a single cell — different tools for different jobs

You need…	Use
An editable column whose values stay with the user	Free Text Column
A value derived from other columns	Calculated Column
A prettier look for an existing data column	Styled Column (e.g. Badges)
A private reminder on one cell	Note
A shared discussion on one cell	Comment

Formatting Free Text Columns

Because Free Text Columns are “real” columns once created, the full formatting toolkit applies.

In our demo we have leveraged this for 3 of the Free Text Columns:

Capability	In this demo
Badge Style	`Status` pills (Preferred / Allowed / On-boarding / Not Allowed)
Display Format	`Last Spoken` as `yyyy/MM/dd`
Select Cell Editor	Controlled `Status` values

In the Demo

Badges in the Status column are configured like any other Styled Column:

StyledColumn: {
  StyledColumns: [
    {
      Name: 'status Badge',
      ColumnId: 'status',
      BadgeStyle: {
        Badges: [
          /* Preferred → green, Allowed/On-boarding → orange, Not Allowed → red */
        ],
      },
    },
  ],
},

Hint

Pair Free Text + Badges when you want a user-maintained status field with a “productised” grid feel

Creating & Configuring

Run-time users manage Free Text Columns in the Free Text Columns section of the Settings Panel (opened via the Free Text Column Module Button in this demo).

This opens a short Wizard: Id, name, data type, default value and column properties.

Design-time developers typically provide Free Text Columns in Initial State — optionally with FreeTextStoredValues keyed by primary key, and a DefaultValue for empty cells.

Find Out More

See Configuring Free Text Columns for Initial State examples
The page also shows setStoredValues API (with All/Conflicting/None replace behaviour)

FAQ

Where are Free Text values stored? In the user’s Adaptable State (local or remote, depending on how you persist State) — never in the grid Data Source

Can I format Free Text Columns? Yes. Treat them like any other column: Format Column, Styled Column (including Badges), filters, sorts and Layout options all apply

How is this different from Notes or Comments? Notes and Comments attach to a single cell. Free Text adds a whole column of values that users edit like normal cells

Do Free Text Columns work with auto-generated primary keys? No — Free Text requires a stable Primary Key so values can be keyed reliably across sessions

Can developers set values from code? Yes — use Free Text Column API methods such as setStoredValue / setStoredValues (see the configuring handbook for a live API demo)

AdapTable Free Text Columns

Important

Hint

In the Demo

Why Free Text Columns Help

Note

The AdapTable Full Feature Set

Free Text vs Calculated Columns

Hint

Free Text vs Notes

Free Text vs Comments

Hint

Formatting Free Text Columns

In the Demo

Hint

Creating & Configuring

Find Out More

FAQ

AdapTable Resources