How to get Datatable components rerendered upon state changes - reactjs

Question

I have a react-redux application this has the following code structure, which is running correctly.
class Customers extends Component{
state = {
showAddCustomerForm : false
}
toggleAddCustomerForm = ()=>{
this.setState({showAddCustomerForm: !this.state.showAddCustomerForm})
}
render(){
return (
<Fragment>
<AddCustomerForm />
<Datatable
options={{
data: this.props.customers,
buttons: [
{
extend: 'csv',
text: '<i class="fa fa-file-excel-o"></i>Excel'
},
{
text: 'Add Customer',
action: this.toggleAddCustomerForm
}
],
columns: [
{ data: "name" },
{ data: "email" },
{ data: "mobile", "defaultContent": "<i>Not set</i>" },
{ data: "landline", "defaultContent": "<i>Not set</i>"}
]
}}
filter="true"
className="table table-striped table-bordered"
width="100%"
/>
</Fragment>
)
}
}
The Datatable Component uses the redux store for rendering the table. When I add a new Customer using the AddCustomerForm I update Redux store. This actually changes the application state, So I expect the Datatable Component to RE-Render and show me the new customer in the table. however, this does not happen. If I hit it shows me correctly.
I understand that both React and jQuery Datatables manage DOM independently, but I am sure there must be a way to use datatables in a rerenderable component...
Please help..

Answer 1

For datatables fed by HTML or JavaScript source, I'm afraid, there's no way to re-render datatable upon source data modification.
However, it is rather good news from the standpoint of data consistency across multiple clients who might use your application simultaneously. To maintain that, you may use AJAX requests to update back-end data which all the users refer to and, upon successful update, throw ajax.reload() to sync your client with backend.
If, for some reason, you might wish to update your datatable locally, you may consider cleaning table contents and re-populating it with your data, like that:
//datatable initialization
var datatable = $('#mytable').DataTable({
data: myDataArray
});
//source data modification
myDataArray.push({
attr1: "value",
attr2: "value"...
});
//purge datatable contents
datatable.clear();
//re-populate datatable
$.each(myDataArray, function () {
datatable.row().add(this);
});
//re-render up to date datatable
datatable.draw();

Answer 2

You can update datatable by implementing the "componentDidUpdate" function of your component. Example:
componentDidUpdate=()=>{
//console.log("Component did update");
if (this.props.customers.length>0){
this.createTable()
this.updateTable();
}
};
Then implement the function for updating data. E.g
updateTable=()=>{
let table=$('#mytable').DataTable();
table.clear();
table.rows.add(this.props.consumers).draw();
}
I would also create the table using javascript rather than in the JSX. That way you can destroy the table and create it afresh every time you want to update
createTable=()=>{
if ( $.fn.DataTable.isDataTable( '#mytable' ) ) {
$('#mytable').DataTable().destroy();
}
let table=$('#mytable').DataTable({
"columns":columns,
});
And the JSX would only contain the id of the table
<table id="mytable">