Refresh DataTable
Hi,
I have a question about Refresh/Reinitialize DataTable.
Im using Metronic v9.0.4 with React. The DataTable component is working fine and now I want to implement DataTable Refresh function. How to refresh/reinitialize the DataTable when a button was clicked without reload the page?
Replies (5)
Hi CK Chang,
Apologies for the delay. Could you try calling the `getInstance` function from the existing DataTable instance like this?
const datatable = new KTDataTable(element, dataTableOptions);
datatable = KTDataTable.getInstance(datatableEl);For some reason, the existing DataTable instance might be missing from `KTDataTable.getInstance`.
Hi CK Chang,
Make sure the reload function is called after the DataTable component has been created and mounted in the DOM. You could achieve this by:
Placing the button within the component that renders the DataTable, and only enabling it after the DataTable has been successfully initialized.
Or using a state variable to track the DataTable's initialization status and conditionally render the button
import { useEffect, useState } from "react";
function MyComponent() {
const [dataTableInitialized, setDataTableInitialized] = useState(false);
useEffect(() => {
// Initialize your DataTable here
// ...
// After successful initialization
setDataTableInitialized(true);
}, []);
const handleRefresh = () => {
// ... your existing handleRefresh logic
};
return (
<div>
{/* ... your DataTable */}
{dataTableInitialized && (
<button onClick={handleRefresh}>Refresh</button>
)}
</div>
);
}Thanks for sharing the code. I tried to follow the code structure that you provided. However the result is still the same.
I can retrieve the datatable instance when I initialize the datatable. But when I trigger the handleRefresh() function, the datatable element is successfully retrieved, while the datatable instance is not. What I retrieve in this line of code: const datatable = KTDataTable.getInstance(datatableEl); in console log is KTDataTable with null uid, element and such
import { useEffect, useState } from "react";
import { KTDataTable, KTDataTableConfigInterface } from "../metronic/core/components/datatable";
function MyComponent() {
const [dataTableInitialized, setDataTableInitialized] = useState(false);
useEffect(() => {
// DataTable initialization
const apiUrl = "apiUrl";
const element = document.querySelector("#product_cat_data_table") as HTMLElement;
const token = "token";
const dataTableOptions: KTDataTableConfigInterface = {
apiEndpoint: apiUrl,
requestMethod: "GET",
requestHeaders: {
"Authorization": `Bearer ${token}`,
},
pageSize: 5,
stateSave: false,
columns: {
//...
},
};
const datatable = new KTDataTable(element, dataTableOptions);
setDataTableInitialized(true);
}, []);
const handleRefresh = () => {
// Handle Refresh
const datatableEl = document.querySelector("#product_cat_data_table") as HTMLElement;
const datatable = KTDataTable.getInstance(datatableEl);
datatable.reload();
};
return (
<>
<div data-datatable="true" `id`="product_cat_data_table">
</div>
{dataTableInitialized && (
<button onClick={handleRefresh}>Refresh</button>
)}
</>
);
}
export default MyComponent;You can use the `reload` function to refresh the DataTable without reloading the page. Here’s an example:
KTDataTable.getInstance(yourDataTableElement).reload();
This will reinitialize the DataTable and fetch fresh data when the button is clicked.
Thanks for your reply. I tried the method you mentioned but it doesn't seem to achieve my goal. This is the scenario:
Assume my DataTable for id 'product_cat_data_table' was successfully created.
When this button clicked:
<button className="btn btn-sm btn-primary text-white" onClick={handleRefresh}>Refresh</button>It trigger this function:
const handleRefresh = async () => {
const datatableEl = document.querySelector("#product_cat_data_table") as HTMLElement;
KTDataTable.getInstance(datatableEl).reload();
}And the console output this:
component.ts:40 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get')
at KTDataTable._fireEvent (component.ts:40:18)
at KTDataTable.reload (datatable.ts:1472:8)
at handleRefresh (ProductCategoryTable.tsx:53:46)
at HTMLUnknownElement.callCallback2 (chunk-6BKLQ22S.js?v=06c99dc5:3674:22)
at Object.invokeGuardedCallbackDev (chunk-6BKLQ22S.js?v=06c99dc5:3699:24)
at invokeGuardedCallback (chunk-6BKLQ22S.js?v=06c99dc5:3733:39)
at invokeGuardedCallbackAndCatchFirstError (chunk-6BKLQ22S.js?v=06c99dc5:3736:33)
at executeDispatch (chunk-6BKLQ22S.js?v=06c99dc5:7014:11)
at processDispatchQueueItemsInOrder (chunk-6BKLQ22S.js?v=06c99dc5:7034:15)
at processDispatchQueue (chunk-6BKLQ22S.js?v=06c99dc5:7043:13)
