melony.dev

listView

listView is used to display collections of data in a tabular format. It's ideal for presenting lists of items with sorting, filtering, and pagination capabilities.

Example:

export const projectsListView = listView({
  action: listProjectsAction,
  title: "Projects",
  fields: {
    title: textField(),
    statusId: relationshipField({
      label: "Status",
      type: "relationship",
      getSuggestions: getProjectStatusSuggestionsAction,
      valueAsNumber: true,
      displayField: "status",
      filterable: true,
      sortable: true,
    }),
    // ... other fields ...
  },
  headerButtons: [{ label: "Create Project", viewId: "projectCreateView" }],
  itemButtons: [{ label: "Edit", viewId: "projectEditView" }],
  onItemClick: { viewId: "projectDetailedView" },
  showInNavigation: true,
});

ListView Key Properties:

  • action: Server action or endpoint string.
  • title: The title of the view.
  • fields: Defines the columns to be displayed, including their labels and properties.
  • headerButtons: Buttons displayed at the top of the list.
  • itemButtons: Buttons displayed for each item in the list.
  • onItemClick: Defines the action when an item is clicked.
  • showInNavigation: Whether to show this view in the main navigation.

On this page