Configuring Data Change History

Summary

Set how Data Change History works and what is tracked

Data Change History is configured in the Data Change History Options section of Adaptable Options.

It includes all the properties required to set up tracking changes to meet your requirements.

Making Active by Default

By default Data Change History tracking is inactive, and needs to be explicitly activated in the UI.

This can be changed via the activeByDefault property.

activeByDefault

Default: false

Boolean

Whether Data Change history should be Active by default

Limiting Data Changes

Another useful property is showDataChange which allows you to specify which data changes to monitor.

Hint

This is useful when want to display changes only in certain columns or user edits and not ticking data changes

showDataChange

Function which specifies which Data Changes should be displayed in Data Changes Monitor

This function provides details of the Data Change and lets developers specify whether that change should be included in the Data Change screen.

Note

The default value is undefined - which means that by default all data changes are logged

showDataChange?: (cellDataChangedInfo: CellDataChangedInfo) => boolean;

The function receives a CellDataChangedInfo object (defined below) and returns a boolean:

Property	Type	Description
changedAt	`number`	Timestamp of change occurrence (in milliseconds)
column	`AdaptableColumn<TData>`	Column in which cell is situated
newValue	`any`	New value for the cell
oldValue	`any`	Value in the Cell before the edit
preventEdit	`boolean`	Whether the change was prevented by a validation rule
primaryKeyValue	`any`	Primary Key Column's value for the row where edited cell is situated
rowData	`TData`	Data in the Row
rowNode	`IRowNode<TData>`	AG Grid RowNode that contains the cell
trigger	`'edit' \| 'tick' \| 'undo' \| 'aggChange' \| 'calculatedColumnChange'`	What triggered the change - user, background change, a reverted change, or a derived update on a Calculated Column whose source value changed?

For instance to monitor only user edits (and not 'ticking' data changes) you can do:

const adaptableOptions: AdaptableOptions = {
  dataChangeHistoryOptions: {
    showDataChange: (cellDataChangedInfo: CellDataChangedInfo) => {
      return cellDataChangedInfo.trigger == 'edit';
    },
  },
};

Data Change History: Limiting Changes

Fork Fork

In this example we have provided an implementation for the showDataChange function
It is configured so that the Data Changes Monitor will exclude:
- ticking data changes (i.e. just direct data edits are displayed)
- data edits for the Updated or Language columns

See the configured Data Change History Options properties

dataChangeHistoryOptions: {
  activeByDefault: true,
  showDataChange: (cellDataChangeInfo: CellDataChangedInfo) => {
    if (cellDataChangeInfo.trigger !== 'edit') {
      return false;
    }
    return (
      cellDataChangeInfo.column.columnId !== 'updated_at' &&
      cellDataChangeInfo.column.columnId !== 'language'
    );
  },
},

Try It Out

Click the Configure button in the Data Change History Toolbar to open the Data Changes Monitor
Edit the Updated or Language column in the grid and note that the edit does not appear in the History Log

Loading demo…

Show All Data Changes

By default only the last change for each Cell is displayed in the Data Change History Monitor.

If this behaviour is not wanted, then set the showLastDataChangeOnly property to false in order to see every change for each Cell.

showLastDataChangeOnly

Default: true

Boolean

Whether to show all changes for each cell or just the last one

This property allows you to set the Data Change History Monitor to show all changes to a Cell, rather than just the last one (the default behaviour).

// Show all changes for every Cell
const adaptableOptions: AdaptableOptions = {
  dataChangeHistoryOptions: {
    showLastDataChangeOnly: false
  },
};

Data Change History: Showing all Changes

Fork Fork

In this example we show all changes for Cells by setting showLastDataChangeOnly to true
We update Github Stars in first row 3 times and then open the Data Change History Monitor to see all the changes

Loading demo…

Limiting Data Changes in Store

By default AdapTable retains every logged data change in State indefinitely.

This is fine if you are tracking user edits, but the store can grow unboundedly when tracking ticking data.

Use the maxDataChangesInStore property to cap the number of changes held in memory at any one time.

Hint

When the cap is reached, the oldest change is dropped as each new change is logged
This ensures that the store never exceeds the size you configure

maxDataChangesInStore

Default: undefined

Number

Maximum number of Data Changes to retain in State; oldest changes are removed once the limit is reached

Set this property to cap the size of the Data Change History store.

const adaptableOptions: AdaptableOptions = {
  dataChangeHistoryOptions: {
    maxDataChangesInStore: 8,
  },
};

Note

When maxDataChangesInStore is undefined (the default) no cap is applied and every logged change is retained

Data Change History: Capping Store Size

Fork Fork

In this example we set maxDataChangesInStore to 8 and drive continuous ticking updates
Each tick picks a random row and a random column (Github Stars, Github Watchers, Open Issues Count or Updated At) so log entries are visibly varied
The Data Change History Monitor opens automatically so you can watch entries accumulate
Once 8 entries are in the log, each new tick causes the oldest entry to drop off — the log never grows past 8 (leaving visible empty space underneath)

See the configured Data Change History Options properties

Try It Out

Watch the Data Change History Monitor as ticking updates arrive
The list fills up to 8 entries and then holds steady — each new change pushes the oldest one out

Loading demo…

PreviousData Change History Actions NextTechnical Reference