foreign-sapphire•7mo ago

Edit table with antd/restful api

Hi, I made my table using https://refine.dev/templates/ant-design-template/. I deployed my own json server and use it for the restful service. The data are corrected mapped to the table and I can view the detail value of table. But when I'm going to edit the table, the edit action is not working. How can I fix this issue?

Internal tool template with Ant Design

Build React-based internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

2 Replies

kapa.ai•7mo ago

Hi @Olive105. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To enable editing in your table, you can use the useEditableTable hook provided by Refine. This hook includes all the capabilities of useTable and also enables you to edit your table. It returns Ant Design Table and Form components props. Here is an example of how to use useEditableTable:

const { 
    isEditing,
    saveButtonProps,
    cancelButtonProps,
    editButtonProps,
    tableProps, sorter } = useEditableTable<IPost>({});

<Table.Column<IPost>
        title="Inline Actions"
        dataIndex="inlineActions"
        key="inlineActions"
        render={(_text, record) => {
            if (isEditing(record.id!!)) {
                return (
                    <Space>
                        <SaveButton {...saveButtonProps} size="small" />
                        <Button {...cancelButtonProps} size="small">
                            Cancel
                        </Button>
                    </Space>
                );
            }
            return (
                <Space>
                    <EditButton
                        {...editButtonProps(record.id!!)}
                        size="small"
                    />
                </Space>
            );
        }}
    />

const { 
    isEditing,
    saveButtonProps,
    cancelButtonProps,
    editButtonProps,
    tableProps, sorter } = useEditableTable<IPost>({});

<Table.Column<IPost>
        title="Inline Actions"
        dataIndex="inlineActions"
        key="inlineActions"
        render={(_text, record) => {
            if (isEditing(record.id!!)) {
                return (
                    <Space>
                        <SaveButton {...saveButtonProps} size="small" />
                        <Button {...cancelButtonProps} size="small">
                            Cancel
                        </Button>
                    </Space>
                );
            }
            return (
                <Space>
                    <EditButton
                        {...editButtonProps(record.id!!)}
                        size="small"
                    />
                </Space>
            );
        }}
    />

In this example, useEditableTable is used to create an editable table. The isEditing, saveButtonProps, cancelButtonProps, editButtonProps, and tableProps are all returned from the useEditableTable hook. These are then used to create the table and the buttons for editing, saving, and canceling the edit. You can refer to the Refine useEditableTable hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-editable-table/) for more information. If you're still having issues, it might be due to a bug or a configuration issue. In that case, you can check the Refine GitHub issues (https://github.com/refinedev/refine/issues) to see if anyone else has had a similar problem and how they resolved it. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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