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 = defineView(
  "list", // Type
  {
    // Config
    title: "Projects",
    fields: {
      title: { label: "Title", filterable: true },
      statusId: {
        label: "Status",
        type: "relationship",
        getSuggestions: getProjectStatusSuggestions,
        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,
  },
  listProjectsAction // Action
);

ListView Key Properties:

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.

ListView

Example:

ListView Key Properties:

On this page