gistfile1.txt

const EditableCell: React.FC<any> = ({ row, field, control }) => {
  return (
    <Controller
      name={`${row.id}.${field}`}
      control={control}
      render={({ field: { ref, ...inputProps }, fieldState: { invalid, error } }) => (
        <TextField
          {...inputProps}
          error={invalid}
          helperText={error?.message}
          fullWidth
        />
      )}
    />
  );
};

gistfile2.txt

const createSchemaForRow = (rowId: number | string) => {
  return yup.object({
    [`${rowId}.sei`]: yup.string().required('必須項目です'),
    [`${rowId}.mei`]: yup.string().required('必須項目です'),
    [`${rowId}.position`]: yup.string().required('必須項目です'),
  });
};

const universalValidationSchema = (rows: any[]) => {
  const shape = {};
  rows.forEach(row => {
    Object.assign(shape, createSchemaForRow(row.id).fields);
  });

  return yup.object().shape(shape);
};

const DataTable: React.FC = () => {
  const [rows, setRows] = useState<any[]>(initialRows);
  const currentSchema = universalValidationSchema(rows);

  const { control, handleSubmit, formState } = useForm<IFormInput>({
    resolver: yupResolver(currentSchema),
  });

  const onSubmit: SubmitHandler<IFormInput> = (data) => {
    console.log(data);
  };

  const addRow = () => {
    const newRow = { id: new Date().getTime(), sei: "", mei: "", position: "" }; // 簡単なID生成の例
    setRows(prev => [...prev, newRow]);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Button onClick={addRow}>Add Row</Button>
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid
          rows={rows}
          columns={columns.map((col) => {
            if (['sei', 'mei', 'position'].includes(col.field)) {
              return {
                ...col,
                renderCell: (params: GridCellParams) => (
                  <EditableCell row={params.row} field={col.field} control={control} />
                ),
              };
            }
            return col;
          })}
          pageSize={5}
          checkboxSelection
          disableSelectionOnClick
        />
        <Button type="submit" disabled={!formState.isValid}>
          Submit
        </Button>
      </div>
    </form>
  );
};

gistfile3.txt

const universalValidationSchema = yup.object().shape({
  sei: yup.lazy((value: any) => {
    if (value !== undefined) {
      return yup.string().required('必須項目です');
    }
    return yup.mixed().notRequired();
  }),
  mei: yup.lazy((value: any) => {
    if (value !== undefined) {
      return yup.string().required('必須項目です');
    }
    return yup.mixed().notRequired();
  }),
  position: yup.lazy((value: any) => {
    if (value !== undefined) {
      return yup.string().required('必須項目です');
    }
    return yup.mixed().notRequired();
  }),
});

gistfile4.txt

const universalValidationSchema = yup.object().shape({
  sei: yup.lazy((value: any) => {
    if (value !== undefined) {
      return yup.string().required('必須項目です');
    }
    return yup.mixed().notRequired();
  }),
  mei: yup.lazy((value: any) => {
    if (value !== undefined) {
      return yup.string().required('必須項目です');
    }
    return yup.mixed().notRequired();
  }),
  position: yup.lazy((value: any) => {
    if (value !== undefined) {
      return yup.string().required('必須項目です');
    }
    return yup.mixed().notRequired();
  }),
});