[update] events updated updated, close-filter removed

docs/api/config/headershape-property.md

@@ -24,7 +24,7 @@ headerShape?: {
 
 - `columnCollapsing` - (optional) if set to **true**, enables columns collapsing in all headers; it's set to **false** by default
 - `verticalText` - (optional) if set to **true**, changes the text orientation in all headers from horizontal to vertical; the default value is **false**
-- `template` - (optional) defines the format of text in headers; by default, for the fields applied as rows the value of the `label` parameter is displayed (see the [config](/api/config/config-property) property) and for the fields applied as values  the label and method are shown (e.g., *Oil(count)*); the function takes the field id, label and the method or predicate id (if any) and returns the processed value (default template is *template: (label, id, subLabel) => label + (id ? ` (${subLabel})` : ""),*).
+- `template` - (optional) defines the format of text in headers; by default, for the fields applied as rows the value of the `label` parameter is displayed (see the [config](/api/config/config-property) property) and for the fields applied as values  the label and method are shown (e.g., *Oil(count)*); the function takes the field id, label and the method or predicate id (if any) and returns the processed value (the default template is as follows: *template: (label, id, subLabel) => label + (id ? ` (${subLabel})` : ""),*).
 
 ## Example
 

docs/api/events/add-field-event.md

@@ -8,7 +8,7 @@ description: You can learn about the add-field event in the documentation of the
 
 ### Description
 
-@short: TODO!!! 
+@short: Fires when a new field is added
 
 ### Usage
 
@@ -37,4 +37,34 @@ The callback of the action takes an object with the following parameters:
 
 ### Example
 
-TODO!!!
+In the example below we use the [`api.intercept()`](/api/internal/intercept-method) method to add a new method to the value field with the **number** data type: 
+
+~~~jsx {20-27}
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+  config: {
+    rows: ["studio", "genre"],
+    columns: [],
+    values: [
+      {
+        id: "title",
+        method: "count",
+      },
+      {
+        id: "score",
+        method: "max",
+      },
+    ],
+  },
+});
+//adding values with a predefined method
+widget.api.intercept("add-field", (ev) => {
+  const { fields } = widget.api.getState();
+  const type = fields.find((f) => f.id == ev.field).type;
+
+  if (ev.area == "values" && type == "number") {
+    ev.method = "min";
+  }
+});
+~~~

docs/api/events/apply-filter-event.md

@@ -8,7 +8,7 @@ description: You can learn about the apply-filter event in the documentation of
 
 ### Description
 
-@short: TODO!!!
+@short: Fires when a filter is applied
 
 ### Usage
 
@@ -34,4 +34,31 @@ The callback of the action takes an object with the following parameters:
 
 ### Example
 
-TODO!!!
+~~~jsx {20-23}
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+  config: {
+    rows: ["studio", "genre"],
+    columns: [],
+    values: [
+      {
+        id: "title",
+        method: "count",
+      },
+      {
+        id: "score",
+        method: "max",
+      },
+    ],
+  },
+});
+//output to console the label of the field to which filter was applied
+widget.api.on("apply-filter", (ev) => {
+  console.log("The field to which filter was applied:", ev.rule.field);
+});
+~~~
+
+---
+
+**Related articles**: [api.on()](/api/internal/on-method)

docs/api/events/delete-field-event.md

@@ -8,7 +8,7 @@ description: You can learn about the delete-field event in the documentation of
 
 ### Description
 
-@short: TODO!!!
+@short: Fires when removing a field
 
 ### Usage
 
@@ -28,5 +28,36 @@ The callback of the action takes an object with the following parameters:
 
 ### Example
 
-TODO!!!
+TODO!!!In the example below, the `delete-field` action is triggered via the [`api.exec()`](/api/methods/exec) method. The last field is removed from the **values** area. The [`api.getState()`](/api/methods/getState) method here is used to get the current state of the Pivot [`config`](/api/properties/config). The action will be triggered with the button click.
 
+TBD!!!
+
+~~~jsx {}
+// create Pivot
+const table = new pivot.Pivot("#root", {
+    ...
+});
+//calling methods of API: remove a specific value from values in config
+function removeLastField() {
+  if (api) {
+    const state = table.api.getState();
+    const config = state.config;
+
+    const x = config.values.length;
+
+    if (x) {
+      const lastValue = config.values[x - 1];
+
+      table.api.exec("delete-field", {
+        area: "values",
+        id: lastValue.id, // auto-generated ID of an item added to config.values
+      });
+    }
+  }
+}
+const button = document.createElement("button");
+button.addEventListener("click", removeLastField);
+button.textContent = "Remove";
+
+document.body.appendChild(button);
+~~~

docs/api/events/open-filter-event.md

@@ -35,4 +35,27 @@ The function may return either a boolean value or void. When it returns **false*
 
 ### Example
 
-TODO!!!
+~~~jsx {20-22}
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+  config: {
+    rows: ["studio", "genre"],
+    columns: [],
+    values: [
+      {
+        id: "title",
+        method: "count",
+      },
+      {
+        id: "score",
+        method: "max",
+      },
+    ],
+  },
+});
+
+widget.api.on("open-filter", (ev) => {
+    console.log("The field id for which filter is activated:", ev.field.field);
+});
+~~~

docs/api/events/render-table-event.md

@@ -8,7 +8,7 @@ description: You can learn about the render-table event in the documentation of
 
 ### Description
 
-@short: TODO!!!
+@short: Fires after the widget configuration has been processed and just before the table is rendered
 
 It allows you to alter the final table configuration on the fly or prevent the rendering of the table altogether.
 
@@ -49,4 +49,33 @@ If the event handler returns **false**, it will block the operation in question.
 
 ### Example
 
-TODO!!!
+~~~jsx {20-28}
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+  config: {
+    rows: ["studio", "genre"],
+    columns: [],
+    values: [
+      {
+        id: "title",
+        method: "count",
+      },
+      {
+        id: "score",
+        method: "max",
+      },
+    ],
+  },
+});
+
+widget.api.intercept("render-table", (ev) => {
+  console.log(ev.config); //output the config object
+  console.log(ev.config.columns); //output the columns array
+
+  ev.config.footer = true;
+  ev.config.columns[0].footer = ["Custom footer"];
+
+  // returning "false" here will prevent the table from rendering
+});
+~~~

docs/api/events/reorder-fields-event.md

@@ -8,7 +8,7 @@ description: You can learn about the move-field event in the documentation of th
 
 ### Description
 
-@short: TODO!!!
+@short: Fires when reordering fields
 
 ### Usage
 
@@ -32,4 +32,27 @@ The callback of the action takes an object with the following parameters:
 
 ### Example
 
-TODO!!!
+~~~jsx {}
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+  config: {
+    rows: ["studio", "genre"],
+    columns: [],
+    values: [
+      {
+        id: "title",
+        method: "count",
+      },
+      {
+        id: "score",
+        method: "max",
+      },
+    ],
+  },
+});
+//output the id of the reordered field to console 
+widget.api.on("move-field", (ev) => {
+  console.log("The id of the reordered field:", ev.id);
+});
+~~~

docs/api/events/show-config-panel-event.md

@@ -8,7 +8,7 @@ description: You can learn about the show-config-panel event in the documentatio
 
 ### Description
 
-@short: TODO!!!
+@short: Fires when the visibility of the configuration panel changes
 
 ### Usage
 
@@ -26,4 +26,27 @@ The callback of the action takes an object with the following parameter:
 
 ### Example
 
-TODO!!!
+~~~jsx {19-22}
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+  config: {
+    rows: ["studio", "genre"],
+    columns: [],
+    values: [
+      {
+        id: "title",
+        method: "count",
+      },
+      {
+        id: "score",
+        method: "max",
+      },
+    ],
+  },
+});
+//hide the configuration panel
+widget.api.exec("show-config-panel", {
+  mode: false,
+});
+~~~

docs/api/events/update-config-event.md

@@ -8,7 +8,7 @@ description: You can learn about the update-config event in the documentation of
 
 ### Description
 
-@short: TODO!!! 
+@short: Fires when modifying rows, columns, or aggregation functions via the Pivot UI 
 
 The action is useful for saving a user's aggregation configuration so that it can be applied the next time the widget is used allowing a user to continue where they left off. 
 
@@ -65,4 +65,27 @@ If the event handler function returns *false*, the operation that triggered the
 
 ### Example
 
-TODO!!!
+~~~jsx {19-22}
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+  config: {
+    rows: ["studio", "genre"],
+    columns: [],
+    values: [
+      {
+        id: "title",
+        method: "count",
+      },
+      {
+        id: "score",
+        method: "max",
+      },
+    ],
+  },
+});
+//output the config object to console
+widget.api.intercept("update-config", (config) => {
+  console.log("Config was changed", config);
+});
+~~~