melony.dev

detailView

detailView is used to display detailed information about a single record, often including related data or actions.

Example:

export const projectDetailView = detailView({
  action: getProjectByIdAction,
  title: "Project Details",
  fields: {
    title: textField(),
    amount: numberField(),
    // ... other fields ...
  },
  headerButtons: [{ label: "Edit", viewId: "projectEditView" }],
  tabs: [
    {
      label: "Tasks",
      viewId: "tasksListView",
      setContext: async ({ searchParams }) => {
        "use server";
        return {
          initialFilter: [
            {
              field: "projectId",
              operator: "Is",
              value: searchParams?.id,
            },
          ],
        };
      },
    },
  ],
});

DetailView Key Properties:

  • action: Server action or endpoint string.
  • title: The title of the detail view.
  • fields: Defines the fields to be displayed.
  • headerButtons: Buttons displayed at the top of the detail view.
  • tabs: Additional views that can be displayed as tabs within the detail view.

On this page