angular-slickgrid 9.0.0 → 9.0.2

package/docs/grid-functionalities/Context-Menu.md

@@ -1,226 +0,0 @@
-#### index
-- [Default Usage](#default-usage)
-- [Action Callback Methods](#action-callback-methods)
-- [Override Callback Methods](#override-callback-methods)
-- [How to add Translations](#how-to-add-translations)
-- [Default Internal Commands](#default-internal-commands)
-- [Show only over Certain Columns](https://github.com#show-menu-only-over-certain-columns)
-- [How to Disable Context Menu](#how-to-disable-the-context-menu)
-- [UI Sample](#ui-sample)
-
-### Demo
-
-#### Context Menu with Grouping
-[Context Menu Demo](https://ghiscoding.github.io/Angular-Slickgrid/#/context) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-contextmenu.component.ts)
-
-[Grouping Demo](https://ghiscoding.github.io/Angular-Slickgrid/#/grouping) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-grouping.component.ts)
-
-### Description
-A Context Menu is triggered by a mouse right+click and can show a list of Commands (to execute an action) and/or Options (to change the value of a field). The lib comes with a default list of custom commands (copy cell, export & grouping commands). Also note that the Commands list is following the same structure used in the [Cell Menu](../column-functionalities/Cell-Menu.md), [Header Menu](Header-Menu-&-Header-Buttons.md) & [Grid Menu](Grid-Menu.md). Very similar to the [Cell Menu](../column-functionalities/Cell-Menu.md), they were both created as SlickGrid plugins during the same period, their main difference is that they get triggered differently (mouse right+click vs cell click) and they serve different purposes. The Cell Menu is more oriented on a row action (e.g. delete current row) while the Context Menu is all about actions for the entire grid (e.g. export to Excel).
-
-This extensions is wrapped around the new SlickGrid Plugin **SlickContextMenu**
-
-### Default Usage
-Technically, the Context Menu is enabled by default (copy, export) and so you don't have anything to do to enjoy it (you could disable it at any time). However, if you want to customize the content of the Context Menu, then continue reading. You can customize the menu with 2 different lists, Commands and/or Options, they can be used separately or at the same time. Also note that even though the code shown below makes a separation between the Commands and Options, you can mix them in the same Context Menu.
-
-#### with Commands
-
-```ts
-this.gridOptions = {
-  enableFiltering: true,
-  enableContextMenu: true, // enabled by default
-  contextMenu: {
-    hideCloseButton: false,
-    commandTitle: 'Commands', // optional, add title
-    commandItems: [
-      'divider',
-      { divider: true, command: '', positionOrder: 60 },
-      {
-        command: 'command1', title: 'Command 1', positionOrder: 61,
-        // you can use the "action" callback and/or use "onCommand" callback from the grid options, they both have the same arguments
-        action: (e, args) => {
-          console.log(args.dataContext, args.column); // action callback.. do something
-        }
-      },
-      { command: 'help', title: 'HELP', iconCssClass: 'mdi mdi-help-circle', positionOrder: 62 },
-      // you can add sub-menus by adding nested `commandItems`
-      {
-         // we can also have multiple nested sub-menus
-         command: 'export', title: 'Exports', positionOrder: 99,
-         commandItems: [
-           { command: 'exports-txt', title: 'Text (tab delimited)' },
-           {
-              command: 'sub-menu', title: 'Excel', cssClass: 'green', subMenuTitle: 'available formats', subMenuTitleCssClass: 'text-italic orange',
-              commandItems: [
-                { command: 'exports-csv', title: 'Excel (csv)' },
-                { command: 'exports-xlsx', title: 'Excel (xlsx)' },
-             ]
-           }
-         ]
-      },
-    ],
-  }
-};
-```
-
-#### with Options
-That is when you want to define a list of Options (only 1 list) that the user can choose from and once is selected we would do something (for example change the value of a cell in the grid).
-
-```ts
-this.gridOptions = {
-  contextMenu: {
-    hideCloseButton: false,
-    optionTitle: 'Change Effort Driven Flag', // optional, add title
-    optionItems: [
-      { option: true, title: 'True', iconCssClass: 'mdi mdi-check-box-outline' },
-      { option: false, title: 'False', iconCssClass: 'mdi mdi-checkbox-blank-outline' },
-      { divider: true, command: '', positionOrder: 60 },
-    ],
-    // subscribe to Context Menu onOptionSelected event (or use the "action" callback on each option)
-    onOptionSelected: (e, args) => {
-      // change Priority
-      const dataContext = args && args.dataContext;
-      if (dataContext && dataContext.hasOwnProperty('priority')) {
-        dataContext.priority = args.item.option;
-        this.sgb.gridService.updateItem(dataContext);
-      }
-    },
-  }
-};
-```
-
-### Action Callback Methods
-There are 2 ways to execute an action after a Command is clicked (or an Option is selected), you could do it via the `action` callback or via the `onCommand` callback. You might be wondering why 2 and what's the difference? Well the `action` would have to be defined on every single Command/Option while the `onCommand` (or `onOptionSelected`) is more of a global subscriber which gets triggered every time any of the Command/Option is clicked/selected, so for that, you would typically need to use `if/else` or a `switch/case`... hmm ok but I still don't understand when would I use the `onCommand`? Let say you combine the Context Menu with the (Action) [Cell Menu](Cell-Menu.md) and some of the commands are the same, well, in that case, it might be better to use the `onCommand` and centralize your commands in that callback, while in most other cases if you wish to do only 1 thing with a command, then using the `action` might be better. Also, note that they could also both be used at the same time if you wish.
-
-So if you decide to use the `action` callback, then your code would look like this
-##### with `action` callback
-
-```ts
-contextMenu: {
-  commandItems: [
-    { command: 'command1', title: 'Command 1', action: (e, args) => console.log(args) }
-    { command: 'command2', title: 'Command 2', action: (e, args) => console.log(args) }
-    // ...
-  ]
-}
-```
-
-##### with `onCommand` callback
-```ts
-contextMenu: {
-  commandItems: [
-    { command: 'command1', title: 'Command 1' }
-    { command: 'command2', title: 'Command 2' }
-    // ...
-  ],
-  onCommand(e, args) => {
-    const columnDef = args.columnDef;
-    const command = args.command;
-    const dataContext = args.dataContext;
-
-    switch (command) {
-      case 'command1': alert('Command 1'); break;
-      case 'command2': alert('Command 2'); break;
-      default: break;
-    }
-  }
-}
-```
-
-### Override Callback Methods
-What if you want to dynamically disable or hide a Command/Option or even disable the entire menu in certain circumstances? For these cases, you would use the override callback methods, the method must return a `boolean`. The list of override available are the following
-- `menuUsabilityOverride` returning false would make the Context Menu unavailable to the user
-- `itemVisibilityOverride` returning false would hide the item (command/option) from the list
-- `itemUsabilityOverride` return false would disabled the item (command/option) from the list
-  - **note** there is also a `disabled` property that you could use, however it is defined at the beginning while the override is meant to be used with certain logic dynamically.
-
-For example, say we want the Context Menu to only be available on the first 20 rows of the grid, we could use the override this way
-
-```ts
-contextMenu: {
-  menuUsabilityOverride: (args) => {
-    const dataContext = args && args.dataContext;
-    return (dataContext.id < 21); // say we want to display the menu only from Task 0 to 20
-  },
-},
-```
-
-To give another example, with Options this time, we could say that we enable the `n/a` option only when the row is Completed. So we could do it this way
-```ts
-contextMenu: {
-  optionItems: [
-    {
-      option: 0, title: 'n/a', textCssClass: 'italic',
-      // only enable this option when the task is Not Completed
-      itemUsabilityOverride: (args) => {
-        const dataContext = args && args.dataContext;
-        return !dataContext.completed;
-      },
-    },
-    { option: 1, iconCssClass: 'mdi mdi-star-outline yellow', title: 'Low' },
-    { option: 2, iconCssClass: 'mdi mdi-star orange', title: 'Medium' },
-    { option: 3, iconCssClass: 'mdi mdi-star red', title: 'High' },
-  ]
-}
-```
-
-### How to add Translations?
-It works exactly like the rest of the library when `enableTranslate` is set, all we have to do is to provide translations with the `Key` suffix, so for example without translations, we would use `title` and that would become `titleKey` with translations, that;'s easy enough. So for example, a list of Options could be defined as follow:
-```ts
-contextMenu: {
-  optionTitleKey: 'COMMANDS', // optionally pass a title to show over the Options
-  optionItems: [
-    { option: 1, titleKey: 'LOW', iconCssClass: 'mdi mdi-star-outline yellow' },
-    { option: 2, titleKey: 'MEDIUM', iconCssClass: 'mdi mdi-star orange' },
-    { option: 3, titleKey: 'HIGH', iconCssClass: 'mdi mdi-star red' },
-  ]
-}
-```
-
-### Show Menu only over Certain Columns
-Say you want to show the Context Menu only when the user is over certain columns of the grid. For that, you could use the `commandShownOverColumnIds` (or `optionShownOverColumnIds`) array, by default these arrays are empty and when that is the case then the menu will be accessible from any columns. So if we want to have the Context Menu available only over the first 2 columns, we would have an array of those 2 column ids. For example, the following would show the Context Menu everywhere except the last 2 columns (priority, action) since they are not part of the array.
-```ts
-cellMenu: {
-  commandShownOverColumnIds: ['title', 'percentComplete', 'start', 'finish', 'completed'. /* 'priority', 'action' */],
-}
-```
-
-### Default Internal Commands
-By defaults, the Context Menu will come with a few different preset Commands (copy, export). The Copy is straightforward, it allows you to copy the cell value, on the other hand, the export command(s) is dependent on the flags you have enabled in your Grid Options. For example, if you have only `enableExport` then you will get the `Export to CSV` and you might get as well `Export Tab-Delimited`, again that depends on which Grid Options you have enabled. Note that all internal commands have a `positionOrder` in the range of 50 to 60 (which is used to sort the Commands list), this allows you to append or prepend Commands to the list.
-
-Another set of possible Commands would be related to Grouping, so if you are using Grouping in your grid then you will get 3 extra Commands (clear grouping, collapse groups, expand groups).
-
-All of these internal commands, you can choose to hide them and/or change their icons, the default global options are the following and you can change any of them.
-```ts
-contextMenu: {
-  autoAdjustDrop: true,
-  autoAlignSide: true,
-  hideCloseButton: true,
-  hideClearAllGrouping: false,
-  hideCollapseAllGroups: false,
-  hideCommandSection: false,
-  hideCopyCellValueCommand: false,
-  hideExpandAllGroups: false,
-  hideExportCsvCommand: false,
-  hideExportExcelCommand: false,
-  hideExportTextDelimitedCommand: true,
-  hideMenuOnScroll: true,
-  hideOptionSection: false,
-  iconCopyCellValueCommand: 'mdi mdi-content-copy',
-  iconExportCsvCommand: 'mdi mdi-download',
-  iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success',
-  iconExportTextDelimitedCommand: 'mdi mdi-download',
-  width: 200,
-},
-```
-
-### How to Disable the Context Menu?
-You can disable the Context Menu, by calling `enableContextMenu: false` from the Grid Options.
-```typescript
-this.gridOptions = {
-   enableContextMenu: false
-};
-```
-
-### UI Sample
-![image](https://user-images.githubusercontent.com/643976/71301652-024afe80-2370-11ea-909d-bb802d69edc1.png)

package/docs/grid-functionalities/Custom-Footer.md

@@ -1,80 +0,0 @@
-### Description
-You can use and show the Custom Footer with 2 left/right containers and will by default display filtered item count & total count on the right side. Also if it detects that you use row selection, it will also show the row selection count on the left footer side. You can also override both left/right side texts.
-
-**NOTE:** The Custom Footer cannot be used in combination with Pagination, you can only show 1 or the other.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/formatter) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-formatter.component.ts)
-
-### Usage
-
-```ts
-defineGrid() {
-  this.columnDefinitions = [ /*...*/ ];
-
-  this.gridOptions = {
-    // ...
-    showCustomFooter: true, // display some metrics in the bottom custom footer
-    customFooterOptions: {
-      // optionally display some text on the left footer container
-      leftFooterText: 'Grid created with <a href="https://github.com/ghiscoding/slickgrid-universal" target="_blank">Slickgrid-Universal</a>',
-      hideMetrics: false,
-      hideTotalItemCount: false,
-      hideLastUpdateTimestamp: false
-    },
-  };
-}
-```
-
-#### CustomFooterOption Interface
-Below is the list of all options available with the Custom Footer, you can visit the [customFooterOption.interface.ts](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/customFooterOption.interface.ts) to see latest code in case the code below is not up to date.
-```ts
-export interface CustomFooterOption {
-  /** Optionally provide some text to be displayed on the left side of the footer (in the "left-footer" css class) */
-  leftFooterText?: string;
-
-  /** CSS class used for the left container */
-  leftContainerClass?: string;
-
-  /** Date format used when showing the "Last Update" timestamp in the metrics section. */
-  dateFormat?: string;
-
-  /** Defaults to 25, height of the Custom Footer in pixels, it could be a number (25) or a string ("25px") but it has to be in pixels. It will be used by the auto-resizer calculations. */
-  footerHeight?: number | string;
-
-  /**
-   * Defaults to false, which will hide the selected rows count on the bottom left of the footer.
-   * NOTE: if users defined a `leftFooterText`, then the selected rows count will NOT show up.
-   */
-  hideRowSelectionCount?: boolean;
-
-  /** Defaults to false, do we want to hide the last update timestamp (endTime)? */
-  hideLastUpdateTimestamp?: boolean;
-
-  /**
-   * Defaults to false, do we want to hide the metrics (right section) when the footer is displayed?
-   * That could be used when we want to display only the left section with custom text
-   */
-  hideMetrics?: boolean;
-
-  /** Defaults to false, do we want to hide the total item count of the entire dataset (the count exclude any filtered data) */
-  hideTotalItemCount?: boolean;
-
-  /** Defaults to "|", separator between the timestamp and the total count */
-  metricSeparator?: string;
-
-  /** Text shown in the custom footer on the far right for the metrics */
-  metricTexts?: MetricTexts;
-
-  /** CSS class used for the right container */
-  rightContainerClass?: string;
-
-  /** Optionally provide some text to be displayed on the right side of the footer (in the "right-footer" css class) */
-  rightFooterText?: string;
-}
-```
-
-#### Screenshot Demo
-Below is a print screen of the demo, you can see the full advantage of the custom footer with custom text on the left and filtered item count + timestamp on the right.
-
-![image](https://user-images.githubusercontent.com/643976/122082196-ca3e4380-cdcd-11eb-84ed-4d2f4eb8057b.png)

package/docs/grid-functionalities/Custom-Tooltip-(plugin).md

@@ -1,258 +0,0 @@
-#### index
-- [Column Definition - Custom Tooltip](#via-column-definition)
-- [Grid Options - Custom Tooltip](#via-grid-options)
-- [Alignment](#alignment)
-- Tooltip Type
-  - [on Cell](#cell-custom-tooltip-with-formatter) with `formatter`
-  - [on Cell Async Tooltip](#cell-async-custom-tooltip-with-formatter-and-asyncpostformatter-async-api-call) (Async API call from Promise/Observable)
-  - [on Column Header (title)](#column-header-custom-tooltip-with-headerformatter) with `headerFormatter`
-  - [on Column Header row (filter)](#column-header-custom-tooltip-with-headerrowformatter) with `headerRowFormatter`
-  - [with regular `[title]` attribute](#regular-tooltip-with-a-title-attribute)
-  - [tooltip text length](#regular-tooltip-max-length)
-- [How to delay the opening of a tooltip?](#how-to-delay-the-opening-of-a-tooltip)
-  - [delay a tooltip with Formatter](#delay-a-tooltip-with-formatter)
-  - [delay a Regular Tooltip](#delay-a-regular-tooltip)
-- `customTooltip` options
-   - too many to list, consult the [CustomTooltipOption](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/column.interface.ts) interface for all possible options
-- [UI Sample](#ui-sample)
-
-### Description
-A plugin to add Custom Tooltip when hovering a cell, it subscribes to the cell `onMouseEnter` and `onMouseLeave` events.
-The `customTooltip` is defined in the Column Definition OR Grid Options (the first found will have priority over the second)
-To specify a tooltip when hovering a cell
-
-**NOTE:** this is an opt-in plugin, you must import the necessary plugin from `@slickgrid-universal/custom-tooltip-plugin` and instantiate it in your grid options via `registerExternalResources`, see multiple examples below.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/custom-tooltip) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-custom-tooltip.component.ts)
-
-### via Column Definition
-You can set or change option of an individual column definition custom tooltip.
-```ts
-import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
-
-defineGrid() {
-  this.columnDefinitions = [{
-      id: "title", name: "Title", field: "title", formatter: titleFormatter,
-      customTooltip: {
-        formatter: tooltipTaskFormatter,
-        // ...
-      }
-  }];
-
-  // make sure to register the plugin in your grid options
-  this.gridOptions = {
-    externalResources: [new SlickCustomTooltip()],
-  };
-}
-```
-
-### via Grid Options
-You can set certain options for the entire grid, for example if you set `exportWithFormatter` it will evaluate the Formatter (when exist) output to export each cell. The Grid Menu also has the "Export to Excel" enabled by default.
-```ts
-import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
-
-defineGrid() {
-  this.gridOptions = {
-    externalResources: [new SlickCustomTooltip()],
-    customTooltip: {
-      formatter: tooltipTaskFormatter,
-
-      // optionally skip tooltip on some of the column(s) (like 1st column when using row selection)
-      usabilityOverride: (args) => (args.cell !== 0 && args?.column?.id !== 'action'), // disable on 1st and also "action" column
-    },
-  };
-}
-```
-
-## Alignment
-The default alignment is "auto" (which will align to the left by default or on the right when there's not enough room). You can change the alignment on any of the cell (or all of them via grid option) by simply providing a value to the `position`.
-
-The available position are: `'auto' | 'top' | 'bottom' | 'left-align' | 'right-align' | 'center'` (note that "center" was only added recently)
-
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-customTooltip: {
-  position: 'left-align'
-},
-```
-
-## Tooltip Types
-### Cell Custom Tooltip with `formatter`
-You can create a Custom Tooltip which will show up when hovering a cell by simply providing a `formatter` [via a Column Definition](#via-column-definition) (per column) OR [via Grid Options](#via-grid-options) (all columns of the grid), the formatter is the same structure as a regular formatter and accepts html string.
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-customTooltip: {
-  formatter: this.tooltipFormatter,
-},
-```
-here's a simple formatter (you can see the result in the [UI Sample](#ui-sample) gif below)
-```ts
-tooltipFormatter(row, cell, value, column, dataContext, grid) {
-    const tooltipTitle = 'Custom Tooltip';
-    const effortDrivenHtml = Formatters.checkmarkMaterial(row, cell, dataContext.effortDriven, column, dataContext, grid);
-
-    return `<div class="header-tooltip-title">${tooltipTitle}</div>
-    <div class="tooltip-2cols-row"><div>Id:</div> <div>${dataContext.id}</div></div>
-    <div class="tooltip-2cols-row"><div>Title:</div> <div>${dataContext.title}</div></div>
-    <div class="tooltip-2cols-row"><div>Effort Driven:</div> <div>${effortDrivenHtml}</div></div>
-    <div class="tooltip-2cols-row"><div>Completion:</div> <div>${dataContext.percentComplete}</div></div>`;
-}
-```
-
-### Cell Async Custom Tooltip with `formatter` and `asyncPostFormatter` (Async API call)
-You can create an Async Custom Tooltip which is a delayed tooltip (for example when you call an API to fetch some info), will show up when hovering a cell it will require a bit more setup. The `formatter` will be use to show any form of "loading..." and your final tooltip will be shown via the `asyncPostFormatter` both formatters use the same structure as a regular formatter and accepts html string. It will also require you to provide an `asyncProcess` of your API call (it could be a Promise or Observable), it also provides the same arguments as a regular formatter.
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-customTooltip: {
-  // 1- loading formatter
-  formatter: () => `loading...</div>`,
-
-  // 2- post process formatter
-  asyncProcess: (row, cell, val, column, dataContext) => fetch(`/user/${dataContext.id}`), // could be a Promise/Observable
-  asyncPostFormatter: this.userFullDetailAsyncFormatter,
-},
-```
-here's the final post process async formatter
-```ts
-userFullDetailAsyncFormatter(row, cell, value, column, dataContext, grid) {
-    const tooltipTitle = 'User Detail - Async Tooltip';
-    return `<div class="header-tooltip-title">${tooltipTitle}</div>
-    <div class="tooltip-2cols-row"><div>Id:</div> <div>${dataContext.id}</div></div>
-    <div class="tooltip-2cols-row"><div>First Name:</div> <div>${dataContext.firstName}</div></div>
-    <div class="tooltip-2cols-row"><div>Last Name:</div> <div>${dataContext.lastName}</div></div>
-    <div class="tooltip-2cols-row"><div>Age:</div> <div>${dataContext.age}</div></div>
-    <div class="tooltip-2cols-row"><div>Gender:</div> <div>${dataContext.gender}</div></div>
-    <div class="tooltip-2cols-row"><div>Title:</div> <div>${dataContext.title}</div></div>
-    <div class="tooltip-2cols-row"><div>Seniority:</div> <div>${dataContext.seniority}</div></div>`;
-}
-```
-
-### Column Header Custom Tooltip with `headerFormatter`
-You can create a Custom Tooltip which will show up when hovering a column header (title) by simply providing a `headerFormatter` [via a Column Definition](#via-column-definition) (per column) OR [via Grid Options](#via-grid-options) (all columns of the grid), the formatter is the same structure as a regular formatter and accepts html string.
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-customTooltip: {
-  headerFormatter: this.headerFormatter,
-},
-```
-here's a simple formatter
-```ts
-headerFormatter(row, cell, value, column) {
-    const tooltipTitle = 'Custom Tooltip - Header';
-    return `<div class="header-tooltip-title">${tooltipTitle}</div>
-    <div class="tooltip-2cols-row"><div>Column:</div> <div>${column.name}</div></div>`;
-}
-```
-
-### Column Header Custom Tooltip with `headerRowFormatter`
-You can create a Custom Tooltip which will show up when hovering a column header (title) by simply providing a `headerRowFormatter` [via a Column Definition](#via-column-definition) (per column) OR [via Grid Options](#via-grid-options) (all columns of the grid), the formatter is the same structure as a regular formatter and accepts html string.
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-customTooltip: {
-  headerRowFormatter: this.headerRowFormatter,
-},
-```
-here's a simple formatter
-```ts
-headerRowFormatter(row, cell, value, column) {
-    const tooltipTitle = 'Custom Tooltip - Header Row (filter)';
-    return `<div class="headerrow-tooltip-title">${tooltipTitle}</div>
-    <div class="tooltip-2cols-row"><div>Column:</div> <div>${column.field}</div></div>`;
-  }
-```
-
-### Regular Tooltip with a `[title]` attribute
-You can create a regular tooltip simply by enabling `useRegularTooltip: true`, it will parse the regular cell formatter in search for a `title="..."` attribute (it won't work without a cell formatter, unless the cell text content is larger than the cell width when ellipsis shows up "some text..." and that will automatically create a tooltip, that could however be disabled if you wish).
-
-This feature is very useful so you probably want to enable this flag globally, but you could also still choose to add only [via a Column Definition](#via-column-definition) (per column) OR [via Grid Options](#via-grid-options) (all columns of the grid).
-
-NOTE: regular tooltip, as opposed to other type of custom tooltip, will be rendered as plain text. You could however change that by enabling this flag `renderRegularTooltipAsHtml: true`
-
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-customTooltip: {
-  useRegularTooltip: true, // a regular tooltip will search for a "title" attribute in the cell formatter (it won't work without a cell formatter)
-
-  // if you wish to disable auto-tooltip creation when ellipsis (...) shows up, can use this flag
-  // useRegularTooltipFromFormatterOnly: true,
-},
-```
-
-#### Regular tooltip max length
-By default the custom tooltip text will be limited, and potentially truncated, to 650 characters in order to keep the tooltip with a size that is not too large. You could change the grid option setting with this
-
-```ts
-this.gridOptions = {
-  customTooltip: {
-    tooltipTextMaxLength: 650,
-  },
-}
-```
-
-### How to delay the opening of a tooltip?
-#### delay a Tooltip with Formatter
-There are no built-in option to delay a custom tooltip because it would add too much code complexity to the codebase, however you can simply do that by taking advantage of the Async Custom Tooltip. The only thing you might want to do though is to have the first custom tooltip `formatter` to return an empty string (so it won't show a loading tooltip) and then use the `asyncPostFormatter` for the tooltip (note that it will **not** read the cell formatter, if you have requirement for that then simply combined formatter into an external formatter function, see 2nd examples below).
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-customTooltip: {
-  // 1- loading formatter
-  formatter: () => ``, // return empty so it won't show any pre-tooltip
-
-  // 2- delay the opening by a simple Promise and `setTimeout`
-  asyncProcess: () => new Promise(resolve => {
-    setTimeout(() => resolve({}), 500); // delayed by half a second
-  }),
-  asyncPostFormatter: this.userFullDetailAsyncFormatter,
-},
-```
-#### delay a Regular Tooltip
-It is possible to also delay a regular tooltip (when using `useRegularTooltip`) even when using the optional `useRegularTooltipFromFormatterOnly` but it requires a bit of code change. For example, let say you want to parse the `title` from a formatter but delay it, you could do it as shown below but please note that it will read the `asyncPostFormatter`, not the cell `formatter`, and so you should probably create an external formatter function to make simpler code.
-
-##### tooltip text output will be: "show this tooltip title text"
-```ts
-// define your custom tooltip in a Column Definition OR Grid Options
-this.columnDefinitions = [{
-  id: 'firstName', field: 'firstName', name: 'First Name',
-  customTooltip: {
-    // 1- loading formatter
-    formatter: () => ``, // return empty so it won't show any pre-tooltip
-
-    // 2- delay the opening by a simple Promise and `setTimeout`
-    asyncProcess: () => new Promise(resolve => setTimeout(() => resolve(null), 500)), // delayed by half a second
-    asyncPostFormatter: `<span title="show this tooltip title text">cell value</span>`, // this will be read as tooltip
-  },
-  formatter: `<span title="another tooltip title text">cell value</span>`, // this won't be read as tooltip
-}];
-```
-the previous code could be refactored to have only 1 common formatter that is referenced in both cell `formatter` and tooltip `asyncPostFormatter`
-##### tooltip text output will be: "show this tooltip title text"
-```ts
-const myFormatter = () => `<span title="show this tooltip title text">cell value</span>`;
-
-// define your custom tooltip in a Column Definition OR Grid Options
-this.columnDefinitions = [{
-  id: 'firstName', field: 'firstName', name: 'First Name',
-  customTooltip: {
-    // 1- loading formatter
-    formatter: () => ``, // return empty so it won't show any pre-tooltip
-
-    // 2- delay the opening by a simple Promise and `setTimeout`
-    asyncProcess: () => new Promise(resolve => setTimeout(() => resolve(null), 500)), // delayed by half a second
-    asyncPostFormatter: myFormatter
-  },
-  formatter: myFormatter
-}];
-```
-### UI Sample
-The Export to Excel handles all characters quite well, from Latin, to Unicode and even Unicorn emoji, it all works on all browsers (`Chrome`, `Firefox`, even `IE11`, I don't have access to older versions). Here's a demo
-
-![image](https://user-images.githubusercontent.com/643976/138971279-b835b8f5-93f1-4e77-bd90-f86599e199e9.png)
-
-auto tooltip on large text, that is when ellipsis (...) shows up on large text
-
-![image](https://user-images.githubusercontent.com/643976/139088036-9168e632-1ae6-4c69-8302-f9df8510ec4b.png)
-
-Async Custom Tooltip (API call Promise/Observable)
-
-![ganSbcmm8v](https://user-images.githubusercontent.com/643976/139093922-987b953d-984f-4ec3-badb-941cc2ec78ec.gif)