AdapTable Version:

Framework:

Styling Editable, Read-Only & Edited Cells

Summary

AdapTable allows developers to specify which cells in AG Grid are editable or read-only
Both these types of cells (as well as previously edited) can be specifically styled for easy identification

You might wish to visually indicate to your users which Cells in AG Grid are editable or read-only.

This is particularly the case if editability is set at the Grid Cell, rather than Column, level.

Find Out More

See Pre Edit Validation for instructions on using isCellEditable function in Edit Options to set cell level editability
This takes precedence over ColDef.editable in Grid Options - see Setting Cell Editability Tutorial for more details

Additionally you might want to show which cells have been edited (with an option to undo the edit).

Styling can be provided via 3 parallel functions in User Interface Options:

Hint

Typically users will provide one, but not both, of the first 2 functions

editableCellStyle sets the style for editable cells
readOnlyCellStyle sets the style for readonly cells
editedCellStyle sets the style for edited cells

All 3 functions use the commonly used Adaptable Style object which can style a Cell in many ways.

Styling Editable Cells

Use the editableCellStyle property to set a Style for all editable Cells in the Grid.

editableCellStyle

AdapTableStyle

Adaptable Style to apply to Editable Cells

AdapTableStyle

You can apply a style to Cells which are deemed to be Editable.

The style is of type Adaptable Style - an object used in many places to create a Cell style:

Property	Description
Alignment	Align to `Left`, `Right` or `Center`
BackColor	Colour background of cell: hex, rgb(a) or name
BorderColor	Colour of cell border: hex, rgb(a) or name
BorderRadius	Rounds corners of an element's outer border edge; equivalent of CSS border-radius
ClassName	Existing CSS Class; use instead of setting other object properties
FontSize	Size of font: `XSmall`, `Small`, `Medium`, `Large` or `XLarge`
FontStyle	Style of font: `Normal` or `Italic`
FontWeight	Weight of font: `Normal` or `Bold`
ForeColor	Font colour in cell: hex, rgb(a) or name
TextDecoration	Decoration of font: `None`, `Underline`, `Overline` or `LineThrough`

// Set Editable Cells to be gray and italicised
const adaptableOptions: AdaptableOptions = {
    userInterfaceOptions: {
        editableCellStyle: {
          FontStyle: 'Italic',
          ForeColor: 'Gray',
        },
     ],
   }
}

Styling Editable Cells

Fork Fork

In this example we provide an editableCellStyle (in User Interface Options) of a yellow border with a radius so that editable cells to be readily identified
We also provide 3 Editable cell Rules - set using isCellEditable property in Edit Options:
- All cells in a row where Language cell value is HTML are editable
- GitHub Watchers is editable for cells with a value over 1,000
- Issue Change is always editable

Expand to see the Adaptable Options code

The Cell Editable Rules are created in Edit Options:

editOptions: {
  isCellEditable: (cellEditableContext: CellEditableContext) => {
    const gridCell: GridCell = cellEditableContext.gridCell;
    if (!gridCell || !gridCell.column) {
      return false;
    }
    // Editable where 'Language' is 'HTML'
    if (gridCell.rowNode.data['language'] === 'HTML') {
      return true;
    }

    // Github Watchers editable if > 1000
    if (gridCell.column.columnId === 'github_watchers') {
      if (gridCell.rawValue > 1000) {
        return true;
      }
    }

    // Week Issue Change always Editable
    if (gridCell.column.columnId === 'week_issue_change') {
      return true;
    }

    return false;
  },
},

And the style is created in User Interface Options:

userInterfaceOptions: {
 editableCellStyle: {
    BorderColor: 'LightYellow',
    BorderRadius: 6,
  },
},

Styling Read-Only Cells

Use the readOnlyCellStyle property to set a Style for all read-ony Cells in the Grid.

Deep Dive

How AdapTable asseses whether a Cell is Read-Only

readOnlyCellStyle

AdapTableStyle

Adaptable Style to apply to Read Only Cells

AdapTableStyle

You can apply a style to Cells which are deemed to be Read Only.

The style is of type Adaptable Style - an object used in many places to create a Cell style:

Property	Description
Alignment	Align to `Left`, `Right` or `Center`
BackColor	Colour background of cell: hex, rgb(a) or name
BorderColor	Colour of cell border: hex, rgb(a) or name
BorderRadius	Rounds corners of an element's outer border edge; equivalent of CSS border-radius
ClassName	Existing CSS Class; use instead of setting other object properties
FontSize	Size of font: `XSmall`, `Small`, `Medium`, `Large` or `XLarge`
FontStyle	Style of font: `Normal` or `Italic`
FontWeight	Weight of font: `Normal` or `Bold`
ForeColor	Font colour in cell: hex, rgb(a) or name
TextDecoration	Decoration of font: `None`, `Underline`, `Overline` or `LineThrough`

// Set ReadOnly Cells to have a brown border
const adaptableOptions: AdaptableOptions = {
    userInterfaceOptions: {
        readOnlyCellStyle: {
          BorderColor: 'Brown',
        },
     ],
   }
}

Styling Read-Only Cells

Fork Fork

In this example we provide a readOnlyCellStyle (in User Interface Options) of a gray background so that read-only cells can be readily identified
We provide 3 Read-only cell Rules - set using isCellEditable property in Edit Options (same as in above example but inverted):
- All cells in a row where Language cell value is HTML are read-only
- GitHub Watchers is read-only for cells with a value over 1,000
- Issue Change is always read-only

Expand to see the Adaptable Options code

The Cell Editable Rules are created in Edit Options:

editOptions: {
  isCellEditable: (cellEditableContext: CellEditableContext) => {
    const gridCell: GridCell = cellEditableContext.gridCell;
    if (!gridCell || !gridCell.column) {
      return false;
    }
    // Read-Only where 'Language' is 'HTML'
    if (gridCell.rowNode.data['language'] === 'HTML') {
      return false;
    }

    // Github Watchers read-only if > 1000
    if (gridCell.column.columnId === 'github_watchers') {
      if (gridCell.rawValue > 1000) {
        return false;
      }
    }

    // Week Issue Change always read-only
    if (gridCell.column.columnId === 'week_issue_change') {
      return false;
    }

    return true;
  },
},

And the style is created in User Interface Options:

userInterfaceOptions: {
  readOnlyCellStyle: {
   BackColor: 'Gray',
  },
},

Styling Edited Cells

Use the editedCellStyle property to set a Style for all Cells in the Grid which have been edited.

Hint

AdapTable leverages Data Change History to monitor which Cells have been edited, so ensure that is turned on

editedCellStyle

AdapTableStyle

Adaptable Style to apply to Edited Cells

AdapTableStyle

You can apply a style to Cells which have been edited in the current session (and placed in the Data Change History Log).

// Set Edited Cells to have a brown border
const adaptableOptions: AdaptableOptions = {
    userInterfaceOptions: {
        editedCellStyle: {
          BorderColor: 'Brown',
        },
     ],
   }
}

The style is of type Adaptable Style - an object used in many places to create a Cell style:

Property	Description
Alignment	Align to `Left`, `Right` or `Center`
BackColor	Colour background of cell: hex, rgb(a) or name
BorderColor	Colour of cell border: hex, rgb(a) or name
BorderRadius	Rounds corners of an element's outer border edge; equivalent of CSS border-radius
ClassName	Existing CSS Class; use instead of setting other object properties
FontSize	Size of font: `XSmall`, `Small`, `Medium`, `Large` or `XLarge`
FontStyle	Style of font: `Normal` or `Italic`
FontWeight	Weight of font: `Normal` or `Bold`
ForeColor	Font colour in cell: hex, rgb(a) or name
TextDecoration	Decoration of font: `None`, `Underline`, `Overline` or `LineThrough`

Styling Edited Cells

Fork Fork

In this example we provide a editedCellStyle (in User Interface Options) of a gray background so that edited cells can be readily identified
We set Data Change History to be active by default and programatically edit 2 cells in the Language column

Expand to see the code used

The Data Change Monitor is automatically turned on in order to ensure Edits are tracked by AdapTable:

dataChangeHistoryOptions: {
  activeByDefault: true,
},

The Edited Cell Style is created in User Interface Options:

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

Find Out More

The Undoing Data Edits demo illustrates adding a custom Context Menu Item to edited cells to undo the edit

PreviousDisplaying Toast Notifications NextRendering Custom Popups

Framework:

Styling Editable, Read-Only & Edited Cells

Summary

Find Out More

Hint

Styling Editable Cells

editableCellStyle

Expand to see the Adaptable Options code

Styling Read-Only Cells

Deep Dive

How AdapTable asseses whether a Cell is Read-Only

Caution

readOnlyCellStyle

Expand to see the Adaptable Options code

Styling Edited Cells

Hint

editedCellStyle

Expand to see the code used

Find Out More