Files
payloadcms/test/joins/collections/Categories.ts
Said Akhrarov cd546b3125 feat(ui): add support for disabling join field row types (#12738)
### What?
This PR adds a new `admin.disableRowTypes` config to `'join'` fields
which hides the `"Type"` column from the relationship table.

### Why?
While the collection type column _can be_ helpful for providing
information, it's not always necessary and can sometimes be redundant
when the field only has a singular relationTo. Hiding it can be helpful
by removing visual noise and providing editors the data directly.

### How?
By threading `admin.disableRowTypes` directly to the `getTableState`
function of the `RelationshipTable` component.

**With row types** (via `admin.disableRowTypes: false | undefined` OR
default for polymorphic):

![image](https://github.com/user-attachments/assets/22b55477-cf56-4b0e-a845-e6f2b39efe3b)

**Without row types** (default for monomorphic):

![image](https://github.com/user-attachments/assets/3a2bb0ba-2d5e-4299-8689-249b2d3fefe2)
2025-10-03 11:10:10 +01:00

233 lines
5.1 KiB
TypeScript

import type { CollectionConfig } from 'payload'
import { ValidationError } from 'payload'
import { categoriesSlug, hiddenPostsSlug, postsSlug } from '../shared.js'
import { singularSlug } from './Singular.js'
import { versionsSlug } from './Versions.js'
export const Categories: CollectionConfig = {
slug: categoriesSlug,
admin: {
useAsTitle: 'name',
},
fields: [
{
name: 'name',
type: 'text',
},
// Alternative tabs usage
// {
// type: 'tabs',
// tabs: [
// {
// label: 'Unnamed tab',
// fields: [
// {
// name: 'relatedPosts',
// label: 'Related Posts',
// type: 'join',
// collection: postsSlug,
// on: 'category',
// },
// ],
// },
// {
// name: 'group',
// fields: [
// {
// name: 'relatedPosts',
// label: 'Related Posts (Group)',
// type: 'join',
// collection: postsSlug,
// on: 'group.category',
// },
// ],
// },
// ],
// },
{
name: 'relatedPosts',
label: 'Related Posts',
type: 'join',
admin: {
components: {
afterInput: ['/components/AfterInput.js#AfterInput'],
beforeInput: ['/components/BeforeInput.js#BeforeInput'],
Description: '/components/CustomDescription/index.js#FieldDescriptionComponent',
},
disableRowTypes: false,
},
collection: postsSlug,
defaultSort: '-title',
defaultLimit: 5,
on: 'category',
maxDepth: 1,
},
{
name: 'noRowTypes',
type: 'join',
collection: postsSlug,
defaultLimit: 5,
on: 'category',
maxDepth: 1,
},
{
name: 'hasManyPosts',
type: 'join',
collection: postsSlug,
admin: {
description: 'Static Description',
},
on: 'categories',
},
{
name: 'hasManyPostsLocalized',
type: 'join',
collection: postsSlug,
on: 'categoriesLocalized',
},
{
name: 'hiddenPosts',
type: 'join',
collection: hiddenPostsSlug,
on: 'category',
},
{
name: 'group',
type: 'group',
fields: [
{
name: 'relatedPosts',
label: 'Related Posts (Group)',
type: 'join',
collection: postsSlug,
on: 'group.category',
admin: {
defaultColumns: ['id', 'createdAt', 'title'],
disableRowTypes: false,
},
},
{
name: 'camelCasePosts',
type: 'join',
collection: postsSlug,
on: 'group.camelCaseCategory',
},
],
},
{
name: 'arrayPosts',
type: 'join',
collection: 'posts',
on: 'array.category',
},
{
name: 'arrayHasManyPosts',
type: 'join',
collection: 'posts',
on: 'arrayHasMany.category',
},
{
name: 'localizedArrayPosts',
type: 'join',
collection: 'posts',
on: 'localizedArray.category',
},
{
name: 'blocksPosts',
type: 'join',
collection: 'posts',
on: 'blocks.category',
},
{
name: 'polymorphicJoin',
type: 'join',
collection: [postsSlug, versionsSlug],
on: 'category',
},
{
name: 'polymorphicJoinNoRowTypes',
type: 'join',
collection: [postsSlug, versionsSlug],
on: 'category',
admin: {
disableRowTypes: true,
},
},
{
name: 'polymorphic',
type: 'join',
collection: postsSlug,
on: 'polymorphic',
},
{
name: 'polymorphics',
type: 'join',
collection: postsSlug,
on: 'polymorphics',
},
{
name: 'localizedPolymorphic',
type: 'join',
collection: postsSlug,
on: 'localizedPolymorphic',
},
{
name: 'localizedPolymorphics',
type: 'join',
collection: postsSlug,
on: 'localizedPolymorphics',
},
{
name: 'singulars',
type: 'join',
collection: singularSlug,
on: 'category',
},
{
name: 'filtered',
type: 'join',
collection: postsSlug,
on: 'category',
where: {
isFiltered: { not_equals: true },
},
},
{
name: 'inTab',
type: 'join',
collection: postsSlug,
on: 'tab.category',
},
{
name: 'joinWithError',
type: 'join',
collection: postsSlug,
on: 'category',
hooks: {
beforeValidate: [
({ data }) => {
if (data?.enableErrorOnJoin) {
throw new ValidationError({
collection: 'categories',
errors: [
{
message: 'enableErrorOnJoin is true',
path: 'joinWithError',
},
],
})
}
},
],
},
},
{
name: 'enableErrorOnJoin',
type: 'checkbox',
defaultValue: false,
},
],
}