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.
F
foreign-sapphire243d 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(); }} /> ); }} />;
M
manual-pink242d 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
F
foreign-sapphire242d 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
F
foreign-sapphire242d 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
M
manual-pink242d 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.
F
foreign-sapphire242d 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
More Posts
custom authProvider - Passing API UrlHi! I currently have a custom authProvider that queries the /auth/login endpoint of my API. Right nhow to remove default valuesrewriting my own login.tsx, i have a code like this <TextField {...register("page titlewhat is the best way in a component to render the page title attribute ?default language for applicationhello, I need to change the default language for the application from English to Italian. I have alruseTable Custom API Endpoint?Hi! I'd like to use some functionalities of useTable (namely, onSearch), but using a custom API endinvalid hook call errorHi, using refine.dev (vite) I'm trying to "preload" data from UseList In order to do that, i'm tryiDoes self-hosted open-source Refine comes with all features?I'm a bit confused about these pages: 1. https://refine.dev/docs/comparison/ 2. https://refine.dev/phello guys can you tell me how to setuphello guys, can you tell me how to setup casl in react refine dev with access control provider ?useAutocomplete Server Side PaginationI have a controller that renders an autocomplete component. I am using the useAutocomplete hook to gMUI Inferencer Can't Detect Object Inside EntitySo I have the MUI Inferencer working well enough to detect some of my entity fields, but for some reWhat's the easiest way to create a product grid with search option ?when a product tile is clicked, it should show product details page etc. my db is supabase.Custom error messageI want to handle error message whenever i call getList from my dataProvidercustom error messageIn my app, Iam using a lot of forms. if there is an error message from an api call in the backgroundusing the react-i18next example I guess a type mismatchHey everyone, I just started integrating translations into our application and noticed that the docuuseSelect() with paramI have a list Address and I want to fetch list address base on user_id. How can I use useSelect to dInferencer considered a field as a relation and decided not to render itHey guys, could you please help me understand what happened: 1. fields [cust_id, id] returned from