useEditable table without traditional save button
From fine foods we can see how to make edits, but how can we achieve samething when we have to patch the record using a column which is of toogle type.
6 Replies
fascinating-indigo•13mo ago
part of below code for ref :
const { tableProps, searchFormProps, editButtonProps, saveButtonProps, isEditing, setId, filters, formProps } = useEditableTable<any>({
resource: "rules", }) ======================================================= <Table.Column key="status" dataIndex="status" title={"Inactive/Active"} render={(value, data: ICategory) => { if (value?.toLowerCase() == "inactive") return ( <Switch size="small" checked={false} onChange={() => { console.log("inactive", data); saveButtonProps.onClick(); }} /> ); if (value?.toLowerCase() == "active") return ( <Switch size="small" checked={true} onChange={() => { console.log("inactive", data); saveButtonProps.onClick(); }} /> ); }} />;
const { tableProps, searchFormProps, editButtonProps, saveButtonProps, isEditing, setId, filters, formProps } = useEditableTable<any>({
resource: "rules", }) ======================================================= <Table.Column key="status" dataIndex="status" title={"Inactive/Active"} render={(value, data: ICategory) => { if (value?.toLowerCase() == "inactive") return ( <Switch size="small" checked={false} onChange={() => { console.log("inactive", data); saveButtonProps.onClick(); }} /> ); if (value?.toLowerCase() == "active") return ( <Switch size="small" checked={true} onChange={() => { console.log("inactive", data); saveButtonProps.onClick(); }} /> ); }} />;
harsh-harlequin•13mo ago
Hey @dreamer9067 the
Switch
component does not have a value
prop so it does not work directly with FilterDropdown
. But I think this can be done with the setSelectedKeys
and confirm
properties of FilterDropdown
.
Documentation for details: https://refine.dev/docs/api-reference/antd/components/filter-dropdown/#selectedkeys-setselectedkeys-confirm-clearfilters| refine
Usage
fascinating-indigo•13mo ago
cool @yildirayunlu i'll try it out, but i was thinking of doing it in a different way actually now.
I started by taking inspiration from fine food but then there seems to be to many calls for a single update. for example in enclosed image if i have to update a single entry it make 4 calls out of which 2 seems unnecessary to me, which are get calls we can just make a patch and refresh the list.
![No description](https://cdn.answeroverflow.com/1144601073617748148/image.png)
fascinating-indigo•13mo ago
i wanted to have more control of which api calls to fire and when, so i'm thinking of writing a update query myself and then using
queryResult?.refetch to refresh the table entries.
Please lmk if there is any other better way to achieve the flexibilty i'm looking for. @yildirayunlu
Thanks
harsh-harlequin•13mo ago
Hi, @dreamer9067 If you use
useUpdate
you don't need to use refetch
. After useUpdate
the necessary caches are invalidated. In the question you just asked, the caches are invalidated and the request is sent again.fascinating-indigo•13mo ago
ohh awesome, so i can just use mutate function as callback for switch component onChange and it will work
i'll give it a try. Thanks