feat(plugin-import-export): preview displays CSV and JSON data accurately (#12948)

### What
This PR updates the import-export plugin's `<Preview />` component to
render table columns and rows using the same logic as the CSV export.
Key changes:
- Adds a new `/api/preview-data` custom REST endpoint that:
- Accepts filters (`fields`, `where`, `sort`, `draft`, `limit`)
- Uses `getCustomFieldFunctions` and `flattenObject` to transform
documents
- Returns deeply flattened rows identical to the CSV export
- Refactors the <Preview /> component to:
- POST preview config to the new endpoint instead of querying the
collection directly
- Match column ordering and flattening logic with the `createExport`
function
- Ensures consistency across CSV downloads and in-admin previews
-Adds JSON preview
This ensures preview results now exactly match exported CSV content,
including support for custom field transformers and polymorphic fields.
---------
Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>

Author: PatrikKozak

packages/plugin-import-export/src/components/Preview/index.tsx

@@ -1,20 +1,25 @@
 'use client'
 importtype{Column}from'@payloadcms/ui'
-importtype{ClientField,FieldAffectingDataClient}from'payload'
+importtype{ClientField}from'payload'
 
 import{getTranslation}from'@payloadcms/translations'
-import{Table,Translation,useConfig,useField,useTranslation}from'@payloadcms/ui'
-import{fieldAffectsData}from'payload/shared'
-import*asqsfrom'qs-esm'
+import{
+CodeEditorLazy,
+Table,
+Translation,
+useConfig,
+useField,
+useTranslation,
+}from'@payloadcms/ui'
 importReactfrom'react'
 
 importtype{
 PluginImportExportTranslationKeys,
 PluginImportExportTranslations,
 }from'../../translations/index.js'
 
-import'./index.scss'
 import{useImportExport}from'../ImportExportProvider/index.js'
+import'./index.scss'
 
 constbaseClass='preview'
 
@@ -25,7 +30,9 @@ export const Preview = () => {
 const{value: limit}=useField<number>({path: 'limit'})
 const{value: fields}=useField<string[]>({path: 'fields'})
 const{value: sort}=useField({path: 'sort'})
-const{value: draft}=useField({path: 'draft'})
+const{value: draft}=useField({path: 'drafts'})
+const{value: locale}=useField({path: 'locale'})
+const{value: format}=useField({path: 'format'})
 const[dataToRender,setDataToRender]=React.useState<any[]>([])
 const[resultCount,setResultCount]=React.useState<any>('')
 const[columns,setColumns]=React.useState<Column[]>([])
@@ -39,73 +46,99 @@ export const Preview = () => {
 (collection)=>collection.slug===collectionSlug,
 )
 
+constisCSV=format==='csv'
+
 React.useEffect(()=>{
 constfetchData=async()=>{
-if(!collectionSlug){
+if(!collectionSlug||!collectionConfig){
 return
 }
 
 try{
-constwhereQuery=qs.stringify(
-{
-depth: 0,
+constres=awaitfetch('/api/preview-data',{
+body: JSON.stringify({
+collectionSlug,
  draft,
-limit: limit>10 ? 10 : limit,
+ fields,
+ limit,
+ locale,
  sort,
  where,
-},
-{
-addQueryPrefix: true,
-},
-)
-constresponse=awaitfetch(`/api/${collectionSlug}${whereQuery}`,{
-headers: {
-'Content-Type': 'application/json',
-},
-method: 'GET',
+}),
+credentials: 'include',
+headers: {'Content-Type': 'application/json'},
+method: 'POST',
+})
+
+if(!res.ok){
+return
+}
+
+const{ docs, totalDocs }=awaitres.json()
+
+setResultCount(limit&&limit<totalDocs ? limit : totalDocs)
+
+constallKeys=Object.keys(docs[0]||{})
+constdefaultMetaFields=['createdAt','updatedAt','_status','id']
+
+// Match CSV column ordering by building keys based on fields and regex
+constfieldToRegex=(field: string): RegExp=>{
+constparts=field.split('.').map((part)=>`${part}(?:_\\d+)?`)
+returnnewRegExp(`^${parts.join('_')}`)
+}
+
+// Construct final list of field keys to match field order + meta order
+constselectedKeys=
+Array.isArray(fields)&&fields.length>0
+ ? fields.flatMap((field)=>{
+constregex=fieldToRegex(field)
+returnallKeys.filter((key)=>regex.test(key))
+})
+ : allKeys.filter((key)=>!defaultMetaFields.includes(key))
+
+constincludedMeta=newSet(selectedKeys)
+constmissingMetaFields=defaultMetaFields.flatMap((field)=>{
+constregex=fieldToRegex(field)
+returnallKeys.filter((key)=>regex.test(key)&&!includedMeta.has(key))
 })
 
-if(response.ok){
-constdata=awaitresponse.json()
-setResultCount(limit&&limit<data.totalDocs ? limit : data.totalDocs)
-// TODO: check if this data is in the correct format for the table
+constfieldKeys=[...selectedKeys, ...missingMetaFields]
+
+// Build columns based on flattened keys
+constnewColumns: Column[]=fieldKeys.map((key)=>({
+accessor: key,
+active: true,
+field: {name: key}asClientField,
+Heading: getTranslation(key,i18n),
+renderedCells: docs.map((doc: Record<string,unknown>)=>{
+constval=doc[key]
+
+if(val===undefined||val===null){
+returnnull
+}
 
-constfilteredFields=(collectionConfig?.fields?.filter((field)=>{
-if(!fieldAffectsData(field)){
-returnfalse
+// Avoid ESLint warning by type-checking before calling String()
+if(typeofval==='string'||typeofval==='number'||typeofval==='boolean'){
+returnString(val)
 }
-if(fields?.length>0){
-returnfields.includes(field.name)
+
+if(Array.isArray(val)){
+returnval.map(String).join(', ')
 }
-returntrue
-})??[])asFieldAffectingDataClient[]
-
-setColumns(
-filteredFields.map((field)=>({
-accessor: field.name||'',
-active: true,
-field: fieldasClientField,
-Heading: getTranslation(field?.label||(field.nameasstring),i18n),
-renderedCells: data.docs.map((doc: Record<string,unknown>)=>{
-if(!field.name||!doc[field.name]){
-returnnull
-}
-if(typeofdoc[field.name]==='object'){
-returnJSON.stringify(doc[field.name])
-}
-returnString(doc[field.name])
-}),
-}))asColumn[],
-)
-setDataToRender(data.docs)
-}
+
+returnJSON.stringify(val)
+}),
+}))
+
+setColumns(newColumns)
+setDataToRender(docs)
 }catch(error){
-console.error('Error fetching data:',error)
+console.error('Error fetching preview data:',error)
 }
 }
 
 voidfetchData()
-},[collectionConfig?.fields,collectionSlug,draft,fields,limit,sort,where])
+},[collectionConfig,collectionSlug,draft,fields,i18n,limit,locale,sort,where])
 
 return(
 <divclassName={baseClass}>
@@ -125,7 +158,12 @@ export const Preview = () => {
 />
 )}
 </div>
-{dataToRender&&<Tablecolumns={columns}data={dataToRender}/>}
+{dataToRender&&
+(isCSV ? (
+<Tablecolumns={columns}data={dataToRender}/>
+) : (
+<CodeEditorLazylanguage="json"readOnlyvalue={JSON.stringify(dataToRender,null,2)}/>
+))}
 </div>
 )
 }

packages/plugin-import-export/src/index.ts

@@ -1,11 +1,14 @@
-importtype{Config}from'payload'
+importtype{Config,FlattenedField}from'payload'
 
-import{deepMergeSimple}from'payload'
+import{addDataAndFileToRequest,deepMergeSimple}from'payload'
 
 importtype{PluginDefaultTranslationsObject}from'./translations/types.js'
 importtype{ImportExportPluginConfig,ToCSVFunction}from'./types.js'
 
+import{flattenObject}from'./export/flattenObject.js'
 import{getCreateCollectionExportTask}from'./export/getCreateExportCollectionTask.js'
+import{getCustomFieldFunctions}from'./export/getCustomFieldFunctions.js'
+import{getSelect}from'./export/getSelect.js'
 import{getExportCollection}from'./getExportCollection.js'
 import{translations}from'./translations/index.js'
 
@@ -63,6 +66,69 @@ export const importExportPlugin =
 
 // config.i18n.translations = deepMergeSimple(translations, config.i18n?.translations ?? {})
 
+// Inject custom REST endpoints into the config
+config.endpoints=config.endpoints||[]
+config.endpoints.push({
+handler: async(req)=>{
+awaitaddDataAndFileToRequest(req)
+
+const{ collectionSlug, draft, fields, limit, locale, sort, where }=req.dataas{
+collectionSlug: string
+draft?: 'no'|'yes'
+fields?: string[]
+limit?: number
+locale?: string
+sort?: any
+where?: any
+}
+
+constcollection=req.payload.collections[collectionSlug]
+if(!collection){
+returnResponse.json(
+{error: `Collection with slug ${collectionSlug} not found`},
+{status: 400},
+)
+}
+
+constselect=Array.isArray(fields)&&fields.length>0 ? getSelect(fields) : undefined
+
+constresult=awaitreq.payload.find({
+collection: collectionSlug,
+depth: 1,
+draft: draft==='yes',
+limit: limit&&limit>10 ? 10 : limit,
+ locale,
+overrideAccess: false,
+ req,
+ select,
+ sort,
+ where,
+})
+
+constdocs=result.docs
+
+consttoCSVFunctions=getCustomFieldFunctions({
+fields: collection.config.fieldsasFlattenedField[],
+ select,
+})
+
+consttransformed=docs.map((doc)=>
+flattenObject({
+ doc,
+ fields,
+ toCSVFunctions,
+}),
+)
+
+returnResponse.json({
+docs: transformed,
+totalDocs: result.totalDocs,
+})
+},
+method: 'post',
+path: '/preview-data',
+})
+
 /**
  * Merge plugin translations
  */