Configuring Notes

Summary

Developers can configure which Cells in the Grid are able to receive Notes
Additionally, they can override the CSS to theme Notes to match bespoke requirements

Notable Cells

By default all cells in AG Grid - even readonly ones - can receive a Note.

But developers are able to use the isCellNotable property in Note Options to specify on a cell by cell basis whether or not a Note can be added.

Configuring Notable Cells

Fork Fork

This example contains an implementation for the isCellNotable property in Note Options which prevents Notes from being added to Cells:
- in the Language Column
- in Rows where the value in the License Column is "Other"

Expand to see the function implementation

noteOptions: {
  isCellNotable: (context: NotableCellContext) => {
    // Dont allow Notes on the Language Column or Rows where License is 'Other'
   if (
      context.gridCell.column.columnId === 'language' ||
      context.gridCell.rowNode.data['license'] === 'Other'
    ) {
      return false;
    }
    return true;
  },
}

Theming Notes

Like everything in AdapTable, Notes can be custom themed using CSS Variables.

A common use case is changing the colour of the triangle in a cell denoting a Note (from the default of blue).

Note

Technically AdapTable uses the value of the --ab-color-accent variable, which itself can be overridden

All that is required is to provide a different value for the --ab-CellNote-triangle-color CSS variable.

Notes CSS

Fork Fork

In this demo we have overridden 3 CSS Variables so that
- the triangle in a Notes cell is yellow
- the Notes popup is a light yellow background with black font

Expand to see the CSS provided

import {
  AdaptableOptions,
  CustomContextMenuContext,
} from '@adaptabletools/adaptable';

import {WebFramework} from './rowData';
import {
  AdaptableContextMenuItemName,
  AdaptableSystemContextMenuItem,
} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Notes CSS',
  userName: 'Demo User',
  contextMenuOptions: {
    customContextMenu: (customMenuContext: CustomContextMenuContext) => {
      return customMenuContext.defaultAdaptableMenuStructure
        .filter(
          (
            item
          ): item is AdaptableSystemContextMenuItem<AdaptableContextMenuItemName> =>
            item !== '-'
        )
        .filter(item => item.category === 'Note');
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Note'],
    },
    Theme: {CurrentTheme: 'dark'},

    Note: {
      Notes: [
        {
          PrimaryKeyValue: 10270250,
          Text: 'We are using this Framework',
          ColumnId: 'name',
          Timestamp: new Date().setDate(new Date().getDate() - 1),
        },
        {
          PrimaryKeyValue: 11730342,
          Text: 'Popular with the Accounts team',
          ColumnId: 'name',
          Timestamp: new Date().setDate(new Date().getDate() - 2),
        },
        {
          PrimaryKeyValue: 82095231,
          Text: 'Need to find out Stencil license',
          ColumnId: 'license',
          Timestamp: new Date().setDate(new Date().getDate() - 3),
        },
        {
          PrimaryKeyValue: 5532320,
          Text: 'Need to find out Polymer license',
          ColumnId: 'license',
          Timestamp: new Date().setDate(new Date().getDate() - 4),
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'github_watchers',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'description',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousNotes NextTechnical Reference