diff --git a/docs/configuration/collections.mdx b/docs/configuration/collections.mdx
index 2a64d9c8b..7020d99ea 100644
--- a/docs/configuration/collections.mdx
+++ b/docs/configuration/collections.mdx
@@ -69,6 +69,7 @@ You can customize the way that the Admin panel behaves on a collection-by-collec
| `enableRichTextRelationship` | The [Rich Text](/docs/fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
| `preview` | Function to generate preview URLS within the Admin panel that can point to your app. [More](#preview). |
| `components` | Swap in your own React components to be used within this collection. [More](/docs/admin/components#collections) |
+| `listSearchableFields ` | Specify which fields should be searched in the List search view. [More](/docs/configuration/collections#list-searchable-fields) |
### Preview
@@ -119,6 +120,17 @@ Hooks are a powerful way to extend collection functionality and execute your own
Collections support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/overview) to learn more about field types.
+#### List Searchable Fields
+
+In the List view, there is a "search" box that allows you to quickly find a document with a search. By default, it searches on the ID field. If you have `admin.useAsTitle` defined, the list search will use that field. However, you can define more than one field to search to make it easier on your admin editors to find the data they need.
+
+For example, let's say you have a Posts collection with `title`, `metaDescription`, and `tags` fields - and you want all three of those fields to be searchable in the List view. You can simply add `admin.listSearchableFields: ['title', 'metaDescription', 'tags']` - and the admin UI will automatically search on those three fields plus the ID field.
+
+
+ Note:
+ If you are adding listSearchableFields, make sure you index each of these fields so your admin queries can remain performant.
+
+
### TypeScript
You can import collection types as follows:
diff --git a/src/admin/components/elements/ListControls/index.tsx b/src/admin/components/elements/ListControls/index.tsx
index 35842b133..6448e641c 100644
--- a/src/admin/components/elements/ListControls/index.tsx
+++ b/src/admin/components/elements/ListControls/index.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import AnimateHeight from 'react-animate-height';
-import { fieldAffectsData } from '../../../../fields/config/types';
+import { FieldAffectingData, fieldAffectsData } from '../../../../fields/config/types';
import SearchFilter from '../SearchFilter';
import ColumnSelector from '../ColumnSelector';
import WhereBuilder from '../WhereBuilder';
@@ -29,6 +29,7 @@ const ListControls: React.FC = (props) => {
fields,
admin: {
useAsTitle,
+ listSearchableFields,
},
},
} = props;
@@ -37,6 +38,7 @@ const ListControls: React.FC = (props) => {
const shouldInitializeWhereOpened = validateWhereQuery(params?.where);
const [titleField] = useState(() => fields.find((field) => fieldAffectsData(field) && field.name === useAsTitle));
+ const [textFieldsToBeSearched] = useState(listSearchableFields ? () => fields.filter((field) => fieldAffectsData(field) && listSearchableFields.includes(field.name)) as FieldAffectingData[] : null);
const [visibleDrawer, setVisibleDrawer] = useState<'where' | 'sort' | 'columns'>(shouldInitializeWhereOpened ? 'where' : undefined);
return (
@@ -47,6 +49,7 @@ const ListControls: React.FC = (props) => {
handleChange={handleWhereChange}
modifySearchQuery={modifySearchQuery}
fieldLabel={titleField && titleField.label ? titleField.label : undefined}
+ listSearchableFields={textFieldsToBeSearched}
/>