implements pattern for adding additional cell components within List view

src/client/components/views/collections/List/Cell/Relationship/index.js

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import config from 'payload/config';
+
+const { collections } = config;
+
+const RelationshipCell = (props) => {
+  const { field, cellData } = props;
+  const { relationTo } = field;
+
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    const hasManyRelations = Array.isArray(relationTo);
+
+    if (cellData) {
+      if (Array.isArray(cellData)) {
+        setData(cellData.reduce((newData, value) => {
+          const relation = hasManyRelations ? value?.relationTo : relationTo;
+          const doc = hasManyRelations ? value.value : value;
+
+          const collection = collections.find((coll) => coll.slug === relation);
+
+          if (collection) {
+            const useAsTitle = collection.admin.useAsTitle ? collection.admin.useAsTitle : 'id';
+
+            return `${newData}, ${doc[useAsTitle]}`;
+          }
+
+          return newData;
+        }, ''));
+      } else {
+        const relation = hasManyRelations ? cellData?.relationTo : relationTo;
+        const doc = hasManyRelations ? cellData.value : cellData;
+        const collection = collections.find((coll) => coll.slug === relation);
+
+        if (collection) {
+          const useAsTitle = collection.admin.useAsTitle ? collection.admin.useAsTitle : 'id';
+
+          setData(doc[useAsTitle]);
+        }
+      }
+    }
+  }, [cellData, relationTo, field]);
+
+  return (
+    <React.Fragment>
+      {data}
+    </React.Fragment>
+  );
+};
+
+RelationshipCell.defaultProps = {
+  cellData: undefined,
+};
+
+RelationshipCell.propTypes = {
+  cellData: PropTypes.oneOfType([
+    PropTypes.shape({}),
+    PropTypes.array,
+  ]),
+  field: PropTypes.shape({
+    relationTo: PropTypes.oneOfType([
+      PropTypes.arrayOf(
+        PropTypes.string,
+      ),
+      PropTypes.string,
+    ]),
+  }).isRequired,
+};
+
+export default RelationshipCell;

src/client/components/views/collections/List/Cell/index.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import format from 'date-fns/format';
 import config from 'payload/config';
-import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
-import Thumbnail from '../../../elements/Thumbnail';
+import RenderCustomComponent from '../../../../utilities/RenderCustomComponent';
+import Thumbnail from '../../../../elements/Thumbnail';
+import Relationship from './Relationship';
 
 const { routes: { admin } } = config;
 
@@ -50,6 +51,17 @@ const DefaultCell = (props) => {
     );
   }
 
+  if (field.type === 'relationship') {
+    return (
+      <WrapElement {...wrapElementProps}>
+        <Relationship
+          field={field}
+          cellData={cellData}
+        />
+      </WrapElement>
+    );
+  }
+
   if (field.type === 'date' && cellData) {
     return (
       <WrapElement {...wrapElementProps}>
@@ -65,6 +77,7 @@ const DefaultCell = (props) => {
       {field.type !== 'date' && (
         <React.Fragment>
           {typeof cellData === 'string' && cellData}
+          {typeof cellData === 'number' && cellData}
           {typeof cellData === 'object' && JSON.stringify(cellData)}
         </React.Fragment>
       )}

src/client/components/views/collections/List/Default.js

@@ -48,7 +48,7 @@ const DefaultList = (props) => {
 
   useEffect(() => {
     const params = {
-      depth: 0,
+      depth: 2,
     };
 
     if (page) params.page = page;