Devextreme-reactive: problems on drag and drop columns order

Created on 30 Nov 2018  路  3Comments  路  Source: DevExpress/devextreme-reactive

Hello to all,
I'm using the devextreme grid in my project. i created an object that i called it EditTableB. I'm using it in different objects or view. I set the possibility to change columns order, when i drag the column it creates the "copy" of the column title but if i try to change position nothing happens to other columns. So the drag and drop doesn't work. And also the copy of the column name is to distant.
The code of my object is:
````

import React, { PureComponent } from 'react';
import { withLocalize } from "react-localize-redux";
import { Translate } from "react-localize-redux";
import * as PropTypes from 'prop-types';
import {
Col,
Row,
Input,
CardBody,
Card,
CardHeader,
CardFooter,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Label,
} from 'reactstrap';
import {
SortingState,
IntegratedSorting,
PagingState,
IntegratedPaging,
FilteringState,
IntegratedFiltering,
DataTypeProvider,
SearchState,
EditingState,
SelectionState
} from '@devexpress/dx-react-grid';
import {
Getter,
Template,
TemplatePlaceholder,
TemplateConnector,
} from '@devexpress/dx-react-core';
import Cookies from 'universal-cookie';
import jeusercontrol from "../translations/jeusercontrol.json";
import generic from "../translations/generic.json";
import {
Grid,
Table,
TableHeaderRow,
PagingPanel,
TableFilterRow ,
DragDropProvider,
TableColumnReordering,
Toolbar,
SearchPanel,
TableEditRow,
TableEditColumn,
TableColumnResizing,
ColumnChooser,
TableColumnVisibility,
TableSelection,
} from '@devexpress/dx-react-grid-bootstrap4';

import JEExportXls from "./JEExportXls";
import UCH3 from './JEH3';
import UCH5 from './JEH5';
import UCRicercaTableInput from "./JERicercaTableInput";
import UCLinkToDetail from "./JELinkToDetail";
import UCImageScript from "./JEImageScript";
import {numberToColour,getTextColor,getUrlApi,getDBCONF,toTitleCase,getDataTypeFromJSONLink,getTextFromJSONLink,decodeArrayBuffer} from "../helpers/Helpers";
import moment from 'moment';
import { Data } from 'react-data-grid-addons';
import noImage from '../assets/img/brand/noImage.jpg';
const cookies = new Cookies();

const FilterIcon = ({ type }) => {
if (type === 'month') {
return (
className="d-block oi oi-calendar"
/>
);
}
return ;
};

const NumberEditor = ({ value, onValueChange }) => {
const handleChange = (event) => {
const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
onValueChange();
return;
}
onValueChange(parseInt(targetValue, 10));
};
return (
type="number"
className="form-control text-right"
placeholder="..."
value={value === undefined || value === null ? '' : parseInt(value, 10) }
onChange={handleChange}
/>
);
};

const DateEditor = ({value, onValueChange }) => {

const handleChange = (event) => {

const { value: targetValue } = event.target;

// if (targetValue.trim() === ''){
//   console.log("event_null:");
//   console.log(event);
//   // console.log(targetValue);

//   onValueChange();
//   return;
// }
// onValueChange(targetValue+"T00:00:00.000Z");

if (!moment(targetValue).isValid()){

  onValueChange();
  // onValueChange("YYYY-MM-DDT00:00:00.000Z");
  // if (targetValue.trim() === "Invalid date"){

  // } else {

  // }

} else {
  onValueChange(targetValue+"T00:00:00.000Z");
}

}

var datetimeValue = value ? moment(value).format("YYYY-MM-DD") : "YYYY-MM-DD";

return (
type="date"
className="form-control text-left"
value= {datetimeValue}
max="9999-12-31"
onChange={handleChange}
/>
);
};

const TimeEditor = ({ value, onValueChange }) => {
const handleChange = (event) => {

const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
  onValueChange();
  return;
}
let data = new Date();
data.setHours(targetValue.substring(0,2),targetValue.substring(3,5),0,0);
onValueChange(moment(data).format("HH:mm"));

};
let defaultTime;
if(value){
if(value.length===5){
defaultTime=value;
}else{
let newtime=moment(value.toString().replace("Z",""));
defaultTime=newtime.format("HH");//hhAndata+":"+mmAndata;
defaultTime+=":"+newtime.format("mm");//hhAndata+":"+mmAndata;
}
}else{
defaultTime="";
}
return (
type="time"
className="form-control text-left"
value={defaultTime}
onChange={handleChange}
/>
);
//var datetimeValue=value?moment(value).format("HH")+":"+moment(value).format("mm"):"";

};

const DateTimeEditor = ({ value, onValueChange }) => {
const handleChange = (event) => {
const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
onValueChange();
return;
}
onValueChange(targetValue);
};

var datetimeValue=value?moment(value).format("YYYY-MM-DDTHH:mm"):"";
// console.log("Value"+datetimeValue);
////console.log("datetimeValue"+datetimeValue);

return (
type="datetime-local"
className="form-control text-left"
value={datetimeValue}
onChange={handleChange}
max="9999-12-31T23:59"
/>
);
};

const TextEditor = ({ value, onValueChange }) => {
const handleChange = (event) => {
const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
onValueChange();
return;
}
onValueChange(targetValue);
};
return (
type="text"
className="form-control ffff"
placeholder="..."
value={value === undefined || value === null ? '' : value}
onChange={handleChange}
/>
);
};

const UcEditor = ({column, value, onValueChange }) => {
const handleChange = (event) => {
//console.log("handleChange uc ricerca");
if(event.ID=== undefined || event.ID===null){
onValueChange("");
return;
}

onValueChange(event.ID.toString());

};

return (
tableOptions={{defaultSortName: 'ID',
defaultSortOrder: 'asc'}} //asc
ucLabel=""
ucTipo="text"
ucPlaceholder=""
apiToCall={{apiName:"/api/getDataNew",
getStructure:true,
entita:column.COLUMNNAME.substring(2).replace("STATO","STATO.").replace("TIPO","TIPO.").replace("ID","")}}
columnSelection={""}
callbackParentSelection={handleChange}
formSubmitted={false}
editOn={true}
selectedValue={value === undefined || value === null ? '' : value.toString()}
/>
);
};

const DetailLinkEditor = ({ value, onValueChange }) => {
const handleChange = (event) => {
const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
onValueChange();
return;
}
onValueChange(targetValue);
};
let text = (value!==null && value!==undefined && value!=="" && value!=="-1") ? getTextFromJSONLink(value) ? getTextFromJSONLink(value) : value:value;
return (
type="text"
className="form-control"
placeholder="..."
value={text}
onChange={handleChange}
/>
);
};

const UCEditorFormatter = ({column,value}) => {
//{ value }
tableOptions={{defaultSortName: 'ID',
defaultSortOrder: 'asc'}}
ucLabel=""
ucTipo="text"
ucPlaceholder=""
apiToCall={{apiName:"/api/getDataNew",
getStructure:true,
entita:column.name.substring(2).replace("STATO","STATO.").replace("TIPO","TIPO.").replace("ID","")}}
columnSelection={""}
callbackParentSelection={{}}
formSubmitted={false}
selectedValue={(value===null || value=== undefined)?"":value.toString()}
editOn={false}
/>
};

const NoEditEditor = ({ value, onValueChange }) => {
const handleChange = (event) => {
const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
onValueChange();
return;
}
onValueChange(parseInt(targetValue, 10));
};
return (
text={value === undefined || value === null ? '' : value }
>
{value === undefined || value === null ? '' : value }


);
};

const NoEditEditorImage = ({ value, onValueChange }) => {
const handleChange = (event) => {
const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
onValueChange();
return;
}
onValueChange(JSON.stringify(targetValue));
};
return (
(value!==undefined && value!==null && value!=="" ?

:
)
);
};

NumberEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};
NumberEditor.defaultProps = {
value: undefined,
};

TextEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};
TextEditor.defaultProps = {
value: '',
};

DateEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};
DateTimeEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};

TimeEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};

UcEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};

DetailLinkEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};

NoEditEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};
NoEditEditorImage.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};

NoEditEditor.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};

NoEditEditorImage.propTypes = {
value: PropTypes.string,
onValueChange: PropTypes.func.isRequired,
};

const LinkFormatter = ({ value }) => (
//console.log("value-------------------\n"+value)
(value!==undefined && value!==null ?
{value.replace("mailto:","").replace("callto:","").replace("tel:","")}

:
null)
);

const LinkTypeProvider = props => (
formatterComponent={LinkFormatter}
{...props}
/>
);

const DetailLinkFormatter = ({ value }) => (
(value!==undefined && value!==null && value!=="" ?

//
:
null)
);

const DetailLinkTypeProvider = props => (
formatterComponent={DetailLinkFormatter}
{...props}
/>
);

const ImageScriptFormatter = ({ value }) => (
(value!==undefined && value!==null && value!=="" ?

:
null)
);
const ImageScriptTypeProvider = props => (
formatterComponent={ImageScriptFormatter}
{...props}
/>
);

const ImageFormatter=({ value }) => (
(value!==undefined && value!==null && value!=="" ?

:
)
);
const ImageTypeProvider = props => (
formatterComponent={ImageFormatter}
{...props}
/>
);

const InputFormatter=({ value}) => (

type="number"
value={value?value.input:value}
placeholder="username"
/>
);
const InputTypeProvider = props => (
formatterComponent={InputFormatter}
{...props}
/>
);

//gestire la parte dell'UTC
const DateFormatter = ({ value }) => (
(value!==undefined && value!==null ?

{new Date(value).toLocaleDateString()}

:
null)
);
const DateTypeProvider = props => (
formatterComponent={DateFormatter}
{...props}
/>
);

//gestire la parte dell'UTC
const DateTimeFormatter = ({ value }) => (
(value!==undefined && value!==null ?

{new Date(value).toLocaleDateString()+" "+new Date(value).toLocaleTimeString()}

:
null)
);
const DateTimeTypeProvider = props => (
formatterComponent={DateTimeFormatter}
{...props}
/>
);

const TimeFormatter = function({ value }) {
if(value!==undefined && value!==null){
let newMom;
if(value.length==5){
newMom=moment().utc();
newMom.hour(value.substring(0,2)).minute(value.substring(3,5)).second(0).millisecond(0);

}else{
newMom=moment(value).utc();
}
let data=new Date();
data.setHours(newMom.format("HH"));
data.setMinutes(newMom.format("mm"));
data.setSeconds(0);

return(

{ data.toLocaleTimeString() }

);
}else{
return null;
}

};
const TimeTypeProvider = props => (
formatterComponent={TimeFormatter}
{...props}
/>
);

function rowStyle (row) {
let color=(row.COLORE?row.COLORE:"16777215");
let rgbColor=numberToColour(color);
let textColor=getTextColor(color);
return { backgroundColor: "rgba("+rgbColor[0]+","+rgbColor[1]+","+rgbColor[2]+",1)",color:textColor };
// return { backgroundColor: "rgb(0,255,0,1)",color:textColor };
};

const TableRow = ({ row, ...restProps }) => (

{...restProps}
// eslint-disable-next-line no-alert

style={{
  ...rowStyle(row),
}}

/>
);

const toLowerCase = value => String(value).toLowerCase();
const linkDetailPredicate = function(value, filter) {
if(filter.operation==="equal"){
return toLowerCase(getTextFromJSONLink(value))==toLowerCase(filter.value);
}
if(filter.operation==="notEqual"){
return toLowerCase(getTextFromJSONLink(value))!=toLowerCase(filter.value);
}
if(filter.operation==="startsWith"){
return toLowerCase(getTextFromJSONLink(value)).startsWith(toLowerCase(filter.value));
}
if(filter.operation==="endsWith"){
return toLowerCase(getTextFromJSONLink(value)).endsWith(toLowerCase(filter.value));
}
if(filter.operation==="contains"){
return toLowerCase(getTextFromJSONLink(value)).indexOf(toLowerCase(filter.value))>(-1);
}
if(filter.operation==="notContains"){
return toLowerCase(getTextFromJSONLink(value)).indexOf(toLowerCase(filter.value))===(-1);
}

}
const timePredicate = function(value, filter) {
let dataValore=new Date(value);
let dataFiltro=new Date(value);
dataFiltro.setHours(filter.value.substring(0,2));
dataFiltro.setMinutes(filter.value.substring(3,5));
dataFiltro.setSeconds(0);

//console.log("newMom"+newMom.format());
let filtroValore=parseInt(dataFiltro.getTime());
let dataval=parseInt(dataValore.getTime());

if(filter.operation==="equal"){
return dataval==filtroValore;
}
if(filter.operation==="greaterThan"){
return dataval>filtroValore;
}
if(filter.operation==="lessThan"){
return dataval }
if(filter.operation==="greaterThanOrEqual"){
return dataval>=filtroValore;
}
if(filter.operation==="lessThanOrEqual"){
return dataval<=filtroValore;
}
}

const compareLinks = (link1, link2) => {

let dataType=getDataTypeFromJSONLink(link1);
var l1, l2;

if(dataType==="int"){
l1 = parseInt(getTextFromJSONLink(link1), 10);
l2 = parseInt(getTextFromJSONLink(link2), 10);

if (l1 === l2) {
  return 0;
}
return (l1 < l2) ? -1 : 1;

}else if(dataType==="varchar"){
l1 = getTextFromJSONLink(link1);
l2 = getTextFromJSONLink(link2);

if (l1 === l2) {
  return 0;
}
return (l1 < l2) ? -1 : 1;

} else {
console.log("Error: LinkToDetail");
}
}

const CommandButton = ({
onExecute, icon, text, hint, color,
}) => (
type="button"
className="btn btn-link"
style={{ padding: 11 }}
onClick={(e) => {
onExecute();
e.stopPropagation();
}}
title={hint}
>
{icon ? oi oi-${icon}} style={{ marginRight: text ? 5 : 0 }} /> : null}
{text}


);

const commandComponentProps = {
add: {
icon: 'plus',
hint: 'Crea nuova riga',
},
edit: {
icon: 'pencil',
hint: 'Modifica riga',
color: 'text-warning',
},
delete: {
icon: 'trash',
hint: 'Elimina riga',
color: 'text-danger',
},
commit: {
icon: 'check',
hint: 'Conferma',
color: 'text-success',
},
cancel: {
icon: 'x',
hint: 'Annulla',
color: 'text-danger',
},
};

const Command = ({ id, onExecute }) => (
{...commandComponentProps[id]}
onExecute={onExecute}
/>
);

class UCEditTableB extends PureComponent {

constructor(props) {
super(props);
this.props.addTranslation(jeusercontrol);
this.props.addTranslation(generic);

this.state = { 
    rows: [],
    originalrows:[],
    columns:[],
    pageSizes: [30, 50, 60, 0],
    editingRowIds: [],
    addedRows: [],
    rowChanges: {},
    dateColumns: [],
    datetimeColumns: [],
    timeColumns: [],
    textColumns: [],
    inputColumns:[],
    ucColumns:[],
    dateFilterOperations: ['equal',  'greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'],
    currencyColumns: [],
    currencyFilterOperations: ['equal', 'notEqual', 'greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'],
    filteringColumnExtensions: [{}],
    columnWidths: [],
    hiddenColumnNames: [],
    columnOrder:[],
    tableColumnExtensions:[],
    exportData:[],
    XLSData:[],
    rowsChangedForDB:[],
    rowsDeletedForDB:[],
    rowsAddedForDB:[],
    editingStateColumnExtensions: [],
    newRowId:-1,
    columnsProperties:[],
    columnsLink:[],
    selection: [],
    filters:[],
    exportData:[],
    show:false,
    showConfermaAggiornamento:false,
    buttonLock:false,
    showAvvisoErrore:false,
    showSuccess:false,
    buttonLock:false,
    msgErrore:"",
    columnsDetailLink:[],
    chiamatoData:0,
    columnWidthsCalled:0,
    columnOrderCalled:0,
    hiddenColumnNamesCalled:0,
    didmountCalled:0,
    funcImageScript:[],
    ImageColumns:[],
    noEditColumns:[],
    noEditImageColumns:[],
    sortingLinksExtension: [],
    selection:[],
    arrayFiltroData:[{}],
};


this.handleSave=this.handleSave.bind(this);
this.changeAddedRows = this.changeAddedRows.bind(this);
this.changeEditingRowIds = this.changeEditingRowIds.bind(this);
this.changeRowChanges = this.changeRowChanges.bind(this);
this.commitChanges = this.commitChanges.bind(this);
this.getRowId = row => row[this.state.key];
this.changeColumnWidths = (columnWidths) => {
  this.setState({ columnWidths });
  this.updateUserInfo("columnWidths",columnWidths);
};
this.hiddenColumnNamesChange = (hiddenColumnNames) => {
  this.setState({ hiddenColumnNames });
  this.updateUserInfo("hiddenColumnNames",hiddenColumnNames);
};

this.changePageSize = pageSize => this.setState({ pageSize });
this.changeColumnOrder = this.changeColumnOrder.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
this.changeSelection = this.changeSelection.bind(this);
this.callData = this.callData.bind(this);
this.changeFilters = this.changeFilters.bind(this);
this.generateData = this.generateData.bind(this);
this.checkIfColumnIsLink = this.checkIfColumnIsLink.bind(this);

this.handleCloseModalAggiornamento=this.handleCloseModalAggiornamento.bind(this);
this.handleCloseSuccess = this.handleCloseSuccess.bind(this);
this.handleCloseAvvisoErrore = this.handleCloseAvvisoErrore.bind(this);
this.handleModalAggiornamento = this.handleModalAggiornamento.bind(this);
this.azzerraStato = this.azzerraStato.bind(this);
this.InputEditor = this.InputEditor.bind(this);

}

InputEditor = ({ value, onValueChange }) => {
const handleChange = (event) => {
const { value: targetValue } = event.target;
if (targetValue.trim() === '') {
onValueChange();
return;
}
onValueChange(targetValue);
};
return (
type="number"
className="form-control"
placeholder={this.props.inputPlaceholder?this.props.inputPlaceholder:"..."}
value={value === undefined || value === null ? '' : value}
onChange={handleChange}
/>
);
};

changeFilters(filters){
this.setState({ filters:filters })
this.generateColumnsExport(this.state.columnRows,this.state.exportData);
}

callData= async() =>{
const self = this;
// if(self.state.chiamatoData==0){
self.setState({chiamatoData:self.state.chiamatoData+1});
let token = cookies.get('JEProjectJWTTK');
let body={
getStructure:true,
getData:this.props.getData,
columnsSelection:this.props.columnSelection,
entita:this.props.entita,
filtro:this.props.filtroData,
token:token,
conf:getDBCONF(),
fromTable:this.props.fromTable,
getLinks:this.props.getLinks
};
////console.log(" called: "+this.props.apiToCall.apiName);

        let response = await fetch(getUrlApi()+this.props.apiName, {
          method: 'POST',
          body:    JSON.stringify(body),
          headers: { 'Content-Type': 'application/json' },

          }).then((results) => results.json()) 
          .then(function(json) {
            let dataRows = json.data;
            let columnRows = json.structure.columns;
            let keyName=json.structure.key;
            let showInputOnStep = false
            let editingRowIds = [];
            //console.log("body: ----------------\n"+JSON.stringify(body));
            //console.log("response: "+JSON.stringify(dataRows));
            if(self.props.showInputColumn){
              dataRows.forEach(row => {
                if(self.props.showAsDiv && row.FLAGFOGLIA=="1"){
                  showInputOnStep =true;
                  row["INPUT"]="";
                  editingRowIds.push(row["ID"]);
                }
              });
              if(!self.props.showAsDiv){
                showInputOnStep =true;
              }
            }
            if(keyName==="" || keyName===null || keyName===undefined){
              columnRows.forEach(column => {
                if(column.COLUMNNAME==="ID"){
                  keyName="ID";
                }
              });
            }
            if(keyName==="" || keyName===null || keyName===undefined){
              columnRows.forEach(column => {
                if(column.COLUMNNAME==="ORDINAMENTO"){
                  keyName="ORDINAMENTO";
                }
              });
            }

            // console.log("defaultEditingRowIds"+JSON.stringify(editingRowIds))
            self.generateColumns(columnRows,showInputOnStep);

            self.setState({
                columnRows:columnRows,
                rows: dataRows,
                originalrows:dataRows,
                key:keyName,
                editingRowIds:editingRowIds
            });

            let sortingLinksExtension = [];
            self.state.columnsDetailLink.forEach(col => {
              sortingLinksExtension.push({columnName: col, compare: compareLinks})
            });
            self.setState ({
                sortingLinksExtension: sortingLinksExtension
              });
            self.generateColumnsExport(columnRows,dataRows);
          })
          .catch(function(error) {
            //console.log(error);
          }); 

          //console.log(self.state.rows);
          return response;

      //}

};

updateUserInfo = async(proprieta,valore) => {
let sezione= this.props.section;
let oggetto= this.props.object;
let token = cookies.get('JEProjectJWTTK');
////console.log(JSON.stringify(json));
let body={
sezione:sezione,
oggetto:oggetto,
proprieta:proprieta,
valore:valore,
token:token,
conf:getDBCONF()
};

      let response = await fetch(getUrlApi()+"/api/userConfiguration/update", {
        method: 'POST',
        body:    JSON.stringify(body),
        headers: { 'Content-Type': 'application/json' },

        }).then((results) => results.json()) 
        .then(function(json) {
        })
        .catch(function(error) {
          //console.log(error);
        }); 

        return response;

}

getUserInfo = async(proprieta) =>{
let sezione= this.props.section;
let oggetto= this.props.object;
const self = this;
let propName=proprieta+"Called";
// if(self.state[propName]===0){
self.setState({propName:self.state[propName]+1});
let token = cookies.get('JEProjectJWTTK');
let body={
sezione:sezione,
oggetto:oggetto,
proprieta:proprieta,
token:token,
conf:getDBCONF()
};

          let response = await fetch(getUrlApi()+"/api/userConfiguration/get", {
            method: 'POST',
            body:    JSON.stringify(body),
            headers: { 'Content-Type': 'application/json' },

            }).then((results) => results.json()) 
            .then(function(json) {
              ////console.log(JSON.stringify(json));
            /*  let arr1=(json===null)?[]:json;
              let arr2=self.state["default"+proprieta];
              //console.log("json"+JSON.stringify(arr1));
              //console.log("defaultjson"+JSON.stringify(arr2));
              //Array.prototype.push.apply(arr1,arr2)


              //console.log("arr1"+JSON.stringify(arr1));
              self.setState({[proprieta]:arr1});*/
              let outputArray=[];

              if(json!==null){
                for(var el in json){
                  for(var el2 in self.state["default"+proprieta] ){
                    if(json[el].columnName===self.state["default"+proprieta][el2].columnName){
                      outputArray.push(json[el]);
                    }
                  }
                }
                for(var el in self.state["default"+proprieta]){
                  let trovato=false;
                  for(var el2 in json ){
                    if(self.state["default"+proprieta][el].columnName===json[el2].columnName){
                      trovato=true;
                    }
                  }
                  if(!trovato){
                    outputArray.push(self.state["default"+proprieta][el]);
                  }
                }
                self.setState({[proprieta]:outputArray});
              }else{
                self.setState({[proprieta]:self.state["default"+proprieta]});
              }

             /* if(json!==null){
                self.setState({[proprieta]:json});
              }else{
                self.setState({[proprieta]:self.state["default"+proprieta]});
              }*/
              self.setState({
                show:true
              });
            })
            .catch(function(error) {
              //console.log(error);
            }); 

            return response;

  //}

}

componentDidMount(){

let self=this;
if(this.props.apiName!==undefined && this.state.didmountCalled==0 ){
  let newarrayFiltroData=[];
  for(var index in self.props.filtroData){
    newarrayFiltroData[index]=Object.assign({},self.props.filtroData[index]);
  }
  this.setState({didmountCalled:this.state.didmountCalled+1,arrayFiltroData:newarrayFiltroData});
  this.callData();
}

}

componentDidUpdate(prevProps){
// console.log("componentDidUpdate ------------------------")
// console.log("this.state.arrayFiltroData: "+JSON.stringify(this.state.arrayFiltroData))
// console.log("self.props.filtroData: "+JSON.stringify(this.props.filtroData))
let self=this;
if(JSON.stringify(self.props.filtroData) !== JSON.stringify(self.state.arrayFiltroData) && self.props.filtroData!==undefined && self.props.filtroData!==null ){

  let newarrayFiltroData=[];
  for(var index in self.props.filtroData){
    newarrayFiltroData[index]=Object.assign({},self.props.filtroData[index]);
  }

  self.setState({arrayFiltroData:newarrayFiltroData});
  self.callData();
}

}

generateDataExport(dataRows,headersXls){
let rowArray=[];
let self=this;
dataRows.forEach(row => {
rowArray=[]
for (let key in row) {
// console.log("KEY"+self.checkIfColumnIsLink(key))
if(self.checkIfColumnIsLink(key) && row[key]!==null && row[key]!=="") {
rowArray.push(getTextFromJSONLink(row[key]));
}else{
rowArray.push(row[key]);
}

  }
  headersXls.push(rowArray);
});
//  console.log("EXPORT XLS"+JSON.stringify(headersXls));
if(JSON.stringify(self.state.XLSData)!==JSON.stringify(headersXls)){
  self.setState({
    XLSData:headersXls,
  });
}

}

checkIfColumnIsLink(COLUMNNAME){
for(var i in this.state.columnsDetailLink){
if(this.state.columnsDetailLink[i]==COLUMNNAME){
return true;
}
}
}

generateColumnsExport(columnRows,dataRows){
let headerXls=[];
columnRows.forEach(column => {
headerXls.push(column.COLUMNNAME);
});
let headersXls=[];
headersXls.push(headerXls);
this.generateDataExport(dataRows,headersXls);
}

generateColumns(columnRows,showInput){
//console.log("generateColumns");
let dateCol=[];
let numberCol=[];
let colWidths=[];
let colOrder=[];
let colsDisabled=[];
let timeCols=[];
let datetimeCols = [];
let ucCols=[];
let colExtensions=[];
let textCols=[];
let inputColumns = [];
let colProperties=[];
let defaulthiddenColumnNames=[];
let columnsLink=[];
let columnsDetailLink = [];
let integratedFilteringColumn = [];
let funcImageScript = [];
let ImageColumns = [];
let noEditColumns = [];
let noEditImageColumns = [];
let self = this;

if(self.props.showInputColumn){
 // console.log("MOSTRARE INPUT")
  let colInput={
    COLUMNEDITINGENABLED: true,
    COLUMNIDENTITY: false,
    COLUMNNAME: "INPUT",
    COLUMNREQUIRED: true,
    COLUMN_DEFAULT: null,
    DATAMAXLENGHT: 6,
    DATATYPE: "int",
    DATATYPEWEB: "int",
    ISKEY: false,
    ORDINAL_POSITION: 1,
    TEXT: "Input",
    sort: false,
  };
  if(columnRows[0].COLUMNNAME!=="INPUT"){
    columnRows.unshift(colInput);
  }
}
columnRows.forEach(column => {
  let colprop={
    [column.COLUMNNAME]:{
      "COLUMNIDENTITY":column.COLUMNIDENTITY,
      "COLUMNREQUIRED":column.COLUMNREQUIRED
    }
  };


  if(column.ISLINK){
    //columnsDetailLink.push(column.COLUMNNAME);
    if(showInput){
      noEditColumns.push(column.COLUMNNAME);
    }else{
      columnsDetailLink.push(column.COLUMNNAME);
    }
    integratedFilteringColumn.push({columnName:column.COLUMNNAME,predicate:linkDetailPredicate});
  }else{
      if(column.COLUMNNAME!=="INPUT"){
        if(column.COLUMNNAME.toLowerCase().startsWith("link_")){
          column.TEXT=toTitleCase(column.TEXT.replace("Link_",""));
          if(showInput){
            noEditColumns.push(column.COLUMNNAME);
          }else{
            columnsLink.push(column.COLUMNNAME);
          }
        }
        else if(column.COLUMNNAME.toUpperCase().startsWith("FUNC_CALL_")){
          //console.log("COLLL"+column.TEXT);
          column.TEXT=toTitleCase(column.TEXT.replace("Func_call_",""));
         // console.log(JSON.stringify(column));
         // funcImageScript.push(column.COLUMNNAME);
          if(showInput){
            noEditColumns.push(column.COLUMNNAME);
          }else{
            funcImageScript.push(column.COLUMNNAME);
          }
        }
        else if(column.COLUMNNAME.toUpperCase().startsWith("IMMAGINE") && self.props.showImages){
          column.TEXT=toTitleCase(column.TEXT.replace("IMMAGINE_","IMMAGINE "));
         // ImageColumns.push(column.COLUMNNAME);
          if(showInput){
            noEditImageColumns.push(column.COLUMNNAME);
          }else{
            ImageColumns.push(column.COLUMNNAME);
          }
        }
        else{

              if(column.DATATYPEWEB==="date"){
                //dateCol.push(column.name);
                if(showInput){
                  noEditColumns.push(column.COLUMNNAME);
                }else{
                  dateCol.push(column.COLUMNNAME);
                }
              }
              if(column.DATATYPEWEB==="time"){
                //timeCols.push(column.name);
                if(showInput){
                  noEditColumns.push(column.COLUMNNAME);
                }else{
                  timeCols.push(column.COLUMNNAME);
                }
                integratedFilteringColumn.push({columnName:column.COLUMNNAME,predicate:timePredicate});
              }
              if(column.DATATYPEWEB==="smalldatetime" ||
              column.DATATYPEWEB==="datetime" ||
              column.DATATYPEWEB==="datetime2" || 
              column.DATATYPEWEB==="datetimeoffset"){
                //datetimeCols.push(column.name);
                if(showInput){
                  noEditColumns.push(column.COLUMNNAME);
                }else{
                  datetimeCols.push(column.COLUMNNAME);
                }
              }
              if(column.DATATYPEWEB==="smallint" || 
              column.DATATYPEWEB==="money" || 
              column.DATATYPEWEB==="int" || 
              column.DATATYPEWEB==="tinyint" || 
              column.DATATYPEWEB==="bigint" || 
              column.DATATYPEWEB==="numeric" ||
              column.DATATYPEWEB==="decimal" ||
              column.DATATYPEWEB==="smallmoney" ||
              column.DATATYPEWEB==="float" ||
              column.DATATYPEWEB==="real"){
              // numberCol.push(column.name);
                let newcolExt={};
                newcolExt.columnName=column.name;
                newcolExt.align="right";
                colExtensions.push(newcolExt);
                if(showInput){
                  noEditColumns.push(column.COLUMNNAME);
                }else{
                  numberCol.push(column.COLUMNNAME);
                }
              }
              if(column.DATATYPEWEB==="UCRICERCA"){
                //ucCols.push(column.name);
              //  textCols.push(column.name);
                if(showInput){
                  noEditColumns.push(column.COLUMNNAME);
                }else{
                  textCols.push(column.COLUMNNAME);
                }
              }
              if(column.DATATYPEWEB==="text" ||
              column.DATATYPEWEB==="char" ||
              column.DATATYPEWEB==="varchar"){
                //textCols.push(column.name);
                if(showInput){
                  noEditColumns.push(column.COLUMNNAME);
                }else{
                  textCols.push(column.COLUMNNAME);
                }
              }
        }



      }

  }

  colProperties.push(colprop);
  column.title=column.TEXT;
  column.name=column.COLUMNNAME;

  if(showInput && column.COLUMNNAME==="INPUT"){
    inputColumns.push("INPUT");
    colWidths.push({columnName : "INPUT", width : 150});
    colOrder.push("INPUT");
  }else{
    colWidths.push({columnName : column.COLUMNNAME, width : 150});
    colOrder.push(column.COLUMNNAME);
  }


  let colDisabled={};
  colDisabled.columnName=column.COLUMNNAME;
  colDisabled.EditingEnabled=column.COLUMNEDITINGENABLED;
  colsDisabled.push(colDisabled);

  if(column.COLUMNNAME.toLowerCase() === "colore")
  {
    defaulthiddenColumnNames.push(column.COLUMNNAME);
  }
  if(column.COLUMNNAME.toLowerCase() === "sistema")
  {
    defaulthiddenColumnNames.push(column.COLUMNNAME);
  }

});

// console.log("ImageColumns"+JSON.stringify(ImageColumns))
// console.log("ImageColumns"+JSON.stringify(noEditImageColumns))
//console.log("funcImageScript: "+funcImageScript);
this.setState({
defaultcolumnWidths:colWidths,
columns: columnRows,
dateColumns: dateCol,
datetimeColumns:datetimeCols,
timeColumns:timeCols,
ucColumns:ucCols,
currencyColumns: numberCol,
textColumns:textCols,
inputColumns:inputColumns,
defaultcolumnOrder:colOrder,
defaulthiddenColumnNames:defaulthiddenColumnNames,
editingStateColumnExtensions:colsDisabled,
columnsProperties:colProperties,
columnsLink:columnsLink,
columnsDetailLink:columnsDetailLink,
columnWidthsCall:this.state.columnWidthsCall+1,
columnOrderCall:this.state.columnOrderCall+1,
hiddenColumnNamesCall:this.state.hiddenColumnNamesCall+1,
integratedFilteringColumn:integratedFilteringColumn,
funcImageScript:funcImageScript,
ImageColumns:ImageColumns,
noEditColumns:noEditColumns,
noEditImageColumns:noEditImageColumns
});
this.getUserInfo("columnWidths");
this.getUserInfo("columnOrder");
this.getUserInfo("hiddenColumnNames");
}

preloadRowValues(nextRowData, prevRowData) {
////console.log("preloadRowValues");
const resultRowData = Object.assign({}, nextRowData);
//this.props.defaultValueOnAdd
if(prevRowData==undefined){

  let result = this.state.columnsProperties.find(obj => {
    return obj[this.state.key] 
  });
  if(result[this.state.key].COLUMNIDENTITY){
    resultRowData[this.state.key]=(this.state.newRowId).toString();
    this.setState({newRowId:this.state.newRowId-1});
  }
    Object.entries(this.props.defaultValueOnAdd).map(([propriety]) => {
     // //console.log(propriety);
      resultRowData[propriety]=(this.props.defaultValueOnAdd[propriety]).toString();
      });
     // //console.log(JSON.stringify(resultRowData));
}
return resultRowData;

};

changeAddedRows(addedRows) {
// //console.log("changeAddedRows");
const addedRowsWithPreloadedValues = addedRows
.map((addedRow, index) => this.preloadRowValues(addedRow, this.state.addedRows[index]));
this.setState({
addedRows: addedRowsWithPreloadedValues
});
}
changeEditingRowIds(editingRowIds) {
// //console.log("changeEditingRowIds");
this.setState({ editingRowIds });
}
changeRowChanges(rowChanges) {
// //console.log("changeRowChanges");
this.setState({ rowChanges });
}
commitChanges({ added, changed, deleted }) {
let self=this;
let { rows,key,rowsAddedForDB,rowsChangedForDB,rowsDeletedForDB } = this.state;
if (added) {
const startingAddedId = rows.length > 0 ? rows[rows.length - 1][key] + 1 : 0;
rows = [
...rows,
...added.map((row, index) => ({
[key]: startingAddedId + index,
...row,
})),
];

  rowsAddedForDB.push(added[0]);
 // this.setState({ rowsAddedForDB:rAdded });


}
if (changed) {
  rows = rows.map(row => (changed[row[key]] ? { ...row, ...changed[row[key]] } : row));
  rowsChangedForDB.push(changed);
  if(this.props.showAsDiv && !this.props.multipleSelectionColumn){
    rows.map(function(row){
      if(changed[row[key]]){
        //console.log("changed"+JSON.stringify(row))
        let arrayRow=[];
        arrayRow.push(row);
        self.props.callbackParentSelection(arrayRow); 
      }
    })

  }
}
if (deleted) {
  const deletedSet = new Set(deleted);
  rows = rows.filter(row => !deletedSet.has(row[key]));
  rowsDeletedForDB.push(deleted[0]);
  rowsAddedForDB=rowsAddedForDB.filter(row => !deletedSet.has(row[key]));
  rowsChangedForDB=rowsChangedForDB.filter(row => !deletedSet.has(Object.keys(row)[0]));
}
this.setState({ rows,rowsAddedForDB,rowsChangedForDB });
this.generateColumnsExport(this.state.columnRows,rows);

}
changeColumnOrder(newOrder) {
this.setState({ columnOrder: newOrder });
this.updateUserInfo("columnOrder",newOrder);
}
generateData(){
let self=this;
//console.log("GENERATE DATA");
let countRows=0;
let myrows={};
let originalrows = this.state.originalrows;
// console.log("righe originali"+JSON.stringify(originalrows));
//righe nuove
for(var i in self.state.rowsAddedForDB){
let valRow=self.state.rowsAddedForDB[i];
let myRow={
"riga":valRow,
statoriga:"INSERT",
statoPrecedente:{}
}
myrows[countRows]=myRow;
countRows=countRows+1;
}
//righe aggiornate
for(var i in self.state.rowsChangedForDB){
let valuesChanged=self.state.rowsChangedForDB[i];
let keyValue=Object.keys(valuesChanged)[0];
// console.log("valuesChanged"+JSON.stringify(valuesChanged));
let originalrow={};
let newrow={};
for(var j in originalrows){
if(originalrows[j][this.state.key]===keyValue){
originalrow=Object.assign({},originalrows[j]);
newrow=Object.assign({},originalrows[j]);
}
}
// console.log("original row"+JSON.stringify(originalrow));

  for(var prop in valuesChanged){
    //console.log("prop"+prop);
    let proprieta=valuesChanged[prop];
    for(var i in proprieta){
      //console.log(proprieta[i]);
      if(!proprieta[i]){
        newrow[i]='';
      }else{
        newrow[i]=proprieta[i];
      }
    }
  }

  for(var k in newrow){
      for(var kk in this.state.columnsDetailLink){
        if(k===this.state.columnsDetailLink[kk]){
          newrow[k]=getTextFromJSONLink(newrow[k]);
        }
      }

  }
  for(var k in originalrow){
      for(var kk in this.state.columnsDetailLink){
        if(k===this.state.columnsDetailLink[kk]){
          originalrow[k]=getTextFromJSONLink(originalrow[k]);
        }
      }

  }

  let myRow={
      "riga":newrow,
      statoriga:"UPDATE",
      statoPrecedente:originalrow
    }
    myrows[countRows]=myRow;
    countRows=countRows+1;
}
//righe eliminate
for(var i in self.state.rowsDeletedForDB){
  let idRow=self.state.rowsDeletedForDB[i];
  let row={};
  for(var j in originalrows){
    if(originalrows[j][this.state.key]===idRow){
      row=Object.assign({},originalrows[j]);
    }
  }
  for(var k in row){
      for(var kk in this.state.columnsDetailLink){
        if(k===this.state.columnsDetailLink[kk]){
          row[k]=getTextFromJSONLink(row[k]);
        }
      }
  }
  let myRow={
      "riga":row,
      statoriga:"DELETE",
      statoPrecedente:row
    }
    myrows[countRows]=myRow;
    countRows=countRows+1;
}

let myData={
datarelation:{},
datatable:{
[self.props.entita]:{
"righe": myrows,
"chiave": [self.state.key]
}
}

};

// console.log(JSON.stringify(myData));
return myData;
}

updateData= async() =>{
let token = cookies.get('JEProjectJWTTK');
let data={};
data=this.generateData();
let self=this;
let body={
data:data,
token:token,
conf:getDBCONF()
};
////console.log(" called: "+this.props.apiToCall.apiName);

let response = await fetch(getUrlApi()+"/api/uploadData", {
  method: 'POST',
  body:    JSON.stringify(body),
  headers: { 'Content-Type': 'application/json' },

  }).then((results) => results.json()) 
  .then(function(json) {
     //console.log("response: "+JSON.stringify(json));
     self.setState({
      buttonLock:false
     });
     if(json["ERRORE"]){
      self.setState({
        showAvvisoErrore:true,
        msgErrore:json.errore
      })

     }else{
       self.azzerraStato();
      self.callData();
      self.setState({
        showSuccess:true,
      });
     }
  })
  .catch(function(error) {
    //console.log(error);
  }); 

  return response;

};

handleSubmit(e){

this.updateData();
//this.controlObligatory();
e.preventDefault();

}

handleCloseModalAggiornamento(e){
this.setState({
showConfermaAggiornamento:false,
});
}
handleModalAggiornamento(e){
this.setState({
showConfermaAggiornamento:false,
buttonLock:true,
});
this.updateData();
}
handleSave(e){
this.setState({
showConfermaAggiornamento:true
});
//
}
handleCloseSuccess(){
this.setState({
showSuccess:false,
buttonLock:false
});
}
handleCloseAvvisoErrore(){
this.setState({
showAvvisoErrore:false,
msgErrore:"",
buttonLock:false
});
}
changeSelection(selection){
let self =this;
let selectedRowsData= this.state.rows.filter(
row =>
selection.findIndex(selectId => selectId === self.getRowId(row)) !== -1
);
self.setState({ selection:selection });
//console.log("SELEZIONATO"+JSON.stringify(selectedRowsData))
self.props.callbackParentSelection(selectedRowsData);
}
//onClick={() => this.props.callbackParentSelection(row)}
azzerraStato(){

this.setState({
rows: [],
originalrows:[],
columns:[],
pageSizes: [30, 50, 60, 0],
editingRowIds: [],
addedRows: [],
rowChanges: {},
dateColumns: [],
datetimeColumns: [],
timeColumns: [],
textColumns: [],
inputColumns: [],
ucColumns:[],
dateFilterOperations: ['equal', 'greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'],
currencyColumns: [],
currencyFilterOperations: ['equal', 'notEqual', 'greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'],
linkDetailFilterOperations: ['equal', 'notEqual', 'greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual'],
filteringColumnExtensions: [
{
columnName: 'saleDate',
predicate: (value, filter, row) => {
if (!filter.value.length) return true;
if (filter && filter.operation === 'month') {
const month = parseInt(value.split('-')[1], 10);
return month === parseInt(filter.value, 10);
}
return IntegratedFiltering.defaultPredicate(value, filter, row);
},
},
],
columnWidths: [],
hiddenColumnNames: [],
columnOrder:[],
tableColumnExtensions:[],
exportData:[],
XLSData:[],
rowsChangedForDB:[],
rowsDeletedForDB:[],
rowsAddedForDB:[],
editingStateColumnExtensions: [],
newRowId:-1,
columnsProperties:[],
columnsLink:[],
selection: [],
filters:[],
exportData:[],
show:false,
showConfermaAggiornamento:false,
buttonLock:false,
showAvvisoErrore:false,
showSuccess:false,
buttonLock:false,
msgErrore:"",
chiamatoData:0,
integratedFilteringColumn:[]
})
}

render() {
// console.log("ucColumns -----------------------:");
// console.log(this.state.ucColumns);
let showAsDivClass=this.props.showAsDiv?"showAsDiv":"";
//console.log("this.state.defaultEditingRowIds.length"+JSON.stringify(this.state.editingRowIds))
//console.log("EDITTABLE FILTER"+JSON.stringify(this.state.arrayFiltroData))
//console.log(showAsDivClass)
return (
{({ translate }) =>


         <Card  className={" editTableCard "+showAsDivClass}>
         {
           ((this.props.title!==undefined && this.props.title!==null) || this.props.EditOn== 'true'  || (this.props.exportOn == 'true' && this.state.XLSData.length>0))?
           <CardHeader className="">

                    <Row>
                        <Col className="col-md-3">
                                <h6 className="m-0 p-0">{this.props.title}</h6>
                        </Col>
                        <Col className="col-md-9">
                          <Row>
                          <ul className="nav nav-pills card-header-pills">
                          {this.props.EditOn == 'true'?
                            <li className="nav-item m-1" >
                              <Button id="btnSalva" type="submit" size="mm" color="success" disabled={this.state.buttonLock} onClick={this.handleSave} ><i className="fa fa-check"></i></Button>
                              <Modal isOpen={this.state.showConfermaAggiornamento} toggle={this.state.handleCloseModalAggiornamento}
                                    className='modal-warning ' >
                                <ModalHeader>{translate("attenzione")}</ModalHeader>
                                <ModalBody>
                                        {translate("confermaUpload")} 
                                </ModalBody>
                                <ModalFooter>
                                    <Button color="warning" onClick={this.handleModalAggiornamento}>{translate("SI")}</Button>
                                    {' '}
                                    <Button color="secondary" onClick={this.handleCloseModalAggiornamento}>
                                        {translate("NO")} 
                                    </Button>
                                </ModalFooter>
                              </Modal>
                            </li>:null
                          }
                            {this.props.exportOn && this.state.XLSData.length>0?
                              <li className="nav-item m-1" >
                                <JEExportXls 
                                  xlsData={this.state.XLSData}
                                  nameFile={this.props.title}
                                />
                              </li>
                              :null
                            }
                          </ul>
                          <Modal isOpen={this.state.showSuccess} toggle={this.handleCloseSuccess}
                              className='modal-success ' >
                              <ModalHeader>{translate("complimenti")} </ModalHeader>
                              <ModalBody>
                                  {translate("modificaSuccessoTab")} 
                              </ModalBody>
                              <ModalFooter>
                                  <Button color="success" onClick={this.handleCloseSuccess}>{translate("ok")}</Button>

                              </ModalFooter>
                              </Modal>


                          <Modal isOpen={this.state.showAvvisoErrore} toggle={this.handleCloseAvvisoErrore}
                              className='modal-danger ' >
                              <ModalHeader>{translate("attenzione")} </ModalHeader>
                              <ModalBody>
                                  {translate("erroreSalvataggio")} 
                                  <Label id="errSalva">{this.state.msgErrore} </Label>
                              </ModalBody>
                              <ModalFooter>
                                  <Button color="danger" onClick={this.handleCloseAvvisoErrore}>{translate("ok")}</Button>

                              </ModalFooter>
                          </Modal>

                          </Row>
                        </Col>
                      </Row>


                </CardHeader>
                :null
         }


          <CardBody className="cardBodyTable">

            {this.state.show ?

            <Grid
            rows={this.state.rows}
            columns={this.state.columns}
            getRowId={this.getRowId}>

            <LinkTypeProvider
            for={this.state.columnsLink}
            />
            <DetailLinkTypeProvider
            for={this.state.columnsDetailLink}
            />
            <ImageScriptTypeProvider
            for={this.state.funcImageScript}
            />
            <ImageTypeProvider 
            for={this.state.ImageColumns}
            />
            <ImageTypeProvider
            for={this.state.noEditImageColumns}
            editorComponent={NoEditEditorImage}
            />
            <DragDropProvider />
            <DateTypeProvider
              for={this.state.dateColumns}
              availableFilterOperations={this.state.dateFilterOperations}
              editorComponent={DateEditor}
            />
            <TimeTypeProvider
              for={this.state.timeColumns}
              availableFilterOperations={this.state.dateFilterOperations}
              editorComponent={TimeEditor}
            />

           <DateTimeTypeProvider
              for={this.state.datetimeColumns}
              availableFilterOperations={this.state.dateFilterOperations}
              editorComponent={DateTimeEditor}
            />
            <DataTypeProvider
              for={this.state.currencyColumns}
              availableFilterOperations={this.state.currencyFilterOperations}
              editorComponent={NumberEditor}
            />
            <DataTypeProvider
              for={this.state.textColumns}
              editorComponent={TextEditor}
            />
            <DataTypeProvider
              for={this.state.inputColumns}
              editorComponent={this.InputEditor}
            />

            <DataTypeProvider
            for={this.state.ucColumns}
            availableFilterOperations={[]}
            editorComponent={UcEditor} 
            />

            <DataTypeProvider
            for={this.state.columnsDetailLink}
            editorComponent={DetailLinkEditor}
            />

            <DataTypeProvider
            for={this.state.noEditColumns}
            editorComponent={NoEditEditor}
            />



            <SearchState defaultValue="" />

            <FilteringState defaultFilters={this.state.filters} onFiltersChange={this.changeFilters} />
            <IntegratedFiltering columnExtensions={this.state.integratedFilteringColumn} />

            <SortingState defaultSorting={this.props.defaultSorting}/>
            <IntegratedSorting columnExtensions={this.state.sortingLinksExtension}/>

            <PagingState
              defaultCurrentPage={0}
              pageSizes={this.state.pageSizes}
              onPageSizeChange={this.changePageSize}
            />

            {(this.props.NewOn== 'true' || this.props.EditOn== 'true' || this.props.DeleteOn== 'true' || this.state.editingRowIds.length>0) ?
              <EditingState
                editingRowIds={this.state.editingRowIds}
                onEditingRowIdsChange={this.changeEditingRowIds}
                rowChanges={this.state.rowChanges}
                onRowChangesChange={this.changeRowChanges}
                addedRows={this.state.addedRows}
                onAddedRowsChange={this.changeAddedRows}
                onCommitChanges={this.commitChanges}
                columnExtensions={this.state.editingStateColumnExtensions}
                defaultEditingRowIds={this.state.editingRowIds}
              />
              :null
            }

            <IntegratedPaging />

            {this.props.selectionOn?
              <Table  rowComponent={({ row, ...restProps }) => (
                      <Table.Row
                        {...restProps}
                        // eslint-disable-next-line no-alert
                        onClick={() => this.changeSelection([this.getRowId(row)])}
                        style={{
                          cursor: 'pointer',
                          ...rowStyle(row),
                        }}
                      />
                    )}  />:
              <Table  rowComponent={TableRow} /> 
            }

            <TableColumnResizing
              columnWidths={this.state.columnWidths}
              onColumnWidthsChange={this.changeColumnWidths}
            />
            <TableColumnReordering
              order={this.state.columnOrder}
              onOrderChange={this.changeColumnOrder}
            />
            <TableHeaderRow  showSortingControls={true} />


            {(this.props.NewOn== 'true' || this.props.EditOn== 'true' || this.props.DeleteOn== 'true' ||  this.state.editingRowIds.length>0) ?
              <TableEditRow />
              :null
            }
            {(this.props.NewOn== 'true' || this.props.EditOn== 'true' || this.props.DeleteOn== 'true' ||  this.state.editingRowIds.length>0) ?
                <TableEditColumn
                  showAddCommand={(!this.state.addedRows.length && this.props.NewOn)== 'true'}
                  showEditCommand={this.props.EditOn== 'true' ||  this.state.editingRowIds.length>0}
                  showDeleteCommand={this.props.DeleteOn== 'true'}
                  commandComponent={Command}
                />
              :null
            }


                <TableColumnVisibility
                  hiddenColumnNames={this.state.hiddenColumnNames}
                  onHiddenColumnNamesChange={this.hiddenColumnNamesChange}
                />

            {this.props.searchAllOn || this.props.hideColumnsOn ?<Toolbar />:null}
            {this.props.hideColumnsOn ?<ColumnChooser />:null}
            {this.props.searchAllOn ?<SearchPanel />:null}
            {this.props.filterOn?
              <TableFilterRow
                showFilterSelector
                iconComponent={FilterIcon}
                messages={{ month: 'Month equals' }}
              />
              :null}



            {this.props.selectionOn ?
              <SelectionState
                selection={this.state.selection}
                onSelectionChange={this.changeSelection}
              />
            :
              null
            }
            {this.props.selectionOn ?
              <TableSelection
                //selectByRowClick -- rowComponent is ignored in this case
                //highlightRow -- rowComponent is ignored in this case.
                showSelectionColumn={this.props.multipleSelectionColumn}
              />
            :
              null
            }
             <Template name="root">
              <TemplatePlaceholder />
              <TemplateConnector>
                {({ rows }) => {
                  this.state.exportData = rows;
                  if(rows.length>0){
                    this.generateColumnsExport(this.state.columnRows,rows);
                  }
                  return null;
                }}
              </TemplateConnector>
            </Template>

            <PagingPanel
              pageSizes={this.state.pageSizes}
            />



          </Grid>
          :
          <div className="text-center p-5"><big className="text-muted center">Caricamento in corso</big></div>

          }

               </CardBody>
            </Card>
          </Col>
          </Row>
        }
      </Translate>
);

}
}
export default withLocalize(UCEditTableB);

```

question
Source
picture ProjectaJE
😕1

Most helpful comment

Hi,

Since your code example is quite large, it is difficult to say how to fix the issue without being able to see it in action.
If possible, please isolate the issue into a small runnable example (you can use codesandbox.io, for example) so that we can debug it locally.

picture SergeyAlexeev on 3 Dec 2018
👍2

All 3 comments

Hi,

Since your code example is quite large, it is difficult to say how to fix the issue without being able to see it in action.
If possible, please isolate the issue into a small runnable example (you can use codesandbox.io, for example) so that we can debug it locally.

SergeyAlexeev picture SergeyAlexeev on 3 Dec 2018
👍2

We are closing the issue due to inactivity. Feel free to reopen it.

SergeyAlexeev picture SergeyAlexeev on 11 Dec 2018

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.

lock[bot] picture lock[bot] on 15 Jun 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

pbalzano91 picture pbalzano91  路  3Comments
bloolizard picture bloolizard  路  3Comments
cavr picture cavr  路  3Comments
ccamusso picture ccamusso  路  3Comments
stclairdaniel picture stclairdaniel  路  3Comments