@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/FormComponents/DateTimeItem/DateTimeItem.tsx

@@ -0,0 +1,94 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import DateTimeField from './DateTimeField';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+interface DateTimeItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function DateTimeItem(props: DateTimeItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Init input value
+  let dateTimeString: string | null = null;
+  if (qrItem?.answer && qrItem?.answer[0].valueDateTime) {
+    dateTimeString = qrItem.answer[0].valueDateTime;
+  }
+  const dateTimeDayJs = dateTimeString ? dayjs(dateTimeString) : null;
+
+  // Event handlers
+  function handleDateTimeChange(newValue: Dayjs | null) {
+    const emptyQrItem = createEmptyQrItem(qItem);
+    if (newValue) {
+      onQrItemChange({ ...emptyQrItem, answer: [{ valueDateTime: newValue.format() }] });
+    } else {
+      onQrItemChange(emptyQrItem);
+    }
+  }
+
+  if (isRepeated) {
+    return (
+      <DateTimeField
+        value={dateTimeDayJs}
+        displayPrompt={displayPrompt}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        onDateTimeChange={handleDateTimeChange}
+        isTabled={isTabled}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-date-time-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <DateTimeField
+          value={dateTimeDayJs}
+          displayPrompt={displayPrompt}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          onDateTimeChange={handleDateTimeChange}
+          isTabled={isTabled}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default DateTimeItem;

package/src/components/FormComponents/DecimalItem/DecimalField.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { InputAdornment } from '@mui/material';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import { StandardTextField } from '../Textfield.styles';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+
+interface DecimalFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  input: string;
+  feedback: string;
+  displayPrompt: string;
+  displayUnit: string;
+  entryFormat: string;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onInputChange: (value: string) => void;
+}
+
+function DecimalField(props: DecimalFieldProps) {
+  const {
+    linkId,
+    input,
+    feedback,
+    displayPrompt,
+    displayUnit,
+    entryFormat,
+    readOnly,
+    calcExpUpdated,
+    isTabled,
+    onInputChange
+  } = props;
+
+  return (
+    <StandardTextField
+      id={linkId}
+      value={input}
+      error={!!feedback}
+      onChange={(event) => onInputChange(event.target.value)}
+      disabled={readOnly}
+      label={displayPrompt}
+      placeholder={entryFormat}
+      fullWidth
+      isTabled={isTabled}
+      size="small"
+      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position={'end'}>
+            <FadingCheckIcon fadeIn={calcExpUpdated} />
+            {displayUnit}
+          </InputAdornment>
+        )
+      }}
+      data-test="q-item-decimal-field"
+    />
+  );
+}
+
+export default DecimalField;

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback, useState } from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValidationError from '../../../hooks/useValidationError';
+import debounce from 'lodash.debounce';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { createEmptyQrItemWithUnit } from '../../../utils/qrItem';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import DecimalField from './DecimalField';
+import {
+  parseDecimalStringToFloat,
+  parseDecimalStringWithPrecision
+} from '../../../utils/parseInputs';
+import { getDecimalPrecision } from '../../../utils/itemControl';
+import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
+
+interface DecimalItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function DecimalItem(props: DecimalItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const precision = getDecimalPrecision(qItem);
+  const {
+    displayUnit,
+    displayPrompt,
+    displayInstructions,
+    readOnly,
+    entryFormat,
+    regexValidation,
+    maxLength
+  } = useRenderingExtensions(qItem);
+
+  // Init input value
+  let valueDecimal = 0.0;
+  let initialInput = '0';
+  if (qrItem?.answer) {
+    if (qrItem?.answer[0].valueDecimal) {
+      valueDecimal = qrItem.answer[0].valueDecimal;
+    }
+
+    if (qrItem?.answer[0].valueInteger) {
+      valueDecimal = qrItem.answer[0].valueInteger;
+    }
+
+    initialInput = precision ? valueDecimal.toFixed(precision) : valueDecimal.toString();
+  }
+  const [input, setInput] = useState(initialInput);
+
+  // Perform validation checks
+  const feedback = useValidationError(input, regexValidation, maxLength);
+
+  // Process calculated expressions
+  const { calcExpUpdated } = useDecimalCalculatedExpression({
+    qItem: qItem,
+    inputValue: input,
+    displayUnit: displayUnit,
+    precision: precision,
+    setInputValue: (newInput) => {
+      setInput(newInput);
+    },
+    onQrItemChange: onQrItemChange
+  });
+
+  // Event handlers
+  function handleInputChange(newInput: string) {
+    const parsedNewInput: string = parseDecimalStringWithPrecision(newInput, precision);
+
+    setInput(parsedNewInput);
+    updateQrItemWithDebounce(parsedNewInput);
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateQrItemWithDebounce = useCallback(
+    debounce((parsedNewInput: string) => {
+      onQrItemChange({
+        ...createEmptyQrItemWithUnit(qItem, displayUnit),
+        answer: precision
+          ? [{ valueDecimal: parseDecimalStringToFloat(parsedNewInput, precision) }]
+          : [{ valueDecimal: parseFloat(parsedNewInput) }]
+      });
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem, displayUnit, precision]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  if (isRepeated) {
+    return (
+      <DecimalField
+        linkId={qItem.linkId}
+        input={input}
+        feedback={feedback}
+        displayPrompt={displayPrompt}
+        displayUnit={displayUnit}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
+        isTabled={isTabled}
+        onInputChange={handleInputChange}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-decimal-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <DecimalField
+          linkId={qItem.linkId}
+          input={input}
+          feedback={feedback}
+          displayPrompt={displayPrompt}
+          displayUnit={displayUnit}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          isTabled={isTabled}
+          onInputChange={handleInputChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default DecimalItem;

package/src/components/FormComponents/DisplayItem/DisplayInstructions.styles.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Box, styled } from '@mui/material';
+
+export const DisplayInstructionsWrapper = styled(Box)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textTransform: 'capitalize',
+  marginBottom: '8px'
+}));

package/src/components/FormComponents/DisplayItem/DisplayInstructions.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { memo } from 'react';
+import { Typography } from '@mui/material';
+import { DisplayInstructionsWrapper } from './DisplayInstructions.styles';
+
+interface DisplayInstructionsProps {
+  displayInstructions: string;
+}
+
+const DisplayInstructions = memo(function DisplayInstructions(props: DisplayInstructionsProps) {
+  const { displayInstructions } = props;
+
+  return displayInstructions ? (
+    <DisplayInstructionsWrapper>
+      <Typography variant="caption" fontSize={10.5}>
+        {displayInstructions}
+      </Typography>
+    </DisplayInstructionsWrapper>
+  ) : null;
+});
+
+export default DisplayInstructions;

package/src/components/FormComponents/DisplayItem/DisplayItem.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { memo } from 'react';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import { isSpecificItemControl } from '../../../utils/itemControl';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface DisplayItemProps {
+  qItem: QuestionnaireItem;
+}
+
+const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
+  const { qItem } = props;
+
+  const isContextDisplay = isSpecificItemControl(qItem, 'context-display');
+  if (isContextDisplay) {
+    return null;
+  }
+
+  return (
+    <FullWidthFormComponentBox>
+      <LabelWrapper qItem={qItem} />
+    </FullWidthFormComponentBox>
+  );
+});
+
+export default DisplayItem;

package/src/components/FormComponents/GridGroup/GridGroup.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import useHidden from '../../../hooks/useHidden';
+import { QGroupContainerBox } from '../../Box.styles';
+import { Divider, Paper, TableContainer, Typography } from '@mui/material';
+import { mapQItemsIndex } from '../../../utils/mapItem';
+import GridTable from './GridTable';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface GridGroupProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  groupCardElevation: number;
+}
+
+function GridGroup(props: GridGroupProps) {
+  const { qItem, qrItem, groupCardElevation, onQrItemChange } = props;
+
+  const qRowItems = qItem.item;
+  const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const qrRowItems = qrGroup.item;
+
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+
+  const columnLabels: string[] = useMemo(
+    () => qRowItems?.[0].item?.map((firstItem) => firstItem.text ?? ' ') ?? [],
+    [qRowItems]
+  );
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  if (!qRowItems || !qrRowItems) {
+    return <>Unable to load group, something has gone terribly wrong.</>;
+  }
+
+  // Check if there are row within the grid
+  if (qRowItems.length === 0) {
+    return null;
+  }
+
+  // Event Handlers
+  function handleRowChange(newQrItem: QuestionnaireResponseItem) {
+    const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
+    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    onQrItemChange(updatedQrGroup);
+  }
+
+  return (
+    <>
+      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
+        <Typography fontSize={13} variant="h6">
+          <LabelWrapper qItem={qItem} />
+        </Typography>
+        <Divider sx={{ my: 1 }} light />
+
+        <TableContainer component={Paper} elevation={groupCardElevation}>
+          <GridTable
+            qItems={qRowItems}
+            qrItems={qrRowItems}
+            qItemsIndexMap={qItemsIndexMap}
+            columnLabels={columnLabels}
+            onQrItemChange={handleRowChange}
+          />
+        </TableContainer>
+      </QGroupContainerBox>
+    </>
+  );
+}
+
+export default GridGroup;

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
+import SingleItem from '../SingleItem/SingleItem';
+import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
+import { Typography } from '@mui/material';
+
+interface GridRowProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  columnLabels: string[];
+  numOfColumns: number;
+}
+
+function GridRow(props: GridRowProps) {
+  const { qItem, qrItem, columnLabels, numOfColumns, onQrItemChange } = props;
+
+  const rowQItems = qItem.item;
+  const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const rowQrItems = row.item;
+
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+
+  if (!rowQItems || !rowQrItems) {
+    return null;
+  }
+
+  function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
+    const qrRow: QuestionnaireResponseItem = { ...row };
+    updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    onQrItemChange(qrRow);
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(rowQItems, rowQrItems, qItemsIndexMap);
+
+  return (
+    <>
+      <GridTextTableCell>
+        <Typography fontWeight="bold">{qItem.text}</Typography>
+      </GridTextTableCell>
+      {rowQItems.map((cellQItem, index) => {
+        const cellQrItem = qrItemsByIndex[index];
+
+        // Don't render cell if column label does not match - "sparse-ness" of grid
+        if (columnLabels[index] !== cellQItem.text) {
+          return null;
+        }
+
+        if (Array.isArray(cellQrItem)) {
+          return null;
+        }
+
+        return (
+          <GridAnswerTableCell key={index} numOfColumns={numOfColumns}>
+            <SingleItem
+              qItem={cellQItem}
+              qrItem={cellQrItem}
+              isRepeated={true}
+              isTabled={true}
+              onQrItemChange={handleQrRowItemChange}
+            />
+          </GridAnswerTableCell>
+        );
+      })}
+    </>
+  );
+}
+
+export default GridRow;

package/src/components/FormComponents/GridGroup/GridTable.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { HeaderTableCell } from '../Tables/Table.styles';
+import GridRow from './GridRow';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { getQrItemsIndex } from '../../../utils/mapItem';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+
+interface GridTableProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItems: QuestionnaireItem[];
+  qrItems: QuestionnaireResponseItem[];
+  qItemsIndexMap: Record<string, number>;
+  columnLabels: string[];
+}
+
+function GridTable(props: GridTableProps) {
+  const { qItems, qrItems, qItemsIndexMap, columnLabels, onQrItemChange } = props;
+
+  const qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
+    getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+
+  const numOfColumns = columnLabels.length;
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <HeaderTableCell />
+          {columnLabels.map((label) => (
+            <HeaderTableCell key={label}>{label}</HeaderTableCell>
+          ))}
+          <TableCell />
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {qItems.map((qItem, index) => {
+          const qrItem = qrItemsByIndex[index];
+
+          if (Array.isArray(qrItem)) {
+            return null;
+          }
+
+          return (
+            <TableRow key={qItem.linkId}>
+              <GridRow
+                qItem={qItem}
+                qrItem={qrItem}
+                columnLabels={columnLabels}
+                numOfColumns={numOfColumns}
+                onQrItemChange={onQrItemChange}
+              />
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default GridTable;