Add custom tooltip to component instance (not via parent) - react-data grid
Just to provide broader context - My ultimate goal is to improve an editable cell with a "synced" icon when synced with background content.
I kept trying to add a custom tooltip to a specific editable cell to indicate syncedWithBackEnd = true/false
and then the custom Formatter will conditionally add the styling (if DB-enabled sync is correct).
Problem ,
I am unable to complete this setup for the Cell instance
Tried so far:
-
Provide a Formatter callback and call it externally. Didn't find a way to call a function on a Formatter instance (tied to a specific cell)
-
Set up the support as part of the logic
handleRowUpdated
. Setting a custom prompt, but it doesn't reach the cell:var rows = this.getRows(); ... // e.updated.customProp = "whatever" ---> fails to reach Cell Object.assign(rows[e.rowIdx], e.updated); this.setState({rows: rows});
Any ideas on how to achieve this?
Or maybe there is an obvious way to achieve the final goal that I completely missed (I must mention that I am new to React and fairly new to js in general).
source to share
when the actual sync happens (before you want to update your own cell) I assume it is done with a callback? If so, then your callback that invoked the remote ajax call to update the value can then update this.state.rows.customProp (this.state.rows.whatever.customProp) and after changing the state and accepting your getRows () gets from this.state.rows then everything will be automatic. In the worst case, you may need to add a call to this.forceupdate () after changing the state value. this is based on what I have, which sounds similar and works ...
//column data inside constructor (could be a const outside component as well)
this.columnData = [
{
key: whatever,
name: whatever,
...
formatter: (props)=>(<div className={props.dependentValues.isSynced? "green-bg" : "")} onClick={(evt)=>this.clickedToggleButton} >{props.value}</div>),
getRowMetaData: (data)=>(data),
},
...
}
]
this is the callback function in my data grid wrapper component ...
//when a span
clickedToggleButton(evt, props){
//do remote ajax call we have an ajax wrapper util we created so pseudo code...
MyUtil.call(url, params, callback: (response)=>{
if(this.response.success){
let rows = this.state.rows;
let isFound = false;
for(let obj of rows){
if(obj.id==props.changedId){
obj.isSynced = true;
isFound = true;
break;
}
}
//not sure if this is needed or not...
if(isFound){ this.forceUpdate(); }
}
}
}
Not sure if this helps, but might get started
source to share