Load data not from resource into a table

How can you load data not from a resource into a table?

5 Replies

kapa.ai•10mo ago

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:

import { useCustom, useUpdate } from "@pankod/refine";
import { Table, Form } from "antd";
import { useState, useEffect } from "react";

const MyComponent = () => {
    const { data, isLoading, isError } = useCustom({ url: "/my-endpoint" });
    const [tableData, setTableData] = useState([]);
    const { mutate: update } = useUpdate();

    useEffect(() => {
        if (data) {
            setTableData(data);
        }
    }, [data]);

    const handleSave = (row) => {
        const newData = [...tableData];
        const index = newData.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        setTableData(newData);
        update({ resource: "posts", id: row.id, values: row });
    };

    const columns = [
        // define your columns here
    ];

    const components = {
        body: {
            row: EditableRow,
            cell: EditableCell,
        },
    };
}

import { useCustom, useUpdate } from "@pankod/refine";
import { Table, Form } from "antd";
import { useState, useEffect } from "react";

const MyComponent = () => {
    const { data, isLoading, isError } = useCustom({ url: "/my-endpoint" });
    const [tableData, setTableData] = useState([]);
    const { mutate: update } = useUpdate();

    useEffect(() => {
        if (data) {
            setTableData(data);
        }
    }, [data]);

    const handleSave = (row) => {
        const newData = [...tableData];
        const index = newData.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        setTableData(newData);
        update({ resource: "posts", id: row.id, values: row });
    };

    const columns = [
        // define your columns here
    ];

    const components = {
        body: {
            row: EditableRow,
            cell: EditableCell,
        },
    };
}

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: ----------------------

kapa.ai•10mo ago

<@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?

kapa.ai•10mo ago

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:

const {{ data, isLoading, isError }} = useCustom({{ url: "/my-endpoint" }});
const [tableData, setTableData] = useState([]);

useEffect(() => {{
    if (data) {{
        setTableData(data);
    }}
}}, [data]);

const {{ data, isLoading, isError }} = useCustom({{ url: "/my-endpoint" }});
const [tableData, setTableData] = useState([]);

useEffect(() => {{
    if (data) {{
        setTableData(data);
    }}
}}, [data]);

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:

<Table dataSource={tableData} />

<Table dataSource={tableData} />

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: ----------------------

kapa.ai•10mo ago

<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below