Load data not from resource into a table
How can you load data not from a resource into a table?
5 Replies
Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can load data not from a resource into a table by using custom hooks or components based on
useEditableTable
, useCustom
, and useUpdate
. You would fetch the data using useCustom
, store it in a state variable, and then pass this state to your table component. When the data is edited, you would use useUpdate
to send the updated data back to the server.
Here's a simplified example:
In this example, useCustom
is used to fetch data from a custom endpoint. The fetched data is then stored in a state variable and passed to the table component. When a row is edited, the handleSave
function is called, which updates the state and sends the updated data back to the server using useUpdate
.
Please note that this approach bypasses some of the features provided by useEditableTable
, such as automatic pagination and sorting. If you need these features, you may need to implement them manually.
Source (https://discord.com/channels/837692625737613362/1142170992068804730)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin•10mo ago
How does this data get linked to the table?
@kapa.ai How does this data get linked to the table?
Let me check the knowledge base for you. One moment! :books:
----------------------
The data fetched from a custom endpoint is linked to the table through state management in React. In the provided example, the fetched data is stored in a state variable
tableData
using the useState
hook. This state variable is then passed to the table component as its data source.
Here's the relevant part of the code:
In this code, useCustom
is used to fetch data from a custom endpoint. The fetched data is then stored in the tableData
state variable using the setTableData
function. This state variable is updated whenever the fetched data changes, thanks to the useEffect
hook.
The tableData
state variable is then passed to the table component as its data source:
In this way, the table component is linked to the fetched data. When the tableData
state variable changes, the table component will automatically re-render to reflect the new data.
Source (https://discord.com/channels/837692625737613362/1142170992068804730)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below