How to Spot, and Undo, Cell Edits

Feedback

This Blog post, and accompanying demo, was inspired by an AdapTable Help Ticket
If you have an AdapTable or AG Grid use case that you are struggling to meet, please contact us

Request

A user contacted us, asking what is the best way of achieving a 2-step action in AdapTable:

have some way of visually indicating which Grid Cells have previously been edited
provide the ability for run-time users to undo any edit, so the Cell returns to the initial value

Solution

In response, we provide a small demo showing how this can easily be done in AdapTable.

Important

The demo uses only existing AdapTable API functions and Modules, with just a few lines of code
No bespoke effort or functions was required, and no need to build a a cache of changed cells

Our demo example ties together 3 separate, pre-existing, AdapTable functionalities:

data change monitoring so all data edits are automatically tracked by AdapTable
distinctive style for edited cells so they can easily be identified
custom Context Menu Item of Undo Edit (which only appears in edited cells) that reverts the data change

Note

The demo also makes extensive use of some of the many functions provided in the Adaptable API

Undoing Data Edits

Fork Fork

We turn on Data Change History and programatically edit first cell in the Language column to 'Python'
We provide an editedCellStyle of gray background with italics so that edited cells can be readily identified
We add a Custom Menu Item to Context Menu which appears only in edited cells, with onClick action to undo the edit

Try It Out

Open the Context Menu for the first cell in the Language column and click 'Undo Edit'
Edit additional Cells and then Undo the edit via the Context Menu

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Undoing Edited Cells',
  dataChangeHistoryOptions: {
    activeByDefault: true,
  },
  userInterfaceOptions: {
    editedCellStyle: {
      BackColor: 'Gray',
      FontStyle: 'Italic',
    },
  },
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      const undoEditMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label: 'Undo Edit',
        icon: {
          name: 'undo',
        },
        hidden: !adaptableApi.gridApi.isCellEdited(context.gridCell),
        onClick: () => {
          const dataChange =
            adaptableApi.dataChangeHistoryApi.getDataChangeForGridCell(
              context.gridCell
            );
          if (dataChange) {
            adaptableApi.dataChangeHistoryApi.undoDataChangeHistoryEntry(
              dataChange
            );
            adaptableApi.gridApi.refreshGridCell(context.gridCell);
          }
        },
      };

      return [
        undoEditMenuItem,
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['DataChangeHistory'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'week_issue_change',
            'github_watchers',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Data Change History Monitor

The first thing we did in our demo was to turn on the Data Change History Monitor.

This automatically tracks all data changes in AdapTable - both user edits and ticking data.

Note

Typically users leverage the UI component provided by the Monitor to see a list of data changes
In our case this not necessary as we are styling the cells, so we just need to access the list

By default the Data Change Monitor is turned off, so a simple change was required in Data Change History Options:

dataChangeHistoryOptions: {
  activeByDefault: true,
},

Edited Cell Style

Next we configured the editedCellStyle property in User Interface Options to provide a bespoke, visual style for all Cells that have been edited.

This property allows you to create a custom Adaptable Style for all edited cells in AG Grid.

Hint

You can also provide custom styles for editable cells and readonly cells
See the UI Guide to styling Editable, Read-Only & Edited Cells for for more information

We create an edited cell style of italicised white font on a gray background:

userInterfaceOptions: {
  editedCellStyle: {
    BackColor: 'Gray',
    FontStyle: 'Italic'
  },
},

The last piece of the jigsaw was to create a Custom Context Menu Item called "Undo Edit" which appears in edited Cells and rolls back the Edit.

Hint

It it straightforward in AdapTable to add new menu items to both the Column Menu and Context Menu

The Custom Menu Item's onClick prop performs 3 actions (all using Adaptable API functions):

retrieves the Data Change History Item associated with that cell
undoes the Change History Item (essentially reverting the edit)
refreshes the Grid Cell (which will remove the edited cell style)

Note

The Menu Item displays the undo Adaptable System Icon
We also leverage isCellEdited in Grid API to ensure the Menu Item only appears in edited Cells

const undoEditMenuItem: UserContextMenuItem = {
  menuType: 'User',
  label: 'Undo Edit',
  icon: {
    name: 'undo',
  },
  hidden: !adaptableApi.gridApi.isCellEdited(context.gridCell),
  onClick: () => {
    const change: CellDataChangedInfo =
      context.adaptableApi.dataChangeHistoryApi.getDataChangeForGridCell(
        context.gridCell
      );
    if (change) {
      context.adaptableApi.dataChangeHistoryApi.undoDataChangeHistoryEntry(
        change
      );
      adaptableApi.gridApi.refreshGridCell(context.gridCell);
    }
  },
};

Editing cells using Smart Edit, which we then clear using a Custom Context Menu Item

Video

Undoing Cell Edits

(Recorded with AdapTable v21.2)

How to Spot, and Undo, Cell Edits

Feedback

Request

Solution

Important

Note

Data Change History Monitor

Note

Edited Cell Style

Hint

Context Menu Item

Hint

Note

Video

Undoing Cell Edits

AdapTable Resources