angular-slickgrid 9.0.0 → 9.0.2

package/docs/grid-functionalities/Global-Options.md

@@ -1,29 +0,0 @@
-You might find yourself re-using the same configurations over and over, in that case we got you covered. You can change any of the global options directly in your App Module through `forRoot` which accept an optional object of Grid Options.
-
-```typescript
-import { AngularSlickgridModule } from 'angular-slickgrid';
-
-@NgModule({
-  declarations: [ /*...*/ ],
-  imports: [
-    AngularSlickgridModule.forRoot({
-      enableAutoResize: true,
-      autoResize: {
-        containerId: 'grid-container',
-        sidePadding: 15
-      },
-      enableFiltering: true,
-      enableCellNavigation: true,
-      enablePagination: true,
-      enableRowSelection: true,
-      enableTranslate: true,
-      //...
-    }),
-  ],
-  providers: [ /*...*/ ]
-});
-
-export class AppModule { }
-```
-### List of Global Options
-For the complete list of available Grid Option, you can take a look at the [Default Grid Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/app/angular-slickgrid/global-grid-options.ts) file and/or technically any of the options from the [grid options - interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/app/angular-slickgrid/models/gridOption.interface.ts) are configurable.

package/docs/grid-functionalities/Grid-Auto-Resize.md

@@ -1,218 +0,0 @@
-##### index
-- [Global Options](#global-autoresize-options)
-- [Delay a Grid Resize](#delay-a-grid-resize)
-- [Last Resize Dimension](#last-resize-dimensions)
-- [Pause Resizer](#pause-the-resizer-when-auto-resize-is-enabled)
-- [Add Grid Min/Max Height/Width](#add-grid-minmax-heightwidth)
-- [Add some Padding to the Calculation](#add-some-padding-to-the-calculation)
-- [Calculate Size by Container or Window Element](#calculate-size-by-container-or-window-element)
-- [Detect Resize by Container (Resize Observer) or Window](#detect-resize-by-container-or-window)
-- [Resize Grid with Fixed Dimensions](#resize-the-grid-with-fixed-dimensions)
-- [Troubleshooting](#troubleshooting)
-
-### Description
-Almost all grids from the demos are using the auto-resize feature, and the feature does what its name suggest, it resizes the grid to fill entirely within the container it is contained. It also automatically resizes when the user changes its browser size.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/resize-by-content) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-resize-by-content.component.ts)
-
-### Usage
-All you need to do is enable the Grid Option `enableAutoResize: true` and provide necessary information in the `autoResize`, at minimum you should provide your container an id or class name.
-
-##### View
-```html
-<div id="demo-container">
-   <angular-slickgrid gridId="grid1"
-              [columns]="columnDefinitions"
-              [options]="gridOptions"
-              [dataset]="dataset">
-    </angular-slickgrid>
-</div>
-```
-
-```ts
-this.columnDefinitions = [
-  // ...
-];
-
-this.gridOptions = {
-  autoResize: {
-    container: '#demo-container' // container DOM selector
-  },
-  enableAutoResize: true
-};
-```
-
-#### AutoResize Options
-There are multiple options you can pass to the `autoResize` in the Grid Options, you can see them all in the [autoResizeOption.interface](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/resizerOption.interface.ts)
-
-### Delay a Grid Resize
-Note that you can also delay the resize via the 1st argument to the `resizeGrid()` call.
-```ts
-  openSidebar() {
-    this.isSidebarOpen = true;
-    const delay = 100; // delay in milliseconds
-    this.sgb.resizerService.resizeGrid(delay);
-  }
-```
-
-### Last Resize Dimensions
-The `resizeGrid()` returns a promise with the last used resize dimensions, that might be helpful to resize and fix another grid or DOM element height/width. For example, we use that in our project to resize a sidebar element to become the same height as the main grid.
-```ts
-async openSidebar() {
-  this.isSidebarOpen = true;
-
-  // resize the CPA list grid and resize the sidebar to the same height as the grid with it's pagination
-  const lastDimensions = await this.sgb.resizerService.resizeGrid();
-  if (lastDimensions && lastDimensions.heightWithPagination) {
-    this.sidebarMaxHeight = `${lastDimensions.heightWithPagination}px`;
-  }
-}
-```
-### Pause the resizer (when auto-resize is enabled)
-User can pause the resizer at any time and later resume the auto-resize. This might be useful in some use case, for example if you don't want the grid to resize after a certain event, you can pause the resizer before the action.
-
-##### View
-```html
-  <button class="btn btn-default btn-sm"
-    (click)="togglePauseResizer()">
-    Pause auto-resize: <b>{{resizerPaused}}</b>
-  </button>
-
-  <angular-slickgrid gridId="grid2"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)">
-  </angular-slickgrid>
-```
-
-##### Component
-```ts
-export class MyComponent {
-  angularGrid: AngularGridInstance;
-  resizerPaused = false;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  togglePauseResizer() {
-    this.resizerPaused = !this.resizerPaused;
-    this.angularGrid.resizerService.pauseResizer(this.resizerPaused);
-  }
-}
-```
-
-### Add Grid Min/Max Height/Width
-You can set some values for minimum, maximum grid height and width that will be analyzed while executing the calculate available space for the grid.
-
-```ts
-this.gridOptions = {
-  enableAutoResize: true,
-  autoResize: {
-    maxHeight: 600,
-    minHeight: 250,
-    maxWidth: 800,
-    minWidth: 200;
-  }
-}
-```
-
-### Add some Padding to the Calculation
-Sometime the resizer is very close to the perfect size but you can just want to remove a bit more pixels for the total calculation, you can do that by simply adding paddings as shown below
-
-```ts
-this.gridOptions = {
-  enableAutoResize: true,
-  autoResize: {
-    rightPadding: 20,  // note that there's no left option since we don't control the grid position
-    bottomPadding: 25, // a good example of this usage is when the user adds Pagination, it adds a bottomPadding of about 30px
-  }
-}
-```
-
-### Calculate Size by Container or Window Element
-The default way of calculating the available size is by the window element but in some rare case you might need to calculate by the container element.
-So if you do want to calculate the size by the container, then you can write it as shown below (for more info, see Angular-Slickgrid issue [#175](https://github.com/ghiscoding/Angular-Slickgrid/issues/175))
-
-```ts
-this.gridOptions = {
-  enableAutoResize: true,
-  autoResize: {
-    calculateAvailableSizeBy: 'container'  // the 2 options would be 'container' | 'window'
-  }
-}
-```
-
-### Detect resize by Container or Window
-The default way the grid detects a resize is by window. In other words, when the window resizes the grid calculates the width and height the grid should be and resizes to that.
-
-It's also possible to let the grid detect a resize by the grid container element. In other words, when the grid container element resizes the grid calculates the width and height it should be and resizes to that. Technically a `ResizeObserver` is used which may not be [available](https://caniuse.com/resizeobserver) in all browsers you target, if that is the case you could install a polyfill like [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill). When detecting container resizes it could make sense to also calculate available size by container.
-
-```ts
-this.gridOptions = {
-  enableAutoResize: true,
-  autoResize: {
-    container: '#demo-container',
-    resizeDetection: 'container',  // the 2 options would be 'container' | 'window'
-    calculateAvailableSizeBy: 'container'
-  }
-}
-```
-
-For example you could add a resize handle to the grid container (shown on the bottom right corner):
-```html
-<div id="demo-container" style="resize:both; overflow:auto;">
-   <angular-slickgrid gridId="grid1"
-              [columns]="columnDefinitions"
-              [options]="gridOptions"
-              [dataset]="dataset">
-    </angular-slickgrid>
-</div>
-```
-
-### Resize the Grid with fixed Dimensions
-You can call `resizeGrid()` method at any point in time by passing dimensions as the 2nd argument of that method, that would in terms bypass the auto-resize (if enabled that is).
-
-##### Component
-```ts
-export class MyComponent {
-  angularGrid: AngularGridInstance;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  togglePauseResizer() {
-    const delay = 0;
-    this.angularGrid.resizerService.gridResize(delay, { height: 800: width: 600 });
-  }
-}
-```
-
-## Troubleshooting
-### Why is my grid not resizing?
-1. Have you put your grid in a `<div>` container referenced in your `autoResize` grid options?
-2. I have the container defined but it still doesn't resize, why?
-#### Possible reason
-This feature uses `window.resize` event and if you change the size of your DIV programmatically, it will **not** change the size of your grid, mainly because that action did not trigger a `window.resize` event. However to circumvent this issue, you can call the auto-resize of the grid manually with the `ResizerService`. For example, we change the DIV CSS classes to use a different Bootstrap container size, that won't trigger an event and we have to manually call the resize, below is the code to do that.
-
-```ts
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  closeSidebar() {
-    this.isSidebarOpen = false;
-    this.angularGrid.resizerService.resizeGrid();
-  }
-
-  openSidebar() {
-    this.isSidebarOpen = true;
-    this.angularGrid.resizerService.resizeGrid();
-  }
-```
-
-#### Possible reason 2
-The resizer is **not perfect** and the DOM elements might not always show the correct height/width, in some cases certain `<div>` could show in the UI but return a height of `0px` and that will throw off the resizer. If that is your problem then search for the `clearfix` hack, this css trick [article](https://css-tricks.com/snippets/css/clear-fix/) might help you with that. In some other cases, you might just need to add some extra padding, that is why the resizer has the 2 properties built for that, `rightPadding` and `bottomPadding` that can be provided to the `autoResize` grid option.

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

@@ -1,134 +0,0 @@
-The `Grid Menu` (also known as the `Hamburger Menu`) is now part of the project and is enabled by default.
-
-## How to use it?
-#### It's Enabled by default
-Technically, it's enable by default and so you don't have anything to do to enjoy it. However if you want to customize the content of the Grid Menu, then continue reading.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/gridmenu) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-menu.component.ts)
-
-## Customization
-### Column Picker
-The Grid Menu comes, by default, with a `Column Picker`. This brings an easy way to show/hide certain column(s) from the grid. This functionality was copied from the [Column Picker Plugin](https://github.com/ghiscoding/angular-slickgrid/wiki/SlickGrid-Controls-&-Plugins#column-picker) and brought over to the Grid Menu.
-
-### Custom Commands
-
-The Grid Menu also comes, by default, with a list of built-in custom commands (all their `positionOrder` are in the reserved range of 40 to 60)
-- Clear all Filters (you can hide it with `hideClearAllFiltersCommand: true`)
-- Clear all Sorting (you can hide it with `hideClearAllSortingCommand: true`)
-- Toggle the Filter Row (you can hide it with `hideToggleFilterCommand: true`)
-- _Export to CSV_ (you can hide it with `hideExportCsvCommand: true`)
-- _Export to Text Delimited (you can hide it with `hideExportTextDelimitedCommand: true`)
-- _Refresh Dataset_, only shown when using Backend Service API (you can hide it with `hideRefreshDatasetCommand: true`)
-
-This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `commandItems` and define `onGridMenuCommand` callback) in your Grid Options. For example, `Angular-Slickgrid` is configured by default with these settings (you can overwrite any one of them):
-```javascript
-this.gridOptions = {
-   enableAutoResize: true,
-   enableGridMenu: true,   // <<-- this will automatically add extra custom commands
-   enableFiltering: true,
-   gridMenu: {
-     commandTitle: 'Custom Commands',
-     columnTitle: 'Columns',
-     iconCssClass: 'fa fa-ellipsis-v',
-     menuWidth: 17,
-     resizeOnShowHeaderRow: true,
-     commandItems: [
-       {
-         iconCssClass: 'fa fa-filter text-danger',
-         title: 'Clear All Filters',
-         disabled: false,
-         command: 'clear-filter'
-       },
-       {
-         iconCssClass: 'fa fa-random',
-         title: 'Toggle Filter Row',
-         disabled: false,
-         command: 'toggle-filter'
-       },
-       // 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)' },
-             ]
-           }
-         ]
-       },
-     ],
-     onCommand: (e, args) => {
-       if (args.command === 'toggle-filter') {
-         this.gridObj.setHeaderRowVisibility(!this.gridObj.getOptions().showHeaderRow);
-       } else if (args.command === 'clear-filter') {
-         this.filterService.clearFilters();
-         this.dataviewObj.refresh();
-       }
-     }
-   }
-};
-```
-
-#### Events
-
-There are multiple events/callback hooks which are accessible from the Grid Options
-- `onBeforeMenuShow`
-- `onAfterMenuShow`
-- `onMenuClose`
-- `onColumnsChanged`
-- `onCommand`
-
-```ts
-gridMenu: {
-  // commandItems: [
-  //   { command: 'help', title: 'Help', positionOrder: 70, action: (e, args) => console.log(args) },
-  //   { command: '', divider: true, positionOrder: 72 },
-  //   { command: 'hello', title: 'Hello', positionOrder: 69, action: (e, args) => alert('Hello World'), cssClass: 'red', tooltip: 'Hello World', iconCssClass: 'mdi mdi-close' },
-  // ],
-  // menuUsabilityOverride: () => false,
-  onBeforeMenuShow: () => {
-    console.log('onGridMenuBeforeMenuShow');
-    // return false; // returning false would prevent the grid menu from opening
-  },
-  onAfterMenuShow: () => console.log('onGridMenuAfterMenuShow'),
-  onColumnsChanged: (_e, args) => console.log('onGridMenuColumnsChanged', args),
-  onCommand: (e, args) => {
-    // e.preventDefault(); // preventing default event would keep the menu open after the execution
-    console.log('onGridMenuCommand', args.command);
-  },
-  onMenuClose: (e, args) => console.log('onGridMenuMenuClose - visible columns count', args.visibleColumns.length),
-},
-```
-
-For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/6pac/SlickGrid/blob/master/controls/slick.gridmenu.js) itself.
-
-### How to change an icon of all default commands?
-
-You can change any of the default command icon(s) by changing the `icon[Command]`, for example, see below for the defaults.
-```javascript
-this.gridOptions = {
-   enableGridMenu: true,
-   gridMenu: {
-     iconClearAllFiltersCommand: 'fa fa-filter text-danger'
-     iconClearAllSortingCommand: 'fa fa-unsorted text-danger',
-     iconExportCsvCommand: 'fa fa-download',
-     iconExportTextDelimitedCommand: 'fa fa-download',
-     iconRefreshDatasetCommand: 'fa fa-refresh',
-     iconToggleFilterCommand: 'fa fa-random',
-   },
-};
-```
-
-### How to Disable the Grid Menu?
-
-You can disable the Grid Menu, by calling `enableGridMenu: false` from the Grid Options.
-```javascript
-this.gridOptions = {
-   enableGridMenu: false
-};
-```

package/docs/grid-functionalities/Grid-State-&-Preset.md

@@ -1,245 +0,0 @@
-#### index
-- [Description](#descriptions)
-- [Grid State](#grid-state-1)
-- [Grid Presets](#grid-presets)
-- [Grid State Events](#grid-state-events)
-- [How to Load Grid with Certain Columns Hidden](#how-to-load-grid-with-certain-columns-preset-example-hide-certain-columns-on-load)
-
-### Demo
-Look at your developer console before leaving the page
-#### Regular grid
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/clientside) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-clientside.component.ts)
-
-#### with Backend Service
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/gridgraphql) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-graphql.component.ts)
-
-## Descriptions
-#### Grid State
-The `Grid State` are what we defined as the currently used `Columns` / `Filters` / `Sorters` / `Pagination` of the actual grid (pagination is only returned when used with Backend Service API). The columns also include their (size, position order & visibility (show/hidden)).
-#### Presets
-Presets can be used to preset a grid with certain `Columns` / `Filters` / `Sorters` / `Pagination`. When we say `Columns`, we actually mean their size, order position and visibility (shown/hidden) in the grid.
-#### Combining the two together
-So basically, the idea is to save the `Grid State` in Local Storage (or DB) before the grid gets destroyed and once we come back to that same page we can preset the grid with the exact same state as it was before leaving the page (just like if we were doing a forward/back button with browser history).
-
-## Grid State
-You can get the `Grid State` at any point in time. However if you wish to save the grid state before leaving the page and store that in Local Storage, then the best way is to use the `onBeforeGridDestroy` Event Emitter.
-
-##### View
-```html
-<angular-slickgrid
-     gridId="grid2"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset"
-     (onAngularGridCreated)="angularGridReady($event.detail)"
-     (onBeforeGridDestroy)="saveCurrentGridState($event)">
-</angular-slickgrid>
-```
-
-##### Component
-```typescript
-import { GridState } from 'angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-demo.component.html'
-})
-export class GridDemoComponent {
-  angularGrid: AngularGridInstance;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  // you can save it to Local Storage of DB in this call
-  saveCurrentGridState(grid) {
-    const gridState: GridState = this.angularGrid.gridStateService.getCurrentGridState();
-    console.log('Leaving page with current grid state', gridState);
-  }
-}
-```
-
-### Using Grid Presets & Filter SearchTerm(s)
-What happens when we use the grid `presets` and a [Filter Default SearchTerms](../column-functionalities/filters/select-filter.md#default-search-terms)? In this case, the `presets` will win over filter `searchTerms`. The cascading order of priorities is the following
-1. Do we have any `presets`? Yes use them, else go to step 2
-2. Do we have any Filter `searchTerms`? Yes use them, else go to step 3
-3. No `presets` and no `searchTerms`, load grid with default grid & column definitions
-
-## Grid Presets
-### Structure
-The current structure of a Grid Presets is the following
-```typescript
-export interface CurrentColumn {
-  columnId: string;
-  cssClass?: string;
-  headerCssClass?: string;
-  width?: number;
-}
-export interface CurrentFilter {
-  columnId: string;
-  operator?: OperatorType | OperatorString;
-  searchTerms?: SearchTerm[];
-}
-export interface CurrentSorter {
-  columnId: string;
-  direction: SortDirection | SortDirectionString;
-}
-export interface GridState {
-  columns?: CurrentColumn[] | null;
-  filters?: CurrentFilter[] | null;
-  sorters?: CurrentSorter[] | null;
-  pagination?: {
-    pageNumber: number;
-    pageSize: number;
-  };
-  pinning?: CurrentPinning;
-  rowSelection?: CurrentRowSelection | null;
-  treeData?: Partial<TreeToggleStateChange> | null;
-}
-```
-
-#### Example
-For example, we can set `presets` on a grid like so:
-**Component**
-```typescript
-import { GridState } from 'angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-demo.component.html'
-})
-export class GridDemoComponent {
-  angularGrid: AngularGridInstance;
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true, sortable: true },
-      { id: 'duration', name: 'Duration', field: 'duration', filterable: true, sortable: true },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', filterable: true, sortable: true },
-    ];
-
-    this.gridOptions = {
-      enableFiltering: true,
-
-      // use columnDef searchTerms OR use presets as shown below
-      presets: {
-        // the column position in the array is very important and represent
-        // the position that will show in the grid
-        columns: [
-          { columnId: 'duration', width: 88, headerCssClass: 'customHeaderClass' },
-          { columnId: 'complete', width: 57 }
-        ],
-        filters: [
-          { columnId: 'duration', searchTerms: [2, 22, 44] },
-          { columnId: 'complete', searchTerms: ['>5'] }
-        ],
-        sorters: [
-          { columnId: 'duration', direction: 'DESC' },
-          { columnId: 'complete', direction: 'ASC' }
-        ],
-
-        // with Backend Service ONLY, you can also add Pagination info
-        pagination: { pageNumber: 2, pageSize: 20 }
-      }
-    };
-}
-```
-
-### Grid State Event
-There are 2 ways of subscribing to GridState Service event changed.
-1. Through `(onGridStateChanged)` Event Emitter (recommended)
-2. Through `onGridStateChanged` Observable on the GridState Service.
-
-Examples
-#### 1. `(onGridStateChanged)` Event Emitter (recommended)
-##### View
-```html
-<angular-slickgrid gridId="grid1"
-         [columns]="columnDefinitions"
-         [options]="gridOptions"
-         [dataset]="dataset"
-         (onGridStateChanged)="gridStateChanged($event)">
-</angular-slickgrid>
-```
-##### Component
-```typescript
-import { GridStateChange } from 'angular-slickgrid';
-
-export class ExampleComponent implements OnInit {
-  gridStateChanged(gridState: GridStateChange) {
-    console.log('Grid State changed:: ', gridState);
-  }
-}
-```
-
-#### 2. Through `onGridStateChanged` Observable on the GridState Service
-##### View
-```html
-<angular-slickgrid
-     gridId="grid2"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset"
-     (onAngularGridCreated)="angularGridReady($event.detail)"
-     (onBeforeGridDestroy)="saveCurrentGridState($event)">
-</angular-slickgrid>
-```
-##### Component
-```typescript
-import { AngularGridInstance, GridStateChange } from 'angular-slickgrid';
-
-export class ExampleComponent implements OnInit, OnDestroy {
-  angularGrid: AngularGridInstance;
-  gridStateSub: Subscription;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridStateSub = this.angularGrid.gridStateService.onGridStateChanged.subscribe((data: GridStateChange) => console.log(data));
-  }
-
-  ngOnDestroy() {
-    this.gridStateSub.unsubscribe();
-  }
-}
-```
-
-## How to Load Grid with certain Columns Preset (example hide certain Column(s) on load)
-You can show/hide or even change a column position via the `presets`, yes `presets` is that powerful. All you need to do is to pass all Columns that you want to show as part of the `columns` property of `presets`. Typically you already have the entire columns definition since you just defined it, so you can loop through it and just use `map` to list the `columns` according to the structure needed (see [preset structure](Grid-State-&-Preset#structure.md)). What you have to know is that whatever array you provide to `presets`, that will equal to what the user will see and also in which order the columns will show (the array order does matter in this case). If a Columns is omitted from that array, then it will be considered to be a hidden column (you can still show it through Grid Menu and/or Column Picker).
-
-So let say that we want to hide the last Column on page load, we can just find the column by it's `id` that you want to hide and pass the new column definition to the `presets` (again make sure to follow the correct preset structure).
-
-```ts
-this.columnDefinitions = [
-  // initial column definitions
-];
-
-// for example, let's hide last column, we can just use `pop()` to ommit last column
-// and use `map()` to pull only the required field for presets to work
-const mappedColumnDefinitions = this.columnDefinitions.map(col => ({ columnId: col.id, width: col.width }));
-mappedColumnDefinitions.pop();
-
-// then pass it to the presets
-this.gridOptions = {
-  presets: {
-    columns: mappedColumnDefinitions
-  }
-};
-```
-This would be the easiest way to do it.
-
-As pointed out earlier, the `presets` requires a specific structure where the `columns` is the list of columns to show/hide with their possible widths. Also worth mentioning again that the position in the array is very important as it defines the position shown in the UI.
-
-```ts
-this.gridOptions = {
-      enableFiltering: true,
-
-      // use columnDef searchTerms OR use presets as shown below
-      presets: {
-        // the column position in the array is very important and represent
-        // the position that will show in the grid
-        columns: [
-          { columnId: 'duration', width: 88, headerCssClass: 'customHeaderClass' },
-          { columnId: 'complete', width: 57 }
-        ],
-   }
-};
-```
-You could technically redefine by hand the complete list of `columns` that the `presets` requires. I would personally do it via the Column Definitions looping with `map()`, but go manual is also perfectly fine. You would just re-declare the `columns` again with the `id` and `width` and that would work as well.