fix(ui): refreshes column state during hmr and respects admin.disableListColumn despite preferences

packages/next/src/views/List/index.tsx

@@ -171,13 +171,13 @@ export const renderListView = async (
     const clientCollectionConfig = clientConfig.collections.find((c) => c.slug === collectionSlug)
 
     const { columnState, Table } = renderTable({
-      collectionConfig: clientCollectionConfig,
+      clientCollectionConfig,
+      collectionConfig,
       columnPreferences: listPreferences?.columns,
       customCellProps,
       docs: data.docs,
       drawerSlug,
       enableRowSelections,
-      fields,
       i18n: req.i18n,
       payload,
       useAsTitle,

packages/payload/src/exports/shared.ts

@@ -57,6 +57,8 @@ export {
 } from '../utilities/deepMerge.js'
 
 export { fieldSchemaToJSON } from '../utilities/fieldSchemaToJSON.js'
+export { flattenAllFields } from '../utilities/flattenAllFields.js'
+export { default as flattenTopLevelFields } from '../utilities/flattenTopLevelFields.js'
 
 export { getDataByPath } from '../utilities/getDataByPath.js'
 export { getSelectMode } from '../utilities/getSelectMode.js'

packages/payload/src/utilities/flattenTopLevelFields.ts

@@ -33,18 +33,14 @@ function flattenFields<TField extends ClientField | Field>(
   fields: TField[],
   keepPresentationalFields?: boolean,
 ): FlattenedField<TField>[] {
-  return fields.reduce<FlattenedField<TField>[]>((fieldsToUse, field) => {
+  return fields.reduce<FlattenedField<TField>[]>((acc, field) => {
     if (fieldAffectsData(field) || (keepPresentationalFields && fieldIsPresentationalOnly(field))) {
-      return [...fieldsToUse, field as FlattenedField<TField>]
-    }
-
-    if (fieldHasSubFields(field)) {
-      return [...fieldsToUse, ...flattenFields(field.fields as TField[], keepPresentationalFields)]
-    }
-
-    if (field.type === 'tabs' && 'tabs' in field) {
+      acc.push(field as FlattenedField<TField>)
+    } else if (fieldHasSubFields(field)) {
+      acc.push(...flattenFields(field.fields as TField[], keepPresentationalFields))
+    } else if (field.type === 'tabs' && 'tabs' in field) {
       return [
-        ...fieldsToUse,
+        ...acc,
         ...field.tabs.reduce<FlattenedField<TField>[]>((tabFields, tab: TabType<TField>) => {
           if (tabHasName(tab)) {
             return [...tabFields, { ...tab, type: 'tab' } as unknown as FlattenedField<TField>]
@@ -58,7 +54,7 @@ function flattenFields<TField extends ClientField | Field>(
       ]
     }
 
-    return fieldsToUse
+    return acc
   }, [])
 }
 

packages/ui/src/elements/ListControls/getTextFieldsToBeSearched.ts

@@ -1,16 +1,15 @@
 'use client'
 import type { ClientField } from 'payload'
 
-import { fieldAffectsData } from 'payload/shared'
-
-import { flattenFieldMap } from '../../utilities/flattenFieldMap.js'
+import { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'
 
 export const getTextFieldsToBeSearched = (
   listSearchableFields: string[],
   fields: ClientField[],
 ): ClientField[] => {
   if (listSearchableFields) {
-    const flattenedFields = flattenFieldMap(fields)
+    const flattenedFields = flattenTopLevelFields(fields) as ClientField[]
+
     return flattenedFields.filter(
       (field) => fieldAffectsData(field) && listSearchableFields.includes(field.name),
     )

packages/ui/src/elements/TableColumns/buildColumnState.tsx

@@ -1,6 +1,7 @@
 import type { I18nClient } from '@payloadcms/translations'
 import type {
   ClientCollectionConfig,
+  ClientField,
   DefaultCellComponentProps,
   DefaultServerCellComponentProps,
   Field,
@@ -16,6 +17,7 @@ import {
   fieldIsHiddenOrDisabled,
   fieldIsID,
   fieldIsPresentationalOnly,
+  flattenTopLevelFields,
 } from 'payload/shared'
 import React from 'react'
 
@@ -31,19 +33,19 @@ import {
   SortColumn,
   // eslint-disable-next-line payload/no-imports-from-exports-dir
 } from '../../exports/client/index.js'
-import { flattenFieldMap } from '../../utilities/flattenFieldMap.js'
 import { RenderServerComponent } from '../RenderServerComponent/index.js'
+import { filterFields } from './filterFields.js'
 
 type Args = {
   beforeRows?: Column[]
-  collectionConfig: ClientCollectionConfig
+  clientCollectionConfig: ClientCollectionConfig
+  collectionConfig: SanitizedCollectionConfig
   columnPreferences: ColumnPreferences
   columns?: ColumnPreferences
   customCellProps: DefaultCellComponentProps['customCellProps']
   docs: PaginatedDocs['docs']
   enableRowSelections: boolean
   enableRowTypes?: boolean
-  fields: Field[]
   i18n: I18nClient
   payload: Payload
   sortColumnProps?: Partial<SortColumnProps>
@@ -53,24 +55,29 @@ type Args = {
 export const buildColumnState = (args: Args): Column[] => {
   const {
     beforeRows,
+    clientCollectionConfig,
     collectionConfig,
     columnPreferences,
     columns,
     customCellProps,
     docs,
     enableRowSelections,
-    fields,
     i18n,
     payload,
     sortColumnProps,
     useAsTitle,
   } = args
 
-  const clientFields = collectionConfig.fields
-
   // clientFields contains the fake `id` column
-  let sortedFieldMap = flattenFieldMap(clientFields)
-  let _sortedFieldMap = flattenFieldMap(fields) // TODO: think of a way to avoid this additional flatten
+  let sortedFieldMap = flattenTopLevelFields(
+    filterFields(clientCollectionConfig.fields),
+    true,
+  ) as ClientField[]
+
+  let _sortedFieldMap = flattenTopLevelFields(
+    filterFields(collectionConfig.fields),
+    true,
+  ) as Field[] // TODO: think of a way to avoid this additional flatten
 
   // place the `ID` field first, if it exists
   // do the same for the `useAsTitle` field with precedence over the `ID` field
@@ -180,7 +187,7 @@ export const buildColumnState = (args: Args): Column[] => {
 
     const baseCellClientProps: DefaultCellComponentProps = {
       cellData: undefined,
-      collectionConfig: deepCopyObjectSimple(collectionConfig),
+      collectionConfig: deepCopyObjectSimple(clientCollectionConfig),
       customCellProps,
       field,
       rowData: undefined,

packages/ui/src/elements/TableColumns/filterFields.tsx

@@ -1,17 +1,22 @@
 import type { ClientField, Field } from 'payload'
 
-// 1. Skips fields that are hidden, disabled, or presentational-only (i.e. `ui` fields)
-// 2. Maps through top-level `tabs` fields and filters out the same
+import { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared'
+
+/**
+ * Filters fields that are hidden, disabled, or have `disableListColumn` set to `true`
+ * Does so recursively for `tabs` fields.
+ */
 export const filterFields = <T extends ClientField | Field>(incomingFields: T[]): T[] => {
   const shouldSkipField = (field: T): boolean =>
-    (field.type !== 'ui' && field.admin?.disabled === true) ||
+    (field.type !== 'ui' && fieldIsHiddenOrDisabled(field) && !fieldIsID(field)) ||
     field?.admin?.disableListColumn === true
 
-  const fields: T[] = incomingFields?.reduce((formatted, field) => {
+  const fields: T[] = incomingFields?.reduce((acc, field) => {
     if (shouldSkipField(field)) {
-      return formatted
+      return acc
     }
 
+    // extract top-level `tabs` fields and filter out the same
     const formattedField: T =
       field.type === 'tabs' && 'tabs' in field
         ? {
@@ -23,7 +28,9 @@ export const filterFields = <T extends ClientField | Field>(incomingFields: T[])
           }
         : field
 
-    return [...formatted, formattedField]
+    acc.push(formattedField)
+
+    return acc
   }, [])
 
   return fields

packages/ui/src/elements/TableColumns/getInitialColumns.ts

@@ -1,4 +1,4 @@
-import type { ClientField, Field } from 'payload'
+import type { ClientField, CollectionConfig, Field } from 'payload'
 
 import { fieldAffectsData } from 'payload/shared'
 
@@ -33,10 +33,15 @@ const getRemainingColumns = <T extends ClientField[] | Field[]>(
     return [...remaining, field.name]
   }, [])
 
+/**
+ * Returns the initial columns to display in the table based on the following criteria:
+ * 1. If `defaultColumns` is set in the collection config, use those columns
+ * 2. Otherwise take `useAtTitle, if set, and the next 3 fields that are not hidden or disabled
+ */
 export const getInitialColumns = <T extends ClientField[] | Field[]>(
   fields: T,
-  useAsTitle: string,
-  defaultColumns: string[],
+  useAsTitle: CollectionConfig['admin']['useAsTitle'],
+  defaultColumns: CollectionConfig['admin']['defaultColumns'],
 ): ColumnPreferences => {
   let initialColumns = []
 

packages/ui/src/elements/TableColumns/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { ClientCollectionConfig, SanitizedCollectionConfig } from 'payload'
 
-import React, { createContext, useCallback, useContext } from 'react'
+import React, { createContext, useCallback, useContext, useEffect } from 'react'
 
 import type { ColumnPreferences } from '../../providers/ListQuery/index.js'
 import type { SortColumnProps } from '../SortColumn/index.js'
@@ -204,6 +204,7 @@ export const TableColumnsProvider: React.FC<Props> = ({
 
           return indexOfFirst > indexOfSecond ? 1 : -1
         })
+
       const { state: columnState, Table } = await getTableState({
         collectionSlug,
         columns: activeColumns,
@@ -275,7 +276,11 @@ export const TableColumnsProvider: React.FC<Props> = ({
     sortColumnProps,
   ])
 
-  React.useEffect(() => {
+  useEffect(() => {
+    setTableColumns(columnState)
+  }, [columnState])
+
+  useEffect(() => {
     return () => {
       abortAndIgnore(tableStateControllerRef.current)
     }

packages/ui/src/hooks/useUseAsTitle.ts

@@ -1,14 +1,15 @@
 'use client'
 import type { ClientCollectionConfig, ClientField } from 'payload'
 
-import { flattenFieldMap } from '../utilities/flattenFieldMap.js'
+import { flattenTopLevelFields } from 'payload/shared'
 
 export const useUseTitleField = (collection: ClientCollectionConfig): ClientField => {
   const {
     admin: { useAsTitle },
     fields,
   } = collection
 
-  const topLevelFields = flattenFieldMap(fields)
+  const topLevelFields = flattenTopLevelFields(fields) as ClientField[]
+
   return topLevelFields?.find((field) => 'name' in field && field.name === useAsTitle)
 }

packages/ui/src/utilities/buildTableState.ts

@@ -198,8 +198,6 @@ export const buildTableState = async (
     }
   }
 
-  const fields = collectionConfig.fields
-
   let docs = docsFromArgs
   let data: PaginatedDocs
 
@@ -219,20 +217,20 @@ export const buildTableState = async (
   }
 
   const { columnState, Table } = renderTable({
-    collectionConfig: clientCollectionConfig,
+    clientCollectionConfig,
+    collectionConfig,
     columnPreferences: undefined, // TODO, might not be needed
     columns,
     docs,
     enableRowSelections,
-    fields,
     i18n: req.i18n,
     payload,
     renderRowTypes,
     tableAppearance,
     useAsTitle: collectionConfig.admin.useAsTitle,
   })
 
-  const renderedFilters = renderFilters(fields, req.payload.importMap)
+  const renderedFilters = renderFilters(collectionConfig.fields, req.payload.importMap)
 
   return {
     data,