pangeacyber · cj-f · Jul 28, 2025 · Jul 30, 2025
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.4] - 2025-07-28
+
+### Fixed
+
+- Add support filter menu accessible from column headers, onFiltersChange callback
+
 ## [2.0.3] - 2025-07-01
 
 ### Fixed

@@ -1,6 +1,6 @@
 {
   "name": "@pangeacyber/react-mui-audit-log-viewer",
-  "version": "2.0.3",
+  "version": "2.0.4-beta.5",
   "description": "An extension of material ui data-grid for Pangea audit log records",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

@@ -103,6 +103,9 @@ export interface AuditLogViewerProps<Event = Audit.DefaultEvent> {
   /** The public audit query to filter the audit log data */
   filters?: PublicAuditQuery;
 
+  /** Callback handler for everytime the filters are updated */
+  onFiltersChange?: (filters: PublicAuditQuery) => void;
+
   /** Authentication configuration. It is used to fetch your project's custom Audit schema, so the AuditLogViewer component can dynamically update when you update your configuration in the Pangea Console */
   config?: AuthConfig;
 
@@ -129,6 +132,7 @@ const AuditLogViewerWithProvider = <Event,>({
   schemaOptions,
   initialQuery,
   filters,
+  onFiltersChange,
   fpeOptions,
   filterOptions,
   ...props
@@ -295,6 +299,7 @@ const AuditLogViewerWithProvider = <Event,>({
       rowToLeafIndex={rowToLeafIndex}
       initialQuery={initialQuery}
       filters={filters}
+      onFiltersChange={onFiltersChange}
       filterOptions={filterOptions}
     >
       <AuditLogViewerComponent

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useRef } from "react";
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import mapValues from "lodash/mapValues";
 
 import { Box } from "@mui/material";
@@ -11,7 +11,7 @@ import {
   usePagination,
   useAuditBody,
 } from "../../hooks/context";
-import { LinedPangeaDataGrid } from "@pangeacyber/react-mui-shared";
+import { LinedPangeaDataGrid, PopoutCard } from "@pangeacyber/react-mui-shared";
 import AuditPreviewRow from "../AuditPreviewRow";
 import { AuditSecureColumn } from "./secureColumn";
 import AuditTimeFilterButton from "./AuditTimeFilterButton";
@@ -101,12 +101,34 @@ const AuditLogViewerComponent: FC<ViewerProps> = ({
 
     filterOptions,
   } = useAuditContext();
-  const { body, bodyWithoutQuery } = useAuditBody(limit, maxResults);
+  const { body, bodyWithoutQuery, tableSettingsQuery } = useAuditBody(
+    limit,
+    maxResults
+  );
   const pagination = usePagination();
   const defaultVisibility = useDefaultVisibility(schema);
   const defaultOrder = useDefaultOrder(schema);
 
-  const schemaColumns = useAuditColumns(schema, fields, fieldTypes);
+  const headerRefMap = useRef<Record<string, HTMLDivElement | null>>({});
+  const [activeFilterColumn, setActiveFilterColumn] = useState<string | null>(
+    null
+  );
+
+  const handleGetFilterRef = (field: string) => (el: any) => {
+    headerRefMap.current[field] = el;
+  };
+
+  const handleOnFilterOpen = (field: string, event: any) => {
+    setActiveFilterColumn(field);
+  };
+
+  const schemaColumns = useAuditColumns(
+    schema,
+    fields,
+    fieldTypes,
+    handleOnFilterOpen,
+    handleGetFilterRef
+  );
   const columns = useAuditColumnsWithErrors(schemaColumns, logs);
   const filterFields = useAuditFilterFields(schema, filterOptions);
   const conditionalOptions = useAuditConditionalOptions(schema, filterOptions);
@@ -121,6 +143,20 @@ const AuditLogViewerComponent: FC<ViewerProps> = ({
     return onSearch(bodyRef.current);
   };
 
+  useEffect(() => {
+    if (
+      tableSettingsQuery &&
+      !searchOnChange &&
+      // Check mount ref, so multiple use effects are not triggering the handleSearch
+      hasMountedRef.current !== undefined
+    ) {
+      setTimeout(() => {
+        handleSearch();
+        // Add slight delay since since filters may update the query string
+      }, 100);
+    }
+  }, [tableSettingsQuery, searchOnChange]);
+
   useEffect(() => {
     const initialQuery_ = initialQuery ?? "";
     if (
@@ -179,6 +215,17 @@ const AuditLogViewerComponent: FC<ViewerProps> = ({
         ".MuiDataGrid-root .MuiDataGrid-row.Mui-selected .MuiDataGrid-cell": {
           borderBottom: "none",
         },
+
+        ".AuditLogViewer-FilterButton": {
+          opacity: 0,
+        },
+
+        ".MuiDataGrid-columnHeader:hover": {
+          ".AuditLogViewer-FilterButton": {
+            opacity: 0.6,
+          },
+        },
+
         ...sx,
       }}
     >
@@ -272,6 +319,38 @@ const AuditLogViewerComponent: FC<ViewerProps> = ({
           },
         }}
       />
+      {activeFilterColumn && !!queryObj && (
+        <PopoutCard
+          anchorRef={{
+            current: activeFilterColumn
+              ? headerRefMap.current[activeFilterColumn]
+              : null,
+          }}
+          open={!!activeFilterColumn}
+          setOpen={(open) => {
+            if (!open) setActiveFilterColumn(null);
+          }}
+          flatTop
+        >
+          <div style={{ minWidth: "700px" }}>
+            <AuditLogViewerFiltersForm
+              initialField={activeFilterColumn}
+              knownLogs={logs}
+              // @ts-ignore
+              filters={queryObj}
+              options={filterFields}
+              onFilterChange={(values) => {
+                setQueryObj(
+                  mapValues(values, (v: any) =>
+                    typeof v === "string" ? v.trim() : v
+                  )
+                );
+                setActiveFilterColumn(null);
+              }}
+            />
+          </div>
+        </PopoutCard>
+      )}
     </Box>
   );
 };

@@ -10,6 +10,7 @@ import {
 
 import find from "lodash/find";
 import { getFieldValueOptions } from "../../hooks/schema";
+import { Audit } from "../../types";
 
 export interface AuditFieldFilter {
   id: string;
@@ -22,13 +23,16 @@ interface Props {
   onValueChange: (value: AuditFieldFilter) => void;
 
   options: FilterOptions<any>;
+
+  knownLogs?: Audit.FlattenedAuditRecord<any>[];
 }
 
 const FilterField: FC<Props> = ({
   value,
   onValueChange,
 
   options,
+  knownLogs,
 }) => {
   const { schema } = useAuditContext();
 
@@ -95,7 +99,7 @@ const FilterField: FC<Props> = ({
       return option?.valueOptions;
     }
 
-    return getFieldValueOptions(field, undefined);
+    return getFieldValueOptions(field, undefined, knownLogs);
   }, [value.id, field, options]);
 
   return (
@@ -130,6 +134,9 @@ const FilterField: FC<Props> = ({
             }
             FieldProps={{
               type: "singleSelect",
+              ValueTypographyProps: {
+                variant: "body2",
+              },
               options: {
                 valueOptions: fieldOptions,
               },
@@ -142,7 +149,7 @@ const FilterField: FC<Props> = ({
             }}
           />
         </Stack>
-        <Stack width="26%">
+        <Stack width="26%" sx={{ maxWidth: "125px" }}>
           <SelectField
             onValueChange={(operator) =>
               onValueChange({
@@ -153,6 +160,9 @@ const FilterField: FC<Props> = ({
             value={value.operator}
             FieldProps={{
               type: "singleSelect",
+              ValueTypographyProps: {
+                variant: "body2",
+              },
               options: {
                 valueOptions: operationOptions,
               },
@@ -168,7 +178,7 @@ const FilterField: FC<Props> = ({
             }}
           />
         </Stack>
-        <Stack width="37%">
+        <Stack width="37%" sx={{ width: "-webkit-fill-available" }}>
           <StringField
             value={value.value}
             onValueChange={(v) =>

@@ -11,18 +11,26 @@ import FilterField, { AuditFieldFilter } from "./FilterField";
 import JoinChip from "./JoinChip";
 import { useAuditContext } from "../../hooks/context";
 import { getAppliedFiltersQuery } from "./utils";
+import { Audit } from "../../types";
 
 interface AuditQueryFilters {
   fields: AuditFieldFilter[];
 }
 
 interface Props<FiltersObj = AuditQueryFilters> {
+  initialField?: string;
+
+  knownLogs?: Audit.FlattenedAuditRecord[];
+
   filters: FiltersObj;
   options: FilterOptions<FiltersObj>;
   onFilterChange: (filter: FiltersObj) => void;
 }
 
 const AuditLogViewerFiltersForm: FC<Props> = ({
+  initialField,
+  knownLogs,
+
   filters,
   options,
   onFilterChange,
@@ -39,15 +47,15 @@ const AuditLogViewerFiltersForm: FC<Props> = ({
       const options_ = Object.keys(options);
       return [
         {
-          id: !!options_?.length ? options_[0] : "",
+          id: initialField ?? (!!options_?.length ? options_[0] : ""),
           operator: "=",
           value: "",
         },
       ] as AuditFieldFilter[];
     }
 
     return values.fields;
-  }, [values, options]);
+  }, [values, options, initialField]);
 
   const isValid = useMemo(() => {
     return !!fields.filter(
@@ -132,6 +140,7 @@ const AuditLogViewerFiltersForm: FC<Props> = ({
                     value={f}
                     onValueChange={(f) => handleUpdate(f, idx)}
                     options={options}
+                    knownLogs={knownLogs}
                   />
                   {idx !== 0 && (
                     <RemoveButton onClick={() => handleRemoveCondition(idx)} />