In admin dashboard, how to make it "search by name" instead of "search by id"?

[deltavin]

In the dashboard, there is an option to search by id. How can I change it to search by another field, say "name"? I see this happening in the live payload demo at https://demo.payloadcms.com/ (screenshot attached).

Is it a configuration setting or is it a custom component for the dashboard?

Also, where can I find the source code for the demo?

Thanks

[denolfe]

Hey @deltavin, great question. The demo is using the useAsTitle under collection admin options. Documentation on that can be found here. The demo uses the defaultColumns configuration as well. Here is the admin section of the Posts collection in the demo:

  admin: {
    defaultColumns: ['title', 'author', 'category', 'tags', 'status'],
    useAsTitle: 'title',
  },

I hope that helps. Let me know if you need any additional clarification. We intend to make the demo's source code public in the near future 👍

[deltavin]

Hey denolfe,
Thanks for responding.

That's exactly what I have in my config, but it didn't work.

This is my "people" collection:

import { CollectionConfig } from "payload/dist/collections/config/types";
import Basics from "../customFields/Basics";

const People: CollectionConfig = {
  slug: "people",
  labels: {
    singular: "Person",
    plural: "People",
  },
  admin: {
    defaultColumns: ["name", "slug", "workTitle"],
    useAsTitle: "name",
  },
  fields: [
    {
      type: "row",
      label: "Basics",
      fields: Basics,
    },
    {
      name: "workTitle",
      label: "Work title",
      type: "text",
    }
  ],
};

export default People;

And, this is what it looks like in the admin dashboard.

Could it be because the fields "name" and "slug" are a part of a custom field group called "Basics"?

This is my "Basics" const:

import { Field } from "payload/dist/collections/config/types";
import { Slug } from "./Slug";

const Basics: Field[] = [
  {
    name: "name",
    label: "Name",
    type: "text",
    required: true,
    admin: {
      width: "50%",
    },
  },
  {
    name: "slug",
    label: "Slug",
    type: "text",
    required: true,
    index: true,
    unique: true,
    admin: {
      width: "50%",
      components: {
        Field: Slug,
      },
    },
  },
  {
    name: "intro",
    label: "Intro",
    type: "text",
    admin: {
      width: "100%",
    },
  }
];

export default Basics;

[jmikrut]

Hey @deltavin — yes, this is exactly why this is happening. It's because your Basics fields are within a row. We should be able to update this so that you can use fields within rows as your useAsTitle.

Give us a bit here and we'll see what we can do!