fix: table behaviour

e2e/pairwise.spec.ts

@@ -21,8 +21,7 @@ for (const [label, story] of stories) {
 		await page.getByRole('button', { name: 'Next' }).click();
 		await page.getByText('Sa fille, son fils').click();
 		await expect(page.getByText('Sa mère, son père')).toBeVisible();
-		await gotoNextPage(page, 2);
-		await expect(page.getByText('END')).toBeVisible();
+		await gotoNextPage(page);
 		await expectLunaticData(page, 'COLLECTED.LINKS.COLLECTED', [
 			[null, '3', null, null],
 			['2', null, null, null],

src/components/index.ts

@@ -20,7 +20,7 @@ export { default as Switch } from './switch';
 export { default as Textarea } from './textarea';
 export { default as SuggesterLoaderWidget } from './suggester-loader-widget';
 export { default as Roundabout } from './roundabout';
-export { default as Table } from './table';
+export { LunaticTable as Table } from './table/lunatic-table';
 export { LunaticComponentSet as ComponentSet } from './component-set/lunatic-component-set';
 export { default as Duration } from './duration';
 export { Summary } from './summary';

src/components/loop/block-for-loop.tsx

@@ -27,8 +27,9 @@ export const BlockForLoop = createCustomizableLunaticField<
 		iterations,
 		getComponents,
 	} = props;
-	const min = lines?.min;
-	const max = lines?.max;
+	const min = lines?.min ?? 0;
+	const max = lines?.max ?? Infinity;
+	const canControlRows = min !== max;
 
 	const [nbRows, setNbRows] = useState(() => {
 		return Math.max(iterations, min);
@@ -60,6 +61,7 @@ export const BlockForLoop = createCustomizableLunaticField<
 	if (nbRows <= 0) {
 		return null;
 	}
+
 	return (
 		<>
 			<DeclarationsBeforeText declarations={declarations} id={id} />
@@ -72,7 +74,7 @@ export const BlockForLoop = createCustomizableLunaticField<
 				/>
 			))}
 			<DeclarationsDetachable declarations={declarations} id={id} />
-			{Number.isInteger(min) && Number.isInteger(max) && min !== max && (
+			{canControlRows && (
 				<>
 					<LoopButton onClick={addRow} disabled={nbRows === max}>
 						{label || D.DEFAULT_BUTTON_ADD}

src/components/loop/roster-for-loop/roster-for-loop.tsx

@@ -9,7 +9,7 @@ import { LoopButton } from '../loop-button';
 import D from '../../../i18n';
 import type { LunaticComponentProps } from '../../type';
 import { Table, Tbody, Td, Tr } from '../../commons/components/html-table';
-import Header from '../../table/header';
+import { TableHeader } from '../../table/table-header';
 import { times } from '../../../utils/array';
 import { LunaticComponents } from '../../lunatic-components';
 
@@ -65,7 +65,7 @@ export const RosterForLoop = createCustomizableLunaticField<
 			<DeclarationsAfterText declarations={declarations} id={id} />
 
 			<Table id={id}>
-				<Header header={headers} id={id} />
+				<TableHeader header={headers} id={id} />
 				<Tbody id={id}>
 					{times(nbRows, (n) => (
 						<Row {...props} key={n} row={n} />

src/components/lunatic-components.tsx

@@ -1,23 +1,27 @@
 import {
 	Fragment,
-	useEffect,
-	useRef,
 	type PropsWithChildren,
+	type ReactElement,
 	type ReactNode,
+	useEffect,
+	useRef,
 } from 'react';
 import * as lunaticComponents from './index';
 import type { FilledLunaticComponentProps } from '../use-lunatic/commons/fill-components/fill-components';
+import { hasComponentType } from '../use-lunatic/commons/component';
 
 type Props<T extends Record<string, unknown>> = {
 	// List of components to display (coming from getComponents)
-	components: FilledLunaticComponentProps[];
+	components: (FilledLunaticComponentProps | ReactElement)[];
 	// Key that trigger autofocus when it changes (pageTag)
 	autoFocusKey?: string;
 	// Returns the list of extra props to add to components
 	componentProps?: (component: FilledLunaticComponentProps) => T;
 	// Add additional wrapper around each component
 	wrapper?: (
-		props: PropsWithChildren<FilledLunaticComponentProps & T>
+		props: PropsWithChildren<
+			FilledLunaticComponentProps & T & { index: number }
+		>
 	) => ReactNode;
 };
 
@@ -54,16 +58,28 @@ export function LunaticComponents<T extends Record<string, unknown>>({
 			ref={WrapperComponent === Fragment ? undefined : wrapperRef}
 		>
 			{components.map((component, k) => {
-				const props = {
-					...component,
-					...componentProps?.(component),
-				};
+				if (hasComponentType(component)) {
+					const props = {
+						...component,
+						...componentProps?.(component),
+					};
+					return (
+						<Fragment key={'id' in component ? component.id : `index-${k}`}>
+							{wrapper({
+								children: <LunaticComponent {...props} />,
+								index: k,
+								...props,
+							})}
+						</Fragment>
+					);
+				}
+				// In some case (table for instance) we have static component that only have a label (no componentType)
 				return (
-					<Fragment key={'id' in component ? component.id : `index-${k}`}>
+					<Fragment key={`index-${k}`}>
 						{wrapper({
-							children: <LunaticComponent {...props} />,
-							...props,
-						})}
+							children: component,
+							index: k,
+						} as any)}
 					</Fragment>
 				);
 			})}

src/components/table/lunatic-table.tsx

@@ -1,19 +1,16 @@
-import { Table, Tbody } from '../commons/components/html-table';
-import Header from './header';
+import { Table, Tbody, Td, Tr } from '../commons/components/html-table';
 import LunaticComponent from '../commons/components/lunatic-component-with-label';
-import TableOrchestrator from './table-orchestrator';
 import type { LunaticComponentProps } from '../type';
 import { Errors } from '../commons';
+import { LunaticComponents } from '../lunatic-components';
+import { TableHeader } from './table-header';
 
-function LunaticTable(props: LunaticComponentProps<'Table'>) {
+export function LunaticTable(props: LunaticComponentProps<'Table'>) {
 	const {
 		id,
 		handleChange,
-		value,
 		body,
 		header,
-		executeExpression,
-		iteration,
 		errors,
 		missing,
 		declarations,
@@ -35,16 +32,20 @@ function LunaticTable(props: LunaticComponentProps<'Table'>) {
 			handleChange={handleChange}
 		>
 			<Table id={id}>
-				<Header id={id} header={header} />
+				<TableHeader id={id} header={header} />
 				<Tbody>
-					<TableOrchestrator
-						id={id}
-						body={body}
-						executeExpression={executeExpression}
-						handleChange={handleChange}
-						iteration={iteration}
-						value={value}
-					/>
+					{body.map((row, rowIndex) => (
+						<Tr id={id} row={rowIndex}>
+							<LunaticComponents
+								components={row}
+								wrapper={({ children, index }) => (
+									<Td id={id} row={rowIndex} index={index}>
+										{children}
+									</Td>
+								)}
+							/>
+						</Tr>
+					))}
 				</Tbody>
 			</Table>
 			<Errors errors={errors} activeId={id} />