Custom List Rendering

If list is true the default label is often not very useful to editors.

list UI

The label used for list items can be customized using the itemProps function. The main use-case for this is to provide a custom label based on the data in the component.

For example, to use the title field as the label for this image gallery collection:

// ...Other fields
{
  label: "Image Gallery",
  name: "gallery",
  type: "object",
  list: true,
  ui: {
    itemProps: (item) => {
      // Field values are accessed by item?.<Field name>
      return { label: item?.title };
    },
  },
  fields: [
    {
      label: "Title",
      name: "title",
      type: "string",
    },
    { label: "Image", name: "image", type: "image" },
    {
      label: "Size",
      name: "size",
      type: "string",
      options: ["sm", "med", "lg", "xl"],
    },
  ],
};

which will render as: List UI with label prop

Although providing a custom label is the most common use-case of itemProps, the className and style props can also be returned to allow custom styling of the list component.

For example:

// ...Other fields
{
  label: "Image Gallery",
  name: "gallery",
  type: "object",
  list: true,
  ui: {
    itemProps: (item) => {
      if (item?.title === "Dog") {
        return { label: item?.title, style: { backgroundColor: "blue" } };
      }
      // Field values are accessed by item?.<Field name>
      return { label: item?.title };
    },
  },
  fields: [
    {
      label: "Title",
      name: "title",
      type: "string",
    },
    { label: "Image", name: "image", type: "image" },
    {
      label: "Size",
      name: "size",
      type: "string",
      options: ["sm", "med", "lg", "xl"],
    },
  ],
}

which will render as: List UI with label and style prop

Video Tutorial

For those who prefer to learn from video, you can check out a snippet on "Customizing List Items" from our "TinaCMS Deep Dive" series.

Docs

Learn

Video Tutorial

React Components

Format and parse input