fix(frontend): expose Filters + Displayed row count in the outputs (#3101)

* fix(frontend): expose Filters + Displayed row count in the outputs

* fix(frontend): expose Filters + Displayed row count in the outputs

* feat(frontend): update wizard to support filters

* Update AppAggridTable.svelte

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -77,7 +77,9 @@
 		loading: false,
 		page: 0,
 		newChange: { row: 0, column: '', value: undefined },
-		ready: undefined as boolean | undefined
+		ready: undefined as boolean | undefined,
+		filters: {},
+		displayedRowCount: 0
 	})
 
 	let selectedRowIndex = -1
@@ -177,6 +179,7 @@
 							state = e?.api?.getState()
 							resolvedConfig?.extraConfig?.['onStateUpdated']?.(e)
 						},
+
 						onGridReady: (e) => {
 							outputs?.ready.set(true)
 							value = value
@@ -196,6 +199,11 @@
 							onSelectionChanged(e.api)
 							resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e)
 						},
+						onFilterChanged: (e) => {
+							outputs?.filters?.set(e.api.getFilterModel())
+							outputs?.displayedRowCount?.set(e.api.getDisplayedRowCount())
+							resolvedConfig?.extraConfig?.['onFilterChanged']?.(e)
+						},
 						getRowId: (data) => data.data['__index']
 					},
 					{}
@@ -234,6 +242,12 @@
 
 	function updateValue() {
 		api?.updateGridOptions({ rowData: value })
+
+		const displayedRowCount = api?.getDisplayedRowCount()
+		if (displayedRowCount) {
+			outputs?.displayedRowCount?.set(displayedRowCount)
+		}
+
 		if (api) {
 			onSelectionChanged(api)
 		}

frontend/src/lib/components/wizards/AgGridWizard.svelte

@@ -24,6 +24,7 @@
 		field: string
 		headerName: string
 		editable: boolean
+		filter: boolean
 	}
 
 	export let value: Column | undefined
@@ -220,6 +221,23 @@
 				</select>
 			</Label>
 
+			<Label label="Filter">
+				<svelte:fragment slot="header">
+					<Tooltip documentationLink="https://www.ag-grid.com/javascript-data-grid/filtering/">
+						Filtering allows you to limit the rows displayed in your grid to those that match
+						criteria you specify.
+					</Tooltip>
+				</svelte:fragment>
+				<Toggle
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+					}}
+					options={{ right: 'Enable filter' }}
+					bind:checked={value.filter}
+					size="xs"
+				/>
+			</Label>
+
 			<!--
 		EE only