Highlighting and Jumping

Summary

AdapTable provides methods in Grid API which allows the user to highlight given cells, columns and rows
The Highlight uses the AdapTable Style object
AdapTable also provides Grid API methods which allows the user to jump to given cells, columns and rows

The Grid API section of AdapTable API includes many useful Grid related functions.

These include functions which facilitate 2 useful, often connected, Grid-related activities:

highlighting cells and rows
jumping to columns, rows and cells

Highlighting

There are a number of Grid API functions which facilitate cell, row and column highlighting:

highlightCell
unHighlightCell
unHighlightAllCells
highlightColumn
unHighlightColumn
unHighlightAllColumns
highlightRow
highlightRows
unHighlightRow
unHighlightRows
unHighlightAllRows

Highlighting Cells and Rows

Fork Fork

This demo provides examples of highlighting and unhlighting using the Grid API (using 3 Custom Toolbar Buttons):
- First button calls highlightCell function to highlight the Name cell for ember.js row with a white fore colour and purple back colour (with a timeout of 5 seconds)
- Second button calls highlightRow function to highlight the whle row for Solid with a gray fore colour and brown back colour
- Third button calls unHighlightRow function for Solid row which clears the highlight
- Fourth button calls HighlightColumn function for for Github Stars column (with timeout of 3 seconds)

import {
  AdaptableButton,
  AdaptableOptions,
  CellHighlightInfo,
  CustomToolbarButtonContext,
  RowHighlightInfo,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Highlighting API',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Highlight "ember.js" (5 secs)',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              // Highlight a cell for 5 seconds
              const cellHighlightInfo: CellHighlightInfo = {
                columnId: 'name',
                primaryKeyValue: 1801829,
                timeout: 5000,
                highlightStyle: {
                  BackColor: 'Purple',
                  ForeColor: 'White',
                },
              };
              context.adaptableApi.gridApi.highlightCell(cellHighlightInfo);
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
          {
            label: 'Highlight "solid" Row',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const rowHighlightInfo: RowHighlightInfo = {
                primaryKeyValue: 130884470,
                highlightStyle: {
                  BackColor: 'Brown',
                  ForeColor: 'Gray',
                },
              };
              context.adaptableApi.gridApi.highlightRow(rowHighlightInfo);
            },
            buttonStyle: {
              tone: 'success',
              variant: 'text',
            },
          },
          {
            label: 'Unighlight "solid" Row',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.gridApi.unHighlightRow(130884470);
            },
            buttonStyle: {
              tone: 'warning',
              variant: 'text',
            },
          },
          {
            label: 'Highlight Github Watchers Column (3 secs)',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.gridApi.highlightColumn({
                columnId: 'github_watchers',
                highlightStyle: {
                  BackColor: 'Brown',
                  ForeColor: 'Gray',
                },
                timeout: 3000,
              });
            },
            buttonStyle: {
              tone: 'error',
              variant: 'text',
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['ButtonToolbar'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'github_watchers',
            'updated_at',
            'pushed_at',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Style

Each highlight function receives a commonly used Adaptable Style object which contains numerous properties, allowing for full control over how the highlight looks.

Timeout

The highlight functions can be provided with a timeout specifying how long the cell or row will remain highlighted.

Deep Dive

Highlight Info Objects and Styles

The highlight functions receive a CellHighlightInfo or a RowHighlightInfo object as needed.

Both provide details of the Cell / Row to be highlighted and the Adaptable Style to use

The CellHighlightInfo object is defined as follows:

Property	Description
columnId	Id of Column containing Cell
highlightStyle	Adaptable Style to use in the Cell Highlight
primaryKeyValue	Primary Key Value of row containing Cell
timeout	Time after which Cell should be unhighlighted

The RowHighlightInfo is defined as follows:

Property	Description
highlightStyle	Highlight style
primaryKeyValue	Primary key value for the row to be highlighted
timeout	Timeout after which Row should be unhighlighted

Both objects contain a highlightStyle property of type AdaptableStyle which has these properties:

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`

Jumping

The Grid API section of AdapTable API contains 3 functions that enable moving the focus in the Grid to specific cells, rows or columns:

jumpToRow
jumpToColumn
jumpToCell

Jumping to Cells and Rows

Fork Fork

This demo provides examples of "jumping" using the Grid API
We provide 3 Custom Toolbar Buttons which each call a jump-related function:
- First button calls jumpToCell function to jump to Created At in the Quasar row (the last row in the grid)
- Second button calls jumpToRow function to jump to Angular row (2nd from top)
- Third button calls jumpToColumn function to jump to the Issue Change column (at the far end of the grid)
Additionally we provide a Custom Context Menu Item that displays all Columns in the Grid, and AdapTable will jump to the Column selected

import {
  AdaptableButton,
  AdaptableColumn,
  AdaptableOptions,
  CellHighlightInfo,
  CustomContextMenuContext,
  CustomToolbarButtonContext,
  RowHighlightInfo,
  UserContextMenuItem,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Jumping Functions',
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      const columnNameMenuItems: UserContextMenuItem[] = adaptableApi.columnApi
        .getVisibleColumns()
        .map((c: AdaptableColumn) => {
          return {
            menuType: 'User',
            label: c.friendlyName,
            onClick: () => {
              adaptableApi.gridApi.jumpToColumn(c.columnId);
            },
          };
        });

      const jumpToColumnMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label: 'Jump To',
        icon: {
          name: 'greater-than',
        },
        subMenuItems: columnNameMenuItems,
      };

      return [
        jumpToColumnMenuItem,
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Jump to "Qasar" / Created At',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.gridApi.jumpToCell(43695474, 'created_at');
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
          {
            label: 'Jump to "Angular" Row',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.gridApi.jumpToRow(24195339);
            },
            buttonStyle: {
              tone: 'success',
              variant: 'text',
            },
          },
          {
            label: 'Jump to "Issue Change" Column',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.gridApi.jumpToColumn('week_issue_change');
            },
            buttonStyle: {
              tone: 'warning',
              variant: 'text',
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['ButtonToolbar'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'github_watchers',
            'updated_at',
            'pushed_at',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousTransposing

Framework: