Greetings to all, I am facing the following problem, could you help me?
Error messages shown:
DataTables warning: table id=tblAnswerGradersAvailableReport - Incorrect column count. For more information about this error, please see https://datatables.net/tn/18
Description of problem:
In my new job I have this error locally, which is strange because in the production branch there are no errors and it is exactly the same.
What happens is that it shows this error message in a popup window and just when I click ok the table comes out with the data mapped correctly but the application freezes.
I have almost no experience with datatables.

 componentDidMount() {
    const { exam_test_option_id} = this.props;
    if ( $.fn.dataTable.isDataTable('#tblAnswerGradersAvailableReport')){
      $('#tblAnswerGradersAvailableReport').DataTable().destroy()
   }
    const successCallback = () => {
      swal({
        type: 'success',
        showConfirmButton: false,
        timer: 1000
      });
      $('#tblAnswerGradersAvailableReport').DataTable(DEFAULT_DATA_TABLE_ORDER)
    };
    const errorCallback = (error) => {
      console.log('Error creating the exam', error.request);
      if(error.request.status === FORBIDDEN_STATUS_CODE) {
        this.props.history.push('/');
        swal(
          'Ups...',
          `Ocurrió un error al tratar de obtener los reportes: ${JSON.parse(error.request.response).error ||JSON.parse(error.request.response).title}`,
          'error'
        );
      } else{
        swal(
          'Ups...',
          'Ocurrió un error al tratar de obtener los reportes',
          'error'
        );
      };
    }
    this.props.getDynamicReport("cod_report",exam_test_option_id,"0f1f2",successCallback,errorCallback);
  }

renderTable(report, dataOnReport, discrepancy_params){
    if(report.report.length===0|| report.report_type!="cod_report"){
      return(<h2>No hay respuestas con esta información</h2>);
    }else{
      const { handleSubmit } = this.props;
      var codifications = this.calculateCodificationsValues(report.report, discrepancy_params);
        return (
        <div>
            <form onSubmit={handleSubmit(this.onClickAgregate)}>
              <div className="table-responsive  col-xs-12">
                <ul className="list-group scrolling-list">
                  <table id="tblAnswerGradersAvailableReport" className="table table-striped table-bordered dt-responsive">
                    <thead>
                      <tr key="0">
                        <th>Id codificación</th>
                        <th>Codificador</th>
                        <th>Texto</th>
                        <th>Fecha de actualización </th>
                        <th>Tipo </th>
                        <th>Criterio </th>
                        {dataOnReport.map((value) => {
                          return (
                            <th>{this.renderLabel(value)} </th>
                          );
                        })}
                        <th>Dificultad</th>
                      </tr>
                    </thead>
                    <tbody>
                      {codifications.map((codification, index) => {
                        let alto = Object.entries(codification.criteria).length.toString();
                        let is_in_bank=report.answer_bank_list.includes(codification.id_codification);
                        if(is_in_bank){
                          return (<></>);
                        }else{
                          return (
                            <>
                              <tr key={"cod_" + index}>
                                <td rowSpan={alto}>{codification.id_codification}</td>
                                <td rowSpan={alto}>{codification.user}</td>
                                <td rowSpan={alto}>{codification.answer_id}</td>
                                <td rowSpan={alto}>{codification.updated_at}</td>
                                <td rowSpan={alto}>{codification.type}</td>
                                <td key={codification.criteria[0] ? codification.criteria[0].id : ""}>{codification.criteria[0] ? codification.criteria[0].title : ""}</td>
                                {dataOnReport.map((value) => {
                                  return (
                                    <td>{codification.criteria[0] ? codification.criteria[0][value] : "-"}</td>
                                  );
                                })}
                                <td rowSpan={alto}><Field name={`${codification.id_codification}_level`} component="select" className="form-control">
                                  <option value="">Seleccione</option>
                                  <option value="1">1</option>
                                  <option value="2">2</option>
                                  <option value="3">3</option>
                                  <option value="4">4</option>
                                  <option value="5">5</option>
                                  </Field> 
                                </td>
                              </tr>
                              {codification.criteria.map((gradingCriterion, index) => {
                                if (index != 0) {
                                  return (
                                    <tr>
                                      <td key={gradingCriterion.id}>{gradingCriterion.title}</td>
                                      {dataOnReport.map((value) => {
                                        return (
                                          <td> {gradingCriterion[value]}</td>
                                        );
                                      })}
                                    </tr>
                                  );
                                }
                              })
                              }
                            </>
                          );
                        }
                      })}
                    </tbody>
                  </table>
                </ul>
                <div className="row">
                  <div className="col-md-12 col-xs-12">
                    <button
                        type="submit"
                        className="btn btn-primary pull-right"> Agregar
                    </button>
                    <button
                      onClick={() => {
                        let fecha = new Date();
                        fecha = moment(fecha).format('D [de] MMMM [de] YYYY');
                        this.downloadXls("tblAnswerGradersAvailable",
                          `codificaciones_disponibles_${fecha}.xlsx`)
                      }}
                      type="button"
                      className="btn btn-default pull-right"
                    >Descargar plantilla
                    </button>
                  </div>
                </div>
              </div>
            </form>
          <div>
            <table id="tblAnswerGradersAvailable" className="tblHidden">
              <thead><tr key="h_0"><th>id</th><th>dificultad</th></tr></thead>
              <tbody>
              {codifications.map((codification, index) => {
                let is_in_bank=report.answer_bank_list.includes(codification.id_codification);
                if(is_in_bank){
                  return(<></>);
                }else{
                  return(
                    <tr key={"h_" + index}><td>{codification.id_codification}</td></tr>
                  );
                }
              })}
              </tbody>
            </table>
          </div>

        </div>
      );

    }
  }