Custom join field or how to use RelationshipTable component

[HriBB]

I am trying to create a custom join field component.

import { JoinField } from 'payload'

export const locationSectorsField: JoinField = {
  name: 'sectors',
  type: 'join',
  collection: 'sectors',
  on: 'location',
  defaultSort: 'order',
  admin: {
    components: {
      Field: '@/collections/Locations/fields/LocationSectorsField',
    },
  },
}

Component RelationshipTable is not exported from @payloadcms/ui. If I import it from @payloadcms/ui/elements/RelationshipTable, I get this weird useConfig error

'use client'
import React, { useMemo } from 'react'
import type { JoinFieldClient, JoinFieldClientComponent, PaginatedDocs, Where } from 'payload'
import { fieldBaseClass, FieldLabel } from '@payloadcms/ui'
import { useFieldProps } from '@payloadcms/ui'
import { useField } from '@payloadcms/ui'
import { useDocumentInfo } from '@payloadcms/ui'
//import { RelationshipTable } from '@/components/RelationshipTable'
import { RelationshipTable } from '@payloadcms/ui/elements/RelationshipTable'
import { withCondition } from '@/components/withCondition'

const JoinFieldComponent: JoinFieldClientComponent = function JoinFieldComponent(props) {
  // ...
}

If I copy the entire RelationshipTable into the project and import from there, I don't get the error, but then the Columns logic does not work ...

import { RelationshipTable } from '@/components/RelationshipTable'

So the question is, how can we use RelationshipTable in our custom components?

[tyteen4a03]

If you need the component exported, you can open an issue.

[revnelson]

This is related to my issue here (3 weeks ago). In my response to another discussion thread about this, I also pointed out the need for exported Inputs for each field type, as well as associated helper functions.