Updated webhooks docs

Author: ciminelli

docs/api-reference/get-import.mdx

@@ -1,4 +1,4 @@
 ---
-title: "Get Import Metadata"
+title: "Get Import"
 openapi: "GET /import/{id}"
 ---

docs/assets/webhooks-transformations-filter.jpg

@@ -92,8 +92,8 @@
     {
       "group": "API",
       "pages": [
-        "api-reference/get-import-rows",
         "api-reference/get-import",
+        "api-reference/get-import-rows",
         "api-reference/download-import",
         "api-reference/create-importer",
         "api-reference/delete-importer"

docs/assets/webhooks-transformations-transform.jpg

@@ -16,10 +16,10 @@ onComplete: (data) => console.log(data)
 
 <Info>Feature available in <a href="https://tableflow.com/pricing" target="_blank">TableFlow Cloud</a>.</Info>
 
-TableFlow provides an API to paginate the row data of an import, view metadata about an import, or download an import directly as a CSV.
+TableFlow provides an API to retrieve import data, paginate the row data of an import (used for large imports), or download an import directly as a CSV.
 
+- [Get Import](/api-reference/get-import)
 - [Get Import Rows](/api-reference/get-import-rows)
-- [Get Import Metadata](/api-reference/get-import)
 - [Download Import CSV](/api-reference/download-import)
 
 You can also use [Webhooks](/webhooks) to get notified when an import has been completed. This allows your backend application to load the imported data as soon as an import has completed.

docs/assets/webhooks-transformations.jpg

@@ -8,7 +8,9 @@ TableFlow uses webhooks to push real-time notifications about your data imports.
 
 1. Your user imports a CSV or Excel file using the embedded TableFlow importer on your web app
 2. TableFlow notifies your system, via a webhook, that a data import has been completed
-3. Your system can use the API to [paginate through the imported data](/api-reference/get-import-rows), or [download the data directly as a CSV file](/api-reference/download-import).
+3. The webhook will contain the row data, column definitions, and other information about the import
+
+<Info>The number of rows included is limited to 10,000. If there are more than 10,000 rows, an `error` will be set and the data should be retrieved using the [API](/api-reference/get-import-rows).</Info>
 
 ## Configure your application to receive webhooks
 
@@ -39,3 +41,44 @@ You’ll be able to see the webhook received on [Svix Play](https://play.svix.co
 </Frame>
 
 After configuring your application to receive webhooks, all subscribed events will be sent to the endpoint. You can now import a file to test out your new webhook!
+
+## Transforming and filtering webhooks
+
+You can use the transformations feature to modify the payload of webhooks or cancel it entirely based on data in the payload.
+
+To add a transformation, select "Enable" and "Edit transformation" under the "Advanced" tab of an endpoint:
+<Frame>
+![Transformations](/assets/webhooks-transformations.jpg)
+</Frame>
+
+#### Transform
+
+You can use transformations to modify the payload to be in the format you need, or add additional parameters.
+
+<Frame>
+![Transformations](/assets/webhooks-transformations-transform.jpg)
+</Frame>
+
+```javascript
+function handler(webhook) {
+  webhook.payload.myExtraProperty = 'Foo';
+  return webhook;
+}
+```
+
+#### Filter
+
+To filter webhooks from being sent to an endpoint, you just need to set `webhook.cancel = true`. In this example we filter webhooks to an endpoint based on the import `metadata` (a parameter you can provide the [SDK](/sdk/react#properties)):
+
+<Frame>
+![Transformations](/assets/webhooks-transformations-filter.jpg)
+</Frame>
+
+```javascript
+function handler(webhook) {
+  if (webhook.payload.metadata?.environment !== 'development') {
+    webhook.cancel = true;
+  }
+  return webhook;
+}
+```