1. Custom Columns Prop (w/ Default Renderer & Dot Path Utility) #442

Activity

1. MitchellShiell commented on Apr 7, 2026

   

   MitchellShiell

   on Apr 7, 2026

   ContributorAuthor

   More actions

   Jons Comments

   Transferring comments here (ticket would not transfer easily from admin to lectern)

   ---

   Thank you for explicitly calling out for the creation of a MetaValueRenderer component.

   I would call out the following requirement:

   • This component will be used by default for a custom column if no custom component is specified

   Also, I agree that it should be exported, but I don't understand the purpose of your example usage.

   ---

   • Each entry in the array is either a path-based config (columnHeader + metaPath) or a component-based config (columnHeader + columnComponent)
   • Omitting the prop produces no change to existing behaviour
   • TypeScript rejects entries that provide both metaPath and columnComponent, or neither

   I think there is value to creating a custom component that gets a value read from a metaPath. As an example, you could create a component that renders a set of known values using an icon+link, and then you want to reuse that component for different meta properties. With your requirements, I would need a custom component for each meta property. Instead, I recommend that we allow both custom component and the metaPath properties for a custom column.

   Each custom component should accept the following props:

   Property	Type	Description
   metaPath	string	the metaPath string property given to the custom component.
   value	DictionaryMeta Type from Lectern or undefined	The value at the metaPath for the field.
   field	SchemaField Type from Lectern	The full field definition from the schema.

   The requirement for a custom column should be that it requires either metaPath or a custom component, or both.

   • metaPath only : use MetaValueRenderer component
   • component only : use the component, provide metaPath as undefined and value as undefined, but the field value will still have the full field details
   • both : use the custom component, provide the metaPath string and the value (if available) from the metadata

   ---

   Arrays and objects produce readable output that does not cause cell overflow
   Values exceeding the available cell width are truncated with the full content accessible on hover

   This is a vague requirement. It is not clear what the max cell size will be, as row height depends on screen width and the content of the other columns, and column width is undefined at present.

   For arrays, perhaps we want to reuse the existing unordered list implementation that has the view more behaviour?

   How do you plan to handle simple objects #like:

   {
     "optionA": "value 1",
     "optionB": "value 2",
   }

   How about objects with mixed value types like:

   {
     "optionA": "value 1",
     "optionB": 987654321,
     "optionC": ["a", "b", "c"],
     "optionD": [123, 456, 789],
   }

   And lastly, how d oyou want to render deeply nested objects:

   {
     "value": "value 1",
     "withNested": {
       "value": 123,
       "mostNested": {
         "value": ["a", "b", "c"],
         "moreNested": {
            "valuest": "important data, don't forget me!"
          }
       }
     }
   }
2. MitchellShiell

   assigned

   ethanluc7

   on Apr 17, 2026
3. ethanluc7

   added a commit that references this issue on Apr 23, 2026

   #442: Custom Columns Prop (w/ Default Renderer & Dot Path Utility) (#445

   ...

   6facef1