foreign-sapphire•3y 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
foreign-sapphireOP•3y 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(); }} /> ); }} />;
rival-black•3y 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
foreign-sapphireOP•3y 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.
foreign-sapphireOP•3y 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
rival-black•3y 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.foreign-sapphireOP•3y 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