melony.dev

DetailView

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

Example:

export const projectDetailedView = defineView(
  "detail", // Type
  {
    // Config
    title: "Project Details",
    fields: {
      title: { label: "Title" },
      amount: { label: "Amount", type: "number" },
      // ... 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,
              },
            ],
          };
        },
      },
    ],
  },
  getOneProjectAction // Action
);

DetailView Key Properties:

  • 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