passive-yellow
passive-yellow12mo ago

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
passive-yellow
passive-yellow12mo 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(); }} /> ); }} />;
foreign-sapphire
foreign-sapphire12mo 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
passive-yellow
passive-yellow12mo 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
passive-yellow
passive-yellow12mo 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
foreign-sapphire
foreign-sapphire12mo 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.
passive-yellow
passive-yellow12mo 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