"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Microsoft chose Payload to tell the world about AI.
How to pass a fields data into the custom cell component
Hi there, I'm struggling with the latest beta version
("v3.0.0-beta.123")of payload when trying to implement a
custom cell component, for my
collections Listview.I have red the docs
both beta and the latest Payload version,gone through
GitHub issues,asked *ChatGpt * and now read through the discord channel. I am at a loss.
'use client';
import classNames from 'classnames';
import {FC} from 'react';
export const StatusCell: FC = (props) => {
console.log(props);
return (
<div
className={classNames({
'status-label-pending': 'pending' === 'pending',
//the comparison is just a placeholder so I could test my component of even being rendered (it is being rendered)
'status-label-recorded': 'recorded' === 'recorded',
'status-label-action': 'actionRequired' === 'actionRequired',
})}></div>
);
};This is my custom cell component, when logging the props via console it displays
none of the actual propslisted in the docs of either beta & latest version of Payload. I do however get the correct field (
type select) that I have assigned the cell component to, but only it’s config, where I have no access to the actual value it saved.
When I however try to use the Server Version of the cell component I get a
whole lot more - still no value,but of course I cannot use helpful hooks to somehow get the value of my field differently as a workaround.
—
I have tried using useField, but here I am also at a loss because it does not work the way the beta docs describe and to use it the way the latest payload docs use it, I would also need the props in the non-beta version of a cell component to make it work.
__
I just need a somewhat correct docs, example or link to either, of a simple custom cell component able to display its corresponding fields data - using the beta version 3.0.0-beta.123.
Any information, help & support would be greatly appreciated!
🙏
Thank you for the quick message! Unfortunately that would not quite be what I'm searching for, since I am only trying to edit a single cell for a collections overview of entries - and by typing it to an actual Field i would not actually get a Cell component? (Do correct me if I understood incorrectly...)
Instead of typing your component with FC, you can use
TextFieldClientComponentexported from Payload and the props of your comp will populate automatically with a variable named
datathat had what you're looking for I believe. There's also other useful props passed to it by Payload:
https://payloadcms.com/docs/beta/admin/fields#default-props
Star
Discord
online
Get dedicated engineering support directly from the Payload team.