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
| Prop | Type | Description |
|---|---|---|
open | boolean | Modal open state |
onOpenChange | (open: boolean) => void | Open state handler |
entity | Entity | Entity to edit |
entityConfig | EntityConfig | Entity configuration |
formFields | FieldConfig[] | Fields to render |
schema | ZodSchema | Validation schema |
onSuccess | (entity: Entity) => void | Called after successful update |
QuickEdit uses getUpdatedFormFields internally — only changed fields are sent in the PATCH payload.
Related
Last updated on