diff --git a/frontend/src/lib/components/LemonTable/LemonTable.tsx b/frontend/src/lib/components/LemonTable/LemonTable.tsx index d57513813ee1f..2574746e6807b 100644 --- a/frontend/src/lib/components/LemonTable/LemonTable.tsx +++ b/frontend/src/lib/components/LemonTable/LemonTable.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx' import { useActions, useValues } from 'kea' import { router } from 'kea-router' -import React, { HTMLProps, useCallback, useEffect, useMemo } from 'react' +import React, { HTMLProps, useCallback, useEffect, useMemo, useState } from 'react' import { Tooltip } from '../Tooltip' import { TableRow } from './TableRow' import './LemonTable.scss' @@ -62,6 +62,8 @@ export interface LemonTableProps> { sorting?: Sorting | null /** Sorting change handler for controlled sort order. */ onSort?: (newSorting: Sorting | null) => void + /** Defaults to true. Used if you don't want to use the URL to store sort order **/ + useURLForSorting?: boolean /** How many skeleton rows should be used for the empty loading state. The default value is 1. */ loadingSkeletonRows?: number /** What to show when there's no data. */ @@ -94,6 +96,7 @@ export function LemonTable>({ defaultSorting = null, sorting, onSort, + useURLForSorting = true, loadingSkeletonRows = 1, emptyState, nouns = ['entry', 'entries'], @@ -108,19 +111,27 @@ export function LemonTable>({ const { location, searchParams, hashParams } = useValues(router) const { push } = useActions(router) - /** Replace the current browsing history item to change sorting */ + // used when not using URL to store sorting + const [internalSorting, setInternalSorting] = useState(sorting || null) + + /** update sorting and conditionally replace the current browsing history item */ const setLocalSorting = useCallback( - (newSorting: Sorting | null) => - push( - location.pathname, - { - ...searchParams, - [currentSortingParam]: newSorting - ? `${newSorting.order === -1 ? '-' : ''}${newSorting.columnKey}` - : undefined, - }, - hashParams - ), + (newSorting: Sorting | null) => { + setInternalSorting(newSorting) + onSort?.(newSorting) + if (useURLForSorting) { + return push( + location.pathname, + { + ...searchParams, + [currentSortingParam]: newSorting + ? `${newSorting.order === -1 ? '-' : ''}${newSorting.columnKey}` + : undefined, + }, + hashParams + ) + } + }, [location, searchParams, hashParams, push] ) @@ -140,6 +151,7 @@ export function LemonTable>({ /** Sorting. */ const currentSorting = sorting || + internalSorting || (searchParams[currentSortingParam] ? searchParams[currentSortingParam].startsWith('-') ? { @@ -248,8 +260,8 @@ export function LemonTable>({ determineColumnKey(column, 'sorting'), disableSortingCancellation ) + setLocalSorting(nextSorting) - onSort?.(nextSorting) } : undefined } diff --git a/frontend/src/scenes/insights/InsightContainer.tsx b/frontend/src/scenes/insights/InsightContainer.tsx index 22534c9bef118..92542e7797319 100644 --- a/frontend/src/scenes/insights/InsightContainer.tsx +++ b/frontend/src/scenes/insights/InsightContainer.tsx @@ -117,7 +117,7 @@ export function InsightContainer( ) { return ( <> -

Detailed results

+

Detailed results

) @@ -137,7 +137,7 @@ export function InsightContainer( return ( <> {exporterResourceParams && ( -
+

Detailed results

) }