docs: add more docs about Filtering and Tree Data

- related to Discussion #1624

docs/TOC.md

@@ -22,7 +22,7 @@
   * [new Date Picker (vanilla-calendar)](column-functionalities/editors/date-editor-(vanilla-calendar).md)
   * [LongText (textarea)](column-functionalities/editors/LongText-Editor-(textarea).md)
   * [Select Dropdown Editor (single/multiple)](column-functionalities/editors/Select-Dropdown-Editor-(single,multiple).md)
-* [Filters](column-functionalities/filters/README.md)
+* [Filters](column-functionalities/filters/filter-intro.md)
   * [Input Filter (default)](column-functionalities/filters/input-filter.md)
   * [Select Filter (dropdown)](column-functionalities/filters/select-filter.md)
   * [Compound Filters](column-functionalities/filters/compound-filters.md)

docs/column-functionalities/filters/filter-intro.md

@@ -0,0 +1,72 @@
+#### Index
+- [How to use Filter?](#how-to-use-filter)
+- [Filtering with Localization](input-filter.md#how-to-hide-filter-header-row)
+- [Filtering with Localization](input-filter.md#filtering-with-localization-i18n)
+- [Filter Complex Object](input-filter.md#how-to-filter-complex-objects)
+- [Update Filters Dynamically](input-filter.md#update-filters-dynamically)
+- [Query Different Field (Filter/Sort)](input-filter.md#query-different-field)
+- [Dynamic Query Field](input-filter.md#dynamic-query-field)
+- [Debounce/Throttle Text Search (wait for user to stop typing before filtering)](input-filter.md#debouncethrottle-text-search-wait-for-user-to-stop-typing-before-filtering)
+- [Ignore Locale Accent in Text Filter/Sorting](input-filter.md#ignore-locale-accent-in-text-filtersorting)
+- [Custom Filter Predicate](input-filter.md#custom-filter-predicate)
+- [Filter Shortcuts](input-filter.md#filter-shortcuts)
+
+### Description
+
+Filtering is a big part of a data grid, Slickgrid-Universal provides a few built-in Filters that you can use in your grids. You need to tell the grid that you want to use Filtering (via Grid Options) and you also need to enable the filter for every column that you need filtering (via Column Definitions).
+
+### How to use Filter?
+You simply need to set the flag `filterable` for each column that you want filtering and then also enable the filters in the Grid Options. Here is an example with a full column definitions:
+```ts
+// define you columns, in this demo Effort Driven will use a Select Filter
+this.columnDefinitions = [
+  { id: 'title', name: 'Title', field: 'title' }, // without filter
+  { id: 'description', name: 'Description', field: 'description', filterable: true } // with filter
+];
+
+// you also need to enable the filters in the Grid Options
+this.gridOptions = {
+  enableFiltering: true
+};
+```
+
+### How to hide Filter Header Row?
+There are 2 ways to hide Filters from the user, you could disable it completely OR you could hide the Filter Header Row.
+
+##### You could disable the Filters completely, 
+```ts
+this.gridOptions = {
+   enableFiltering: false
+};
+
+// you could re-enable it later
+this.sgb.slickGrid.setOptions({ enableFiltering: true });
+```
+
+##### You could also enable Filters but Hide them from the user in the UI
+This can be useful for features that require Filtering but you wish to hide the filters for example Tree Data.
+
+```ts
+this.gridOptions = {
+  enableFiltering: true,
+  showHeaderRow: false,
+};
+```
+
+Also, if you don't want to see the Grid Menu toggle filter row command, you should also hide it from the menu via 
+
+```ts
+this.gridOptions = {
+  enableFiltering: true,
+  showHeaderRow: false,
+  gridMenu: { 
+    hideToggleFilterCommand: true 
+  },
+};
+
+// you can show toggle the filter header row dynamically
+this.sgb.showHeaderRow(true);
+
+// or
+this.sgb.slickGrid.setHeaderRowVisibility(true);
+```

docs/grid-functionalities/Tree-Data-Grid.md

@@ -15,10 +15,16 @@
 ## Description
 Tree Data allows you to display a hierarchical (tree) dataset into the grid, it is visually very similar to Grouping but also very different in its implementation. A hierarchical dataset is commonly used for a parent/child relation and a great example is a Bill of Material (BOM), which you can't do with Grouping because parent/child relationship could be infinite tree level while Grouping is a defined and known level of Grouping.
 
-## Important Note (data mutation)
+## Important Notes 
+
+#### data mutation
 
 For Tree Data to work with SlickGrid we need to **mutate** the original dataset, it will add a couple of new properties to your data, these properties are: `__treeLevel`, `__parentId` and `children` (these key names could be changed via the `treeDataOptions`). Also note that these properties become available in every Formatter (built-in and custom) which can be quite useful (especially in the tree level) in some cases... You might be thinking, could we do it without mutating the data? Probably but that would require to do a deep copy of the original data and that can be expensive on the performance side (no one it stopping you from doing a deep copy on your side though). The last thing to note is that internally for Tree Data to work, the lib always has 2 dataset (1x flat dataset and 1x hierarchical dataset which is basically a tree structure) and the lib keeps them in sync internally. So why do we do all of this? Well simply put, SlickGrid itself does not support a Tree Data structure and that is the reason we always have to keep 2 dataset structures internally because SlickGrid only works a flat dataset and nothing else.
 
+#### Filtering is required by Tree Data
+
+Tree Data requires and uses Filters to work, you **cannot disable Filtering**. The way it works is that when you collapse a parent group, the grid is actually using Filters to filter out child rows and so expanding/collapsing groups which is why Filtering must be enabled. If you don't want to show Filters to the user, then use `showHeaderRow: false` grid option and/or toggle it from the Grid Menu. Also, if you don't want to see the Grid Menu toggle filter command, you should also hide it from the menu via `gridMenu: { hideToggleFilterCommand: true }`
+
 ### Demo
 [Demo Parent/Child Relationship](https://ghiscoding.github.io/slickgrid-universal/#/example05) / [Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts)
 

examples/vite-demo-vanilla-bundle/src/examples/example01.ts

@@ -34,10 +34,6 @@ export default class Example01 {
 
     this.sgb1 = new Slicker.GridBundle(document.querySelector(`.grid1`) as HTMLDivElement, this.columnDefinitions1, { ...ExampleGridOptions, ...this.gridOptions1 }, this.dataset1);
     this.sgb2 = new Slicker.GridBundle(document.querySelector(`.grid2`) as HTMLDivElement, this.columnDefinitions2, { ...ExampleGridOptions, ...this.gridOptions2 }, this.dataset2);
-
-    // setTimeout(() => {
-    //   this.slickgridLwc2.dataset = this.dataset2;
-    // }, 1000);
   }
 
   dispose() {