Displaying data with a mix of Form and EditableaTable
Hello everyone !
I've been using Refine since a couple of weeks and it has been a really amazing discovery!
The documentation is great but I can't find a way to include both an EditeableTable and a Form within the same component (which is plugged to a Strapi datasource).
I have an object that includes a few classic attributes and a repeatable component (which is an Array of objects).
I'm able to display all the first level attributes in my page within the form and also to display all the objects of the array in the EditeableTable, but I can't manage to edit or add lines to the Table.
I see that the GET/PUT requests are made against my Table line IDs instead of my main object ID.
What am I missing in order to pass the right ID to the the EditableTable and ensure that even when editing one line of the Table I update the whole object ?
Here's my object structure
interface LeasingScale {
id: number;
wp_id: number;
name: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
rates: Rate[];
}
interface Rate {
id: number;
lenght: number;
}
4 Replies
Hi @alan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
absent-sapphire•2mo ago
Here's how I retrieve my data
const {
tableProps,
formProps,
isEditing,
setId: setEditId,
saveButtonProps,
cancelButtonProps,
editButtonProps,
tableQueryResult,
} = useEditableTable<Rate>({
redirect: false,
meta: {
populate: ["rates"],
},
});
And then basically I build my components like this
<Form {...formProps}>
<FormItemEditableText
formItemProps={{
name: "name",
rules: [{ required: true }],
}}
/>
....
<Table
{...tableProps}
rowKey="id"
dataSource={tableProps.dataSource?.[0]?.rates}
onRow={(record) => ({
onClick: (event: any) => {
setEditId && setEditId(record.id);
},
})}
>
<Table.Column<Rate> dataIndex="id" key="id" title="ID" />
<Table.Column<Rate>
dataIndex="lenght"
key="lenght"
title="Durée"
render={(value, record) => {
if (isEditing(record.id)) {
return (
<Form.Item
name={["rates", record.id, "lenght"]}
style={{ margin: 0 }}
><Input />
</Form.Item>
);
}
return <TextField value={value} />;
}}
/>
....
<Table.Column<Rate>
title="Actions"
dataIndex="actions"
key="actions"
render={(_, record) => {
if (isEditing(record.id)) {
return (
<Space>
<SaveButton {...saveButtonProps} hideText size="small" />
<Button {...cancelButtonProps} size="small">Annule</Button>
</Space>
);
}
return (
<EditButton {...editButtonProps(record.id)} hideText size="small" />
);
}}
/>
</Table>
</Form>;
----------------------
Hello! It's great to hear that you've been enjoying using Refine. Based on your question, it seems like you want to integrate both a
Form
and an EditableTable
within the same component, and ensure that the correct IDs are used for the requests.
To achieve this, you can use the useEditableTable
hook from Refine, which allows you to manage both the form and table properties. Below is an example of how you can structure your component to include both a Form
and an EditableTable
:
In this example, the useEditableTable
hook is used to manage the table properties, and the formProps
are passed to the Form
component. This ensures that both the form and the table are correctly integrated and can handle the necessary actions.
For more detailed information, you can refer to the Refine useEditableTable hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-editable-table/) and the example provided in the documentation (https://refine.dev/docs/examples/table/antd/useEditableTable/).
If you encounter any issues with the IDs being used in the requests, make sure that the rowKey
in the Table
component is set correctly and that the formProps
and tableProps
are properly configured to handle the data structure of your main object.
Feel free to reach out if you have any more questions or need further assistance!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@723529760478593135> kapa.ai is still learning and improving, please let us know how it did by reacting below