@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/src/components/core/list/columns/SolidDatetimeColumn.tsx

@@ -5,6 +5,8 @@ import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewCo
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import { dateFilterMatchModeOptions } from './SolidDateColumn';
 import SolidTableRowCell from "../SolidTableRowCell";
+import { SolidListFieldWidgetProps } from "@/types/solid-core";
+import { getExtensionComponent } from "@/helpers/registry";
 
 const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -47,17 +49,31 @@ const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: S
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 
 };
 
-export default SolidDatetimeColumn;
+export default SolidDatetimeColumn;
+

package/src/components/core/list/columns/SolidExternalIdColumn.tsx

@@ -6,6 +6,8 @@ import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { FormEvent } from "primereact/ts-helpers";
 import { FilterMatchMode } from 'primereact/api';
 import SolidTableRowCell from '../SolidTableRowCell';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
 
 const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -49,17 +51,30 @@ const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 
 };
 
-export default SolidExternalIdColumn;
+export default SolidExternalIdColumn;

package/src/components/core/list/columns/SolidIdColumn.tsx

@@ -5,6 +5,8 @@ import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
 
 const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.filterable;
@@ -48,14 +50,27 @@ const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidLi
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 

package/src/components/core/list/columns/SolidIntColumn.tsx

@@ -5,6 +5,8 @@ import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { getExtensionComponent } from '@/helpers/registry';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
 
 const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -56,14 +58,27 @@ const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidL
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 

package/src/components/core/list/columns/SolidMediaMultipleColumn.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { Column } from "primereact/column";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { Button } from 'primereact/button';
+import { SolidMediaListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
 
 const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
     console.log("rendered");
@@ -12,56 +14,33 @@ const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column
     const showFilterOperator = false;
     const columnDataType = undefined;
     const header = column.attrs.label ?? fieldMetadata.displayName;
-    const imageBodyTemplate = (product: any) => {
-
-        if (!product?._media?.[fieldMetadata.name]) return null;
-
-        const imageUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
-
-        return (
-            imageUrls.length > 0 ?
-                <div className='flex gap-2 align-items-end'>
-                    <img
-                        src={imageUrls[0]}
-                        alt={`product-image-multiple`}
-                        className="shadow-2 border-round"
-                        width={40}
-                        height={40}
-                        style={{ objectFit: "cover" }}
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            setLightboxUrls(imageUrls.map((img: string) => ({ src: img, downloadUrl: img })));
-                            setOpenLightbox(true);
-                        }}
-                    />
-                    <Button
-                        type='button'
-                        text
-                        size='small'
-                        label='View All'
-                        className='view-media-button'
-                        onClick={(event) => {
-                            event.stopPropagation();
-                            setLightboxUrls(imageUrls.map((img: string) => ({ src: img })));
-                            setOpenLightbox(true);
-                        }}
-                    />
-                </div>
-                :
-                <div
-                    style={{ height: 40, width: 40 }}
-                >
-                </div>
-        );
-    };
 
     return (
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            body={imageBodyTemplate}
-            // className="text-sm"
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultMediaMultipleListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidMediaListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column,
+                    setLightboxUrls,
+                    setOpenLightbox
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }            // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
             dataType={columnDataType}
@@ -74,4 +53,48 @@ const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column
 
 };
 
-export default SolidMediaMultipleColumn;
+export default SolidMediaMultipleColumn;
+
+
+
+export const DefaultMediaMultipleListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {
+    if (!rowData?._media?.[fieldMetadata.name]) return null;
+
+    const imageUrls = rowData._media[fieldMetadata.name].map((i: any) => i._full_url);
+
+    return (
+        imageUrls.length > 0 ?
+            <div className='flex gap-2 align-items-end'>
+                <img
+                    src={imageUrls[0]}
+                    alt={`image-multiple`}
+                    className="shadow-2 border-round"
+                    width={40}
+                    height={40}
+                    style={{ objectFit: "cover" }}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        setLightboxUrls(imageUrls.map((img: string) => ({ src: img, downloadUrl: img })));
+                        setOpenLightbox(true);
+                    }}
+                />
+                <Button
+                    type='button'
+                    text
+                    size='small'
+                    label='View All'
+                    className='view-media-button'
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        setLightboxUrls(imageUrls.map((img: string) => ({ src: img })));
+                        setOpenLightbox(true);
+                    }}
+                />
+            </div>
+            :
+            <div
+                style={{ height: 40, width: 40 }}
+            >
+            </div>
+    );
+};

package/src/components/core/list/columns/SolidMediaSingleColumn.tsx

@@ -3,6 +3,8 @@ import React, { useState } from 'react';
 import { Column } from "primereact/column";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { classNames } from 'primereact/utils';
+import { SolidListFieldWidgetProps, SolidMediaListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
 
 const isImageFile = (url: string) => {
     return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
@@ -33,37 +35,32 @@ const MediaWithFallback = ({ src, alt, onClick }: { src: string; alt: string; on
 
 const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
     const header = column.attrs.label ?? fieldMetadata.displayName;
-
-    const mediaBodyTemplate = (product: any) => {
-        if (!product?._media?.[fieldMetadata.name]) return null;
-        const mediaUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
-
-        return (
-            mediaUrls.length > 0 ? (
-                <MediaWithFallback
-                    src={mediaUrls[0]}
-                    alt="product-media"
-                    onClick={(event) => {
-                        event.stopPropagation();
-                        setLightboxUrls([{ src: mediaUrls[0], downloadUrl: mediaUrls[0] }]);
-                        setOpenLightbox(true);
-                    }}
-                />
-            ) : (
-                <div
-                    style={{ height: 40, width: 40 }}
-                >
-                </div>
-            )
-        );
-    };
-
     return (
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            body={mediaBodyTemplate}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultMediaSingleListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidMediaListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column,
+                    setLightboxUrls,
+                    setOpenLightbox
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
             sortable={column.attrs.sortable}
             showFilterOperator={false}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
@@ -74,3 +71,28 @@ const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column,
 };
 
 export default SolidMediaSingleColumn;
+
+
+export const DefaultMediaSingleListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {
+    if (!rowData?._media?.[fieldMetadata.name]) return null;
+    const mediaUrls = rowData._media[fieldMetadata.name].map((i: any) => i._full_url);
+
+    return (
+        mediaUrls.length > 0 ? (
+            <MediaWithFallback
+                src={mediaUrls[0]}
+                alt="media"
+                onClick={(event) => {
+                    event.stopPropagation();
+                    setLightboxUrls([{ src: mediaUrls[0], downloadUrl: mediaUrls[0] }]);
+                    setOpenLightbox(true);
+                }}
+            />
+        ) : (
+            <div
+                style={{ height: 40, width: 40 }}
+            >
+            </div>
+        )
+    );
+};

package/src/components/core/list/columns/SolidRelationColumn.tsx

@@ -1,11 +1,18 @@
 'use client';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import SolidRelationManyToManyColumn from './relations/SolidRelationManyToManyColumn';
 import SolidRelationManyToOneColumn from './relations/SolidRelationManyToOneColumn';
 
 const SolidRelationColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     if (fieldMetadata.relationType === 'many-to-one') {
         return SolidRelationManyToOneColumn({ solidListViewMetaData, fieldMetadata, column });
     }
+    if (fieldMetadata.relationType === 'one-to-many') {
+        return SolidRelationManyToOneColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.relationType === 'many-to-many') {
+        return SolidRelationManyToManyColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
     // TODO: Support one-to-many
     // TODO: Support many-to-many
 };

package/src/components/core/list/columns/SolidSelectionDynamicColumn.tsx

@@ -5,6 +5,8 @@ import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { getExtensionComponent } from '@/helpers/registry';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
 
 const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -49,14 +51,27 @@ const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, col
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 

package/src/components/core/list/columns/SolidSelectionStaticColumn.tsx

@@ -5,6 +5,8 @@ import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { getExtensionComponent } from '@/helpers/registry';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
 
 
 const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
@@ -31,7 +33,7 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             </SolidVarInputsFilterElement>
         )
     }
-    
+
     const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
@@ -51,15 +53,28 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]} 
-                    truncateAfter={truncateAfter} 
-                />
-            )}
-        ></Column>
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
+        ></Column >
     );
 };
 

package/src/components/core/list/columns/SolidShortTextColumn.tsx

@@ -6,7 +6,7 @@ import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewCo
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
 import { getExtensionComponent } from '@/helpers/registry';
-import { SolidShortTextImageRenderModeWidgetProps } from '@/types/solid-core';
+import { SolidListFieldWidgetProps, SolidMediaListFieldWidgetProps, SolidShortTextImageRenderModeWidgetProps } from '@/types/solid-core';
 
 const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -60,22 +60,19 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, se
             header={() => {
                 return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
+
             body={(rowData) => {
-                const renderMode = column.attrs.renderMode || "text";
-                const data = rowData;
-                let widgetName = column?.attrs?.widget;
-                if (renderMode === "image") {
-                    widgetName = "SolidShortTextFieldImageRenderModeWidget"
-                }
-                if (renderMode === "text") {
-                    widgetName = "SolidShortTextFieldTextRenderModeWidget"
-                };
-                if (column?.attrs?.widget) {
-                    widgetName = column?.attrs?.widget;
+                //add this widget to render media image in image format  - SolidShortTextFieldImageRenderModeWidget 
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextListWidget';
                 }
-                let DynamicWidget = getExtensionComponent(widgetName);
-                const widgetProps = {
-                    value: data[fieldMetadata.name],
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidMediaListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column,
                     setLightboxUrls: setLightboxUrls,
                     setOpenLightbox: setOpenLightbox
                 }
@@ -84,33 +81,23 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, se
                         {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </>
                 )
+            }
+            }
 
-                // if (renderMode === "text") {
-                //     return <SolidTableRowCell
-                //         value={rowData[fieldMetadata.name]}
-                //         truncateAfter={truncateAfter}
-                //     />
-                // } else {
-                //     return (
-                //         <img
-                //             src={data[fieldMetadata.name]}
-                //             alt="product-image-single"
-                //             className="shadow-2 border-round"
-                //             width={40}
-                //             height={40}
-                //             style={{ objectFit: "cover" }}
-                //             onClick={(event) => {
-                //                 event.stopPropagation();
-                //                 setLightboxUrls([{ src: data[fieldMetadata.name], downloadUrl: data[fieldMetadata.name] }]);
-                //                 setOpenLightbox(true);
-                //             }}
-                //         />
-                //     );
-                // }
-            }}
         ></Column >
     );
 
 };
 
-export default SolidShortTextColumn;
+export default SolidShortTextColumn;
+
+
+export const DefaultTextListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
+    return (
+        <SolidTableRowCell
+            value={rowData[fieldMetadata.name]}
+            truncateAfter={truncateAfter}
+        />
+    )
+};