diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
index 756844702c3e5..ef00497e9314c 100644
--- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
+++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -166,7 +166,7 @@ function ValueDisplay({
}
>
: undefined}
>
@@ -222,8 +222,8 @@ export function PropertiesTable({
parent,
}: PropertiesTableType): JSX.Element {
const [searchTerm, setSearchTerm] = useState('')
- const { hidePostHogPropertiesInTable } = useValues(userPreferencesLogic)
- const { setHidePostHogPropertiesInTable } = useActions(userPreferencesLogic)
+ const { hidePostHogPropertiesInTable, hideNullValues } = useValues(userPreferencesLogic)
+ const { setHidePostHogPropertiesInTable, setHideNullValues } = useActions(userPreferencesLogic)
const { isCloudOrDev } = useValues(preflightLogic)
const objectProperties = useMemo(() => {
@@ -283,11 +283,18 @@ export function PropertiesTable({
})
}
- if (filterable && hidePostHogPropertiesInTable) {
- entries = entries.filter(([key]) => {
- const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key)
- const isNonDollarPostHogProperty = isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
- return !isPostHogProperty && !isNonDollarPostHogProperty
+ if (filterable) {
+ entries = entries.filter(([key, value]) => {
+ if (hideNullValues && value === null) {
+ return false
+ }
+ if (hidePostHogPropertiesInTable) {
+ const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key)
+ const isNonDollarPostHogProperty =
+ isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
+ return !isPostHogProperty && !isNonDollarPostHogProperty
+ }
+ return true
})
}
@@ -299,7 +306,7 @@ export function PropertiesTable({
})
}
return entries
- }, [properties, sortProperties, searchTerm, hidePostHogPropertiesInTable])
+ }, [properties, sortProperties, searchTerm, hidePostHogPropertiesInTable, hideNullValues])
if (Array.isArray(properties)) {
return (
@@ -424,7 +431,7 @@ export function PropertiesTable({
return (
<>
{(searchable || filterable) && (
-
+
{searchable && (
)}
{filterable && (
-
+ <>
+
+
+
+ >
)}
diff --git a/frontend/src/lib/logic/userPreferencesLogic.ts b/frontend/src/lib/logic/userPreferencesLogic.ts
index 4bbcdd352a91c..f15d4abce5713 100644
--- a/frontend/src/lib/logic/userPreferencesLogic.ts
+++ b/frontend/src/lib/logic/userPreferencesLogic.ts
@@ -7,6 +7,7 @@ export const userPreferencesLogic = kea([
path(['lib', 'logic', 'userPreferencesLogic']),
actions({
setHidePostHogPropertiesInTable: (enabled: boolean) => ({ enabled }),
+ setHideNullValues: (enabled: boolean) => ({ enabled }),
}),
reducers(() => ({
hidePostHogPropertiesInTable: [
@@ -16,5 +17,6 @@ export const userPreferencesLogic = kea([
setHidePostHogPropertiesInTable: (_, { enabled }) => enabled,
},
],
+ hideNullValues: [true, { persist: true }, { setHideNullValues: (_, { enabled }) => enabled }],
})),
])