diff --git a/packages/features/data-table/DataTableProvider.tsx b/packages/features/data-table/DataTableProvider.tsx index 36ea4c2800..e0c1840c6b 100644 --- a/packages/features/data-table/DataTableProvider.tsx +++ b/packages/features/data-table/DataTableProvider.tsx @@ -74,6 +74,7 @@ interface DataTableProviderProps { children: React.ReactNode; ctaContainerClassName?: string; defaultPageSize?: number; + segments?: FilterSegmentOutput[]; } export function DataTableProvider({ @@ -82,6 +83,7 @@ export function DataTableProvider({ useSegments = useSegmentsNoop, defaultPageSize = DEFAULT_PAGE_SIZE, ctaContainerClassName = CTA_CONTAINER_CLASS_NAME, + segments: providedSegments, }: DataTableProviderProps) { const filterToOpen = useRef(undefined); const [activeFilters, setActiveFilters] = useQueryState("activeFilters", activeFiltersParser); @@ -182,6 +184,7 @@ export function DataTableProvider({ setPageSize, setPageIndex, setSearchTerm, + segments: providedSegments, } ); diff --git a/packages/features/data-table/hooks/useSegments.ts b/packages/features/data-table/hooks/useSegments.ts index ec9e6b7716..2357538e4d 100644 --- a/packages/features/data-table/hooks/useSegments.ts +++ b/packages/features/data-table/hooks/useSegments.ts @@ -26,15 +26,24 @@ export const useSegments: UseSegments = ({ setPageSize, setPageIndex, setSearchTerm, + segments: providedSegments, }) => { - const { data: rawSegments, isFetching: isFetchingSegments } = trpc.viewer.filterSegments.list.useQuery({ - tableIdentifier, - }); + const { data: rawSegments, isFetching: isFetchingSegments } = trpc.viewer.filterSegments.list.useQuery( + { + tableIdentifier, + }, + { + enabled: !providedSegments, // Only fetch if segments are not provided + } + ); // Recalculate date ranges based on the current timestamp const segments = useMemo(() => { - if (!rawSegments) return []; - return rawSegments.map((segment) => ({ + const segmentsSource = providedSegments || rawSegments; + + if (!segmentsSource) return []; + + return segmentsSource.map((segment) => ({ ...segment, activeFilters: segment.activeFilters.map((filter) => { if (isDateRangeFilterValue(filter.v)) { @@ -46,7 +55,7 @@ export const useSegments: UseSegments = ({ return filter; }), })); - }, [rawSegments]); + }, [rawSegments, providedSegments]); const selectedSegment = useMemo( () => segments?.find((segment) => segment.id === segmentId), diff --git a/packages/features/data-table/lib/types.ts b/packages/features/data-table/lib/types.ts index 2d85785b09..e4410b4014 100644 --- a/packages/features/data-table/lib/types.ts +++ b/packages/features/data-table/lib/types.ts @@ -270,7 +270,7 @@ export const ZSegmentStorage = z.record( export type UseSegments = (props: UseSegmentsProps) => UseSegmentsReturn; -type UseSegmentsProps = { +export type UseSegmentsProps = { tableIdentifier: string; activeFilters: ActiveFilters; sorting: SortingState; @@ -288,9 +288,10 @@ type UseSegmentsProps = { setPageSize: (pageSize: number) => void; setPageIndex: (pageIndex: number) => void; setSearchTerm: (searchTerm: string | null) => void; + segments?: FilterSegmentOutput[]; }; -type UseSegmentsReturn = { +export type UseSegmentsReturn = { segments: FilterSegmentOutput[]; selectedSegment: FilterSegmentOutput | undefined; canSaveSegment: boolean;