From 577ba4301ccb11dc7fb0b24fa97b183e9c5da174 Mon Sep 17 00:00:00 2001 From: David Porter Date: Wed, 4 Feb 2026 12:29:39 +1100 Subject: [PATCH 1/2] AP-6989 # fixed display of repeatable set values --- CHANGELOG.md | 1 + .../formStore/table/ColumnFilters.tsx | 63 ++++++++-------- .../formStore/table/RepeatableSetCell.tsx | 2 +- .../formStore/table/generateColumns.tsx | 75 ++++++++++--------- 4 files changed, 72 insertions(+), 69 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43243e646..90d64f869 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Columns not sizing correctly when headers change +- Not displaying repeatable set values ## [9.0.0] - 2026-02-02 diff --git a/src/components/formStore/table/ColumnFilters.tsx b/src/components/formStore/table/ColumnFilters.tsx index 4b2911979..7d2104e7b 100644 --- a/src/components/formStore/table/ColumnFilters.tsx +++ b/src/components/formStore/table/ColumnFilters.tsx @@ -45,8 +45,8 @@ function ColumnFilters({ filter }: Props) { filter.onChange( e.target.value ? { - $eq: e.target.value, - } + $eq: e.target.value, + } : undefined, true, ) @@ -69,10 +69,10 @@ function ColumnFilters({ filter }: Props) { filter.onChange( e.target.value ? { - $regex: e.target.value, - // hard code case in-sensitive and multi-line searching - $options: 'im', - } + $regex: e.target.value, + // hard code case in-sensitive and multi-line searching + $options: 'im', + } : undefined, true, ) @@ -101,9 +101,9 @@ function ColumnFilters({ filter }: Props) { typeof filter.value?.$lte === 'number' || newValue !== undefined ? { - ...filter.value, - $gte: newValue, - } + ...filter.value, + $gte: newValue, + } : undefined, true, ) @@ -127,9 +127,9 @@ function ColumnFilters({ filter }: Props) { typeof filter.value?.$gte === 'number' || newValue !== undefined ? { - ...filter.value, - $lte: newValue, - } + ...filter.value, + $lte: newValue, + } : undefined, true, ) @@ -159,9 +159,9 @@ function ColumnFilters({ filter }: Props) { filter.onChange( filter.value?.$lte || !!newDate ? { - ...filter.value, - $gte: newDate, - } + ...filter.value, + $gte: newDate, + } : undefined, false, ) @@ -185,9 +185,9 @@ function ColumnFilters({ filter }: Props) { filter.onChange( filter.value?.$gte || !!newDate ? { - ...filter.value, - $lte: newDate, - } + ...filter.value, + $lte: newDate, + } : undefined, false, ) @@ -217,14 +217,13 @@ function ColumnFilters({ filter }: Props) { filter.onChange( filter.value?.$lte || !!newDate ? { - ...filter.value, - $gte: newDate, - } + ...filter.value, + $gte: newDate, + } : undefined, false, ) - } - } + }} /> @@ -244,9 +243,9 @@ function ColumnFilters({ filter }: Props) { filter.onChange( filter.value?.$gte || !!newDate ? { - ...filter.value, - $lte: newDate, - } + ...filter.value, + $lte: newDate, + } : undefined, false, ) @@ -287,8 +286,8 @@ function ColumnFilters({ filter }: Props) { filter.onChange( newValue.length ? { - $in: newValue, - } + $in: newValue, + } : undefined, false, ) @@ -305,10 +304,10 @@ function ColumnFilters({ filter }: Props) { filter.onChange( newValue.length ? { - $elemMatch: { - $in: newValue, - }, - } + $elemMatch: { + $in: newValue, + }, + } : undefined, false, ) diff --git a/src/components/formStore/table/RepeatableSetCell.tsx b/src/components/formStore/table/RepeatableSetCell.tsx index e9e742f1f..fecb97592 100644 --- a/src/components/formStore/table/RepeatableSetCell.tsx +++ b/src/components/formStore/table/RepeatableSetCell.tsx @@ -66,7 +66,7 @@ const RepeatableSetCell = ({ formElement, value }: Props) => { onChange={toggleVisibility} > - {getRowModel().rows.map((row, i) => { + {rows.map((row, i) => { const isLast = i === rows.length - 1 return ( diff --git a/src/components/formStore/table/generateColumns.tsx b/src/components/formStore/table/generateColumns.tsx index 43ec85e5b..63a937c18 100644 --- a/src/components/formStore/table/generateColumns.tsx +++ b/src/components/formStore/table/generateColumns.tsx @@ -335,43 +335,46 @@ const generateColumns = < break } default: { - const col = columnHelper.display({ - id: ['FORM_ELEMENT', ...parentElementNames, formElement.name].join( - '_', - ), - header: formElement.label, - meta: { - sorting: generateSorting({ - formElement, - sorting, - parentElementNames, - }), - tooltip: formElement.tooltip || formElement.name, - formElementType: formElement.type, - filter: generateFilter({ - formElement, - onChangeParameters, - rootSubmissionFilters: filters?.submission, - parentElementNames, - }), - }, - cell: ({ row: { original: formStoreRecord } }) => { - const submission = parentElementNames.reduce< - SubmissionTypes.S3SubmissionData['submission'] - >( - (memo, elementName) => - memo?.[elementName] as FormStoreRecord['submission'], - formStoreRecord.submission, - ) - return ( - - ) + const col = columnHelper.accessor( + (row) => row.submission[formElement.name], + { + id: ['FORM_ELEMENT', ...parentElementNames, formElement.name].join( + '_', + ), + header: formElement.label, + meta: { + sorting: generateSorting({ + formElement, + sorting, + parentElementNames, + }), + tooltip: formElement.tooltip || formElement.name, + formElementType: formElement.type, + filter: generateFilter({ + formElement, + onChangeParameters, + rootSubmissionFilters: filters?.submission, + parentElementNames, + }), + }, + cell: ({ row: { original: formStoreRecord } }) => { + const submission = parentElementNames.reduce< + SubmissionTypes.S3SubmissionData['submission'] + >( + (memo, elementName) => + memo?.[elementName] as FormStoreRecord['submission'], + formStoreRecord.submission, + ) + return ( + + ) + }, }, - }) + ) columns.push(col) break } From c487dddb650e6f046c2106ae01d8ba90b47eb5f0 Mon Sep 17 00:00:00 2001 From: David Porter Date: Wed, 4 Feb 2026 12:45:26 +1100 Subject: [PATCH 2/2] AP-6989 # use flexRender instead of getValue --- .../formStore/table/RepeatableSetCell.tsx | 13 +++- .../formStore/table/generateColumns.tsx | 75 +++++++++---------- 2 files changed, 46 insertions(+), 42 deletions(-) diff --git a/src/components/formStore/table/RepeatableSetCell.tsx b/src/components/formStore/table/RepeatableSetCell.tsx index fecb97592..c3d889b11 100644 --- a/src/components/formStore/table/RepeatableSetCell.tsx +++ b/src/components/formStore/table/RepeatableSetCell.tsx @@ -3,7 +3,11 @@ import { Typography, Divider as MuiDivider, styled } from '@mui/material' import { FormTypes, SubmissionTypes } from '@oneblink/types' import useBooleanState from '../../../hooks/useBooleanState' import generateColumns from './generateColumns' -import { getCoreRowModel, useReactTable } from '@tanstack/react-table' +import { + flexRender, + getCoreRowModel, + useReactTable, +} from '@tanstack/react-table' import RepeatableSetCellAccordion from './RepeatableSetCellAccordion' const Wrapper = styled('div')({ @@ -71,7 +75,10 @@ const RepeatableSetCell = ({ formElement, value }: Props) => { return ( {row.getAllCells().map((cell) => { - const cellValue = cell.getValue() + const cellValue = flexRender( + cell.column.columnDef.cell, + cell.getContext(), + ) if (!cellValue) return null return ( @@ -80,7 +87,7 @@ const RepeatableSetCell = ({ formElement, value }: Props) => { {cell.column.columnDef.header?.toString() || ''}: - {cellValue as string} + {cellValue} ) })} diff --git a/src/components/formStore/table/generateColumns.tsx b/src/components/formStore/table/generateColumns.tsx index 63a937c18..43ec85e5b 100644 --- a/src/components/formStore/table/generateColumns.tsx +++ b/src/components/formStore/table/generateColumns.tsx @@ -335,46 +335,43 @@ const generateColumns = < break } default: { - const col = columnHelper.accessor( - (row) => row.submission[formElement.name], - { - id: ['FORM_ELEMENT', ...parentElementNames, formElement.name].join( - '_', - ), - header: formElement.label, - meta: { - sorting: generateSorting({ - formElement, - sorting, - parentElementNames, - }), - tooltip: formElement.tooltip || formElement.name, - formElementType: formElement.type, - filter: generateFilter({ - formElement, - onChangeParameters, - rootSubmissionFilters: filters?.submission, - parentElementNames, - }), - }, - cell: ({ row: { original: formStoreRecord } }) => { - const submission = parentElementNames.reduce< - SubmissionTypes.S3SubmissionData['submission'] - >( - (memo, elementName) => - memo?.[elementName] as FormStoreRecord['submission'], - formStoreRecord.submission, - ) - return ( - - ) - }, + const col = columnHelper.display({ + id: ['FORM_ELEMENT', ...parentElementNames, formElement.name].join( + '_', + ), + header: formElement.label, + meta: { + sorting: generateSorting({ + formElement, + sorting, + parentElementNames, + }), + tooltip: formElement.tooltip || formElement.name, + formElementType: formElement.type, + filter: generateFilter({ + formElement, + onChangeParameters, + rootSubmissionFilters: filters?.submission, + parentElementNames, + }), }, - ) + cell: ({ row: { original: formStoreRecord } }) => { + const submission = parentElementNames.reduce< + SubmissionTypes.S3SubmissionData['submission'] + >( + (memo, elementName) => + memo?.[elementName] as FormStoreRecord['submission'], + formStoreRecord.submission, + ) + return ( + + ) + }, + }) columns.push(col) break }