diff --git a/apps/builder/src/features/results/components/ResultModal.tsx b/apps/builder/src/features/results/components/ResultModal.tsx index ee6b07b66..163c04c3e 100644 --- a/apps/builder/src/features/results/components/ResultModal.tsx +++ b/apps/builder/src/features/results/components/ResultModal.tsx @@ -11,8 +11,10 @@ import { } from '@chakra-ui/react' import { useResults } from '../ResultsProvider' import React from 'react' -import { isDefined } from '@typebot.io/lib' +import { byId, isDefined } from '@typebot.io/lib' import { HeaderIcon } from './HeaderIcon' +import { useTypebot } from '@/features/editor/providers/TypebotProvider' +import { parseColumnOrder } from '../helpers/parseColumnsOrder' type Props = { resultId: string | null @@ -21,10 +23,16 @@ type Props = { export const ResultModal = ({ resultId, onClose }: Props) => { const { tableData, resultHeader } = useResults() + const { typebot } = useTypebot() const result = isDefined(resultId) ? tableData.find((data) => data.id.plainText === resultId) : undefined + const columnsOrder = parseColumnOrder( + typebot?.resultsTablePreferences?.columnsOrder, + resultHeader + ) + const getHeaderValue = ( val: string | { plainText: string; element?: JSX.Element | undefined } ) => (typeof val === 'string' ? val : val.element ?? val.plainText) @@ -35,8 +43,11 @@ export const ResultModal = ({ resultId, onClose }: Props) => { - {resultHeader.map((header) => - result && result[header.id] ? ( + {columnsOrder.map((headerId) => { + if (!result || !result[headerId]) return null + const header = resultHeader.find(byId(headerId)) + if (!header) return null + return ( @@ -46,8 +57,8 @@ export const ResultModal = ({ resultId, onClose }: Props) => { {getHeaderValue(result[header.id])} - ) : null - )} + ) + })}