Custom Cell Component for PayloadCMS with nested-docs

CellComponent.tsx

import Link from 'next/link'
import { DefaultCellComponentProps } from 'payload'
import React from 'react'

export const CellComponent: React.FC<DefaultCellComponentProps> = ({
  rowData,
  cellData,
  collectionSlug,
  link,
}) => {
  const url = `http://${process.env.NEXT_PUBLIC_SITE_URL}/admin/collections/${collectionSlug}/${rowData.id}`

  const parentTitle = (rowData.breadcrumbs?.length > 1 && rowData.breadcrumbs[0].label) ?? null

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {rowData.parent && (
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
            <path d="M6 19V8.5h11.079l-3.792-3.786L14 4l5 5l-5.006 5.006l-.707-.714L17.079 9.5H7V19z" />
          </svg>
        </div>
      )}
      {link ? (
        <Link href={url}>
          {cellData} {parentTitle && <span style={{ opacity: 0.5 }}>({parentTitle})</span>}
        </Link>
      ) : (
        <span>{cellData}</span>
      )}
    </div>
  )
}

Pages.tsx

import type { CollectionConfig } from 'payload'

export const Pages: CollectionConfig = {
  slug: 'pages',
  fields: [
    {
      type: 'text',
      name: 'title',
      admin: {
        components: {
          Cell: '@/fields/title/CellComponent#CellComponent',
        },
      },
    },
    {
      type: 'text',
      name: 'slug',
    },
  ],
}

payload-config.ts

// storage-adapter-import-placeholder
import { sqliteAdapter } from '@payloadcms/db-sqlite'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'

import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'

import { Users } from './collections/Users'
import { Media } from './collections/Media'
import { Pages } from './collections/Pages'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
  },
  collections: [Users, Media, Pages],
  editor: lexicalEditor(),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: sqliteAdapter({
    client: {
      url: process.env.DATABASE_URI || '',
    },
  }),
  sharp,
  plugins: [
    nestedDocsPlugin({
      collections: ['pages'],
      generateLabel: (_, doc) => doc.title as string,
      generateURL: (docs) => docs.reduce((url, doc) => `${url}/${doc.slug}`, ''),
    }),
  ],
})