Associations

Associations renders related entity panels on a detail page. For example, an Invoice detail page might show related Bills, Payments, and Line items as separate tabs or sections.

Import


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

How It Works

Each association is a mini-listing that fetches related entities from a nested API endpoint. Associations support add, edit, and delete actions inline.


Entity Detail Page
  └── Associations
        ├── Bills (GET /invoices/:id/bills)
        ├── Payments (GET /invoices/:id/payments)
        └── Lines (GET /invoices/:id/lines)

Props

Prop	Type	Description
`associations`	`AssociationConfig[]`	Association definitions
`entityId`	`string \| number`	Parent entity ID
`className`	`string`	Additional CSS classes

Association Config


export const invoiceAssociations: AssociationConfig[] = [
  {
    key: "bills",
    label: "Bills",
    endpoint: (id) => `/api/invoices/${id}/bills`,
    columns: billColumns,
    actions: billActions,
  },
  {
    key: "payments",
    label: "Payments",
    endpoint: (id) => `/api/invoices/${id}/payments`,
    columns: paymentColumns,
  },
];

Associations are rendered in tabs by default. The Tabs component is used for the tab switcher.