Skip to Content

Quick Edit

QuickEdit opens a modal dialog pre-populated with an entity’s current data, allowing inline editing without navigating to the full edit page.


Import

import { QuickEdit } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/QuickEdit";

Usage

import { QuickEdit } from "..."; function RowActions({ entity }) { const [open, setOpen] = useState(false); return ( <> <Button variant="outline" onClick={() => setOpen(true)}>Edit</Button> <QuickEdit open={open} onOpenChange={setOpen} entity={entity} entityConfig={entityConfig} formFields={entityFormFields} schema={entitySchema} onSuccess={() => { setOpen(false); refetch(); }} /> </> ); }

Props

PropTypeDescription
openbooleanModal open state
onOpenChange(open: boolean) => voidOpen state handler
entityEntityEntity to edit
entityConfigEntityConfigEntity configuration
formFieldsFieldConfig[]Fields to render
schemaZodSchemaValidation schema
onSuccess(entity: Entity) => voidCalled after successful update

QuickEdit uses getUpdatedFormFields internally — only changed fields are sent in the PATCH payload.


Last updated on