Hope you are Having a Good Day,
Can I ask for some help on how to refresh the dataTable in reactJs when I clicked the save button from the modal.
Here is my structure.
I have a parameterMaintenance.jsx below which imports the DataTable Component
ParameterMaintenance.jsx
import React from 'react'
import { ParameterDatable } from '../../components/ParameterDatatable'
export const ParameterMaintenance = () => {
return (
<div className='container mt-5'>
<div></div>
<ParameterDatatable/>
</div>
)
}
and then, I have a ParameterDataTable.jsx file that holds the dataTable.
notice that here, I called the AddParameter.jsx from the
DataTable actions property like this actions={<AddParameter/>}
to add a button that displays the modal form that handles the Saving of a new Parameter.
ParameterDatatable.jsx
import React, {useState, useEffect} from 'react'
import axios from 'axios';
import DataTable from 'react-data-table-component';
import DataTableExtensions from 'react-data-table-component-extensions';
import 'react-data-table-component-extensions/dist/index.css';
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import { AddParameter } from './AddParameter';
export const ParameterDatatable= () => {
const [parameters, setParameters] = useState([]);
useEffect(() => {
loadParameters();
}, []);
const loadParameters = async () => {
const result = await axios.get("http://localhost:8080/parameters");
setParameters(result.data);
};
const deleteParam = async (id) => {
await axios.delete(`http://localhost:8080/parameter/${id}`);
loadParameters();
};
const column = [
{
name: "Param Name",
selector: (row) => row.param_name,
width: "180px" ,
sortable: true,
alignItems: 'center',
display: 'flex',
},
{
name: "Sequence Number",
selector: (row) => row.param_sequence_number,
width: "150px" ,
sortable: true,
},
{
name: "Parameter Value",
selector: (row) => row.param_value,
width: "150px" ,
sortable: true,
},
{
name: "",
width: "110px" ,
cell: row =>
<div className="App">
<div className="openbtn text-center">
<button
type="button"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#myModal"
>
Delete
</button>
<div className="modal" tabindex="-1" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Danger</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<p>Do you want to remove this record premanently?</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" className="btn btn-primary" onClick={() => deleteParam(row.param_id)}
data-bs-dismiss="modal">
Yes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
,
},
{
name: "",
width: "110px" ,
cell: row =>
<button
className="btn btn-primary mx-2"
onClick={() => deleteParam(row.param_id)}>
Edit
</button>,
},
]
return (
<div className="datatable">
<DataTableExtensions
columns={column}
data={parameters}
print={false}
export={false}
>
<DataTable
title="Parameters"
columns={column}
data={parameters}
pagination
fixedHeader
fixedHeaderScrollHeight="450px"
highlightOnHover
actions={<AddParameter/>}
subHeader
/>
</DataTableExtensions>
</div>
)
}
And below is my AddParameter.jsx which is the modal form for saving new parameter
AddParameter.jsx
import React, {useState} from 'react'
import axios from "axios";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link, useNavigate } from "react-router-dom";
export const AddParameter = () => {
let navigate = useNavigate();
const [parameter, setParameter] = useState({
param_name: "",
param_sequence_number: "",
param_value: "",
});
const {param_name, param_sequence_number, param_value} = parameter;
const onInputChange = (e) => {
setParameter({ ...parameter, [e.target.name]: e.target.value });
};
const onSubmit = async (e) => {
e.preventDefault();
console.log("Submitting");
await axios.post("http://localhost:8080/parameter", parameter);
navigate('admin/parameter1');
};
return (
<div>
<button className="btn btn-sm btn-info"
data-bs-toggle="modal"
data-bs-target="#exampleModal">Create New</button>
<div className="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">New Parameter</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<form onSubmit={(e) => onSubmit(e)}>
<div className="mb-3">
<label for="recipient-name" className="col-form-label">Parameter Name</label>
<input type={"text"} className="form-control" placeholder="Param Name" name="param_name" value={param_name}
onChange={(e) => onInputChange(e)}/>
</div>
<div className="mb-3">
<label for="message-text" className="col-form-label">Sequence Number</label>
<input type={"text"} className="form-control" placeholder="Sequence Number" name="param_sequence_number" value={param_sequence_number}
onChange={(e) => onInputChange(e)}/>
</div>
<div className="mb-3">
<label for="message-text" className="col-form-label">Parameter Value</label>
<input type={"text"} className="form-control" placeholder="Value" name="param_value" value={param_value}
onChange={(e) => onInputChange(e)}/>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" className="btn btn-primary" data-bs-dismiss="modal">Save Parameter</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
what I wanted to do is when I clicked the Save button, it will close the modal and refresh the DataTable, or call the loadParameters function which gets data from API in ParameterDataTable.jsx
Tried to use the navigate in reactjs to try to reload the page but the address will just add to the current address like this.
