From 306e0ca4f8dbae13da58fcaa39a6baaacb650bf9 Mon Sep 17 00:00:00 2001
From: John Bull <johnbullnz@gmail.com>
Date: Fri, 3 May 2024 12:05:44 +1200
Subject: [PATCH 1/2] treat object as component

---
 src/npm-fastui/src/components/display.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/npm-fastui/src/components/display.tsx b/src/npm-fastui/src/components/display.tsx
index 30bb2c14..611b68f8 100644
--- a/src/npm-fastui/src/components/display.tsx
+++ b/src/npm-fastui/src/components/display.tsx
@@ -1,10 +1,12 @@
 import { FC } from 'react'
 
-import type { AnyEvent, DisplayMode, Display, JsonData } from '../models'
+import type { AnyEvent, DisplayMode, Display, JsonData, FastProps } from '../models'
 
 import { useCustomRender } from '../hooks/config'
 import { unreachable, asTitle } from '../tools'
 
+import { AnyComp } from '.'
+
 import { JsonComp } from './Json'
 import { LinkRender } from './link'
 
@@ -26,6 +28,10 @@ export const DisplayComp: FC<Display> = (props) => {
   }
 }
 
+const isCompProps = (obj: any): obj is FastProps => {
+  return 'type' in obj
+}
+
 const DisplayRender: FC<Display> = (props) => {
   const mode = props.mode ?? 'auto'
   const value = props.value ?? null
@@ -34,6 +40,9 @@ const DisplayRender: FC<Display> = (props) => {
   } else if (Array.isArray(value)) {
     return <DisplayArray mode={mode} value={value} />
   } else if (typeof value === 'object' && value !== null) {
+    if (isCompProps(value)) {
+      return <AnyComp {...value} />
+    }
     return <DisplayObject mode={mode} value={value} />
   } else {
     return <DisplayPrimitive mode={mode} value={value} />

From 48458adff934fd446aefe4d6c8068071df637e21 Mon Sep 17 00:00:00 2001
From: John Bull <johnbullnz@gmail.com>
Date: Fri, 3 May 2024 12:40:08 +1200
Subject: [PATCH 2/2] add image component to table

---
 demo/tables.py | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/demo/tables.py b/demo/tables.py
index d78bc8e4..421067af 100644
--- a/demo/tables.py
+++ b/demo/tables.py
@@ -96,10 +96,25 @@ class User(BaseModel):
     name: str = Field(title='Name')
     dob: date = Field(title='Date of Birth')
     enabled: bool | None = None
+    avatar: c.Image | None = None
 
 
 users: list[User] = [
-    User(id=1, name='John', dob=date(1990, 1, 1), enabled=True),
+    User(
+        id=1,
+        name='John',
+        dob=date(1990, 1, 1),
+        enabled=True,
+        avatar=c.Image(
+            src='https://avatars.githubusercontent.com/u/110818415',
+            alt='Pydantic Logo',
+            width=50,
+            height=50,
+            loading='lazy',
+            referrer_policy='no-referrer',
+            class_name='border rounded',
+        ),
+    ),
     User(id=2, name='Jane', dob=date(1991, 1, 1), enabled=False),
     User(id=3, name='Jack', dob=date(1992, 1, 1)),
 ]
@@ -115,6 +130,7 @@ def users_view() -> list[AnyComponent]:
                 DisplayLookup(field='name', on_click=GoToEvent(url='/table/users/{id}/')),
                 DisplayLookup(field='dob', mode=DisplayMode.date),
                 DisplayLookup(field='enabled'),
+                DisplayLookup(field='avatar'),
             ],
         ),
         title='Users',
@@ -154,6 +170,7 @@ def user_profile(id: int) -> list[AnyComponent]:
                 DisplayLookup(field='name'),
                 DisplayLookup(field='dob', mode=DisplayMode.date),
                 DisplayLookup(field='enabled'),
+                DisplayLookup(field='avatar'),
             ],
         ),
         title=user.name,