Hello Plasmic Team and Community,
I’m in the process of building a highly versatile, custom table component for my project by wrapping Ant Design’s ProTable. My goal is to create a component that is as powerful and easy to use in the Studio as the built-in plasmic-rich-components/RichTable.
I’ve successfully registered most of the props, but I’ve hit a roadblock trying to replicate the “Custom Value” (expr) functionality for columns.
What I’m Trying to Achieve:
I want to provide my users with a “Custom Value” code field in the column settings where they can write simple JavaScript expressions to format cell data, just like in the RichTable. I want them to have access to two key variables:
currentItem: The data object for the entire row.currentValue: The specific value for that cell (based on thedataIndex).
My Analysis So Far:
By inspecting the auto-generated code from Plasmic for a page using RichTable, I can see that the expr prop is passed to the component as a compiled function, not a string:
// From a generated Plasmic file
fields: (() => {
const __composite = [
{ key: "name", fieldId: "name", expr: null },
];
__composite["1"]["expr"] = (currentItem, currentValue) => {
return "Prefix: " + currentValue;
};
return __composite;
})(),
The RichTable component then receives and executes this function at render time.
The Challenge:
When I register my own component, the closest prop type seems to be type: 'render' or type: 'code'.
- Using
type: 'render'seems to expect a slot that returns JSX, not a function that returns a value. - Using
type: 'code'passes the expression as a string to my component.
My Questions:
- Is there an officially supported way to register a prop on a custom code component that receives a raw function from the Studio’s expression editor, just like the built-in
RichTabledoes? - Is the ability to pass
(currentItem, currentValue)as function arguments a privileged feature of the built-inplasmic-rich-components, or is there a part of theregisterComponentAPI I’m missing?
Any guidance or examples would be greatly appreciated. We are trying to build a powerful and reusable component library, and getting this pattern right is key to its success.
Thank you