@solidstarters/solid-core-ui 1.1.25 → 1.1.26

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -87,9 +87,7 @@ export class SolidMediaSingleField implements ISolidField {
 
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
         const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
-        const [uploadCompleted, setUploadCompleted] = useState<boolean>(false);
-        const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string } | null>(null);
-        const [totalSize, setTotalSize] = useState<string>("0 KB");
+        const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
         const [isReplaceImageDialogVisible, setReplaceImageDialogVisible] = useState(false);
         const [newFileToUpload, setNewFileToUpload] = useState<any>(null);
 
@@ -110,7 +108,6 @@ export class SolidMediaSingleField implements ISolidField {
                 deleteMedia(imageToBeDeletedData);
             }
             e.stopPropagation();
-            setUploadCompleted(false);
             setFileDetails(null);
             formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
             setDeleteImageDialogVisible(false);
@@ -129,25 +126,24 @@ export class SolidMediaSingleField implements ISolidField {
             }
         };
 
-        const uploadFile = (file: any) => {
-            setUploadCompleted(false);
-            setTotalSize(formatFileSize(file.size));
-            setFileDetails({ name: file.name, type: file.type, fileUrl: file.fileUrl });
+        const uploadFile = (file: File) => {
+            setFileDetails({
+                name: file.name,
+                type: file.type,
+                fileUrl: URL.createObjectURL(file),
+                fileSize: file.size
+            });
 
             const reader = new FileReader();
-            reader.onloadend = () => {
-                setUploadCompleted(true);
-            };
             reader.readAsDataURL(file);
             formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
         };
+
         const handleReplaceFile = () => {
             // Delete the existing file first
             if (imageToBeDeletedData) {
                 deleteMedia(imageToBeDeletedData);
             }
-
-            setUploadCompleted(false);
             setFileDetails(null);
             formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
 
@@ -159,28 +155,36 @@ export class SolidMediaSingleField implements ISolidField {
 
             setReplaceImageDialogVisible(false);
         };
+
         useEffect(() => {
             const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
 
             if (fieldValue && typeof fieldValue === "object") {
                 let fileUrl = "";
                 let fileName = "Unknown File";
+                let fileSize = 0;
 
                 if (fieldValue instanceof File) {
-                    // Handle new file upload
-                    fileUrl = fieldValue.name;
-                    fileName = fileUrl;
+                    fileUrl = URL.createObjectURL(fieldValue);
+                    fileName = fieldValue.name;
+                    fileSize = fieldValue.size;
                 } else if (fieldValue._full_url) {
-                    // Handle updated file from backend
                     fileUrl = fieldValue._full_url;
-                    fileName = fieldValue.relativeUri?.split("/").pop() || "Unknown File";
+                    fileName = fieldValue.originalFileName;
+                    fileSize = fieldValue.fileSize;
                 }
 
-                setFileDetails({ name: fileName, type: "Uploaded File", fileUrl });
+                setFileDetails({
+                    name: fileName,
+                    type: fieldValue.mimeType,
+                    fileUrl,
+                    fileSize
+                });
 
-                // Set upload progress
-                setUploadCompleted(true);
+                // Set file ID for delete operation
                 setImageToBeDeletedData(fieldValue.id);
+
+                // Ensure formik has the correct value
                 formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
             }
         }, [formik.values, fieldLayoutInfo.attrs.name]);
@@ -202,6 +206,7 @@ export class SolidMediaSingleField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>
                     }
@@ -216,7 +221,9 @@ export class SolidMediaSingleField implements ISolidField {
                         />
                     </div>
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
                     )}
                     {fileDetails && (
                         <div className="solid-file-upload-wrapper">
@@ -224,10 +231,11 @@ export class SolidMediaSingleField implements ISolidField {
                                 <FileReaderExt fileDetails={fileDetails} />
                                 <div className="w-full flex flex-column gap-1">
                                     <div className="flex align-items-start justify-content-between">
-                                        <Link className="font-normal w-9" href={process.env.NEXT_PUBLIC_BACKEND_API_URL + `/${fileDetails?.fileUrl}`} target="_blank">{fileDetails.name}</Link>
+                                        <Link className="font-normal w-9 text-primary" href={fileDetails.fileUrl} target="_blank">{fileDetails.name}</Link>
                                         <div className="flex align-items-center gap-2">
                                             <div>
                                                 <Button
+                                                    type="button"
                                                     text
                                                     icon={"pi pi-download"}
                                                     size="small"
@@ -242,6 +250,7 @@ export class SolidMediaSingleField implements ISolidField {
                                             </div>
                                             <div>
                                                 <Button
+                                                    type="button"
                                                     text
                                                     icon={"pi pi-times"}
                                                     size="small"
@@ -256,12 +265,9 @@ export class SolidMediaSingleField implements ISolidField {
                                             </div>
                                         </div>
                                     </div>
-                                    {
-                                        uploadCompleted &&
-                                        <div className="flex align-items-center gap-2 text-sm">
-                                            {totalSize}
-                                        </div>
-                                    }
+                                    <div className="flex align-items-center gap-2 text-sm">
+                                        {fileDetails && formatFileSize(fileDetails.fileSize)}
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -273,8 +279,8 @@ export class SolidMediaSingleField implements ISolidField {
                     modal
                     footer={() => (
                         <div className="flex justify-content-center">
-                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleCancelUpload} />
-                            <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
+                            <Button type="button" label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleCancelUpload} />
+                            <Button type="button" label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
                         </div>
                     )}
                     onHide={() => setDeleteImageDialogVisible(false)}
@@ -287,8 +293,8 @@ export class SolidMediaSingleField implements ISolidField {
                     modal
                     footer={() => (
                         <div className="flex justify-content-center">
-                            <Button label="Yes, Replace" icon="pi pi-check" className='small-button' severity="danger" onClick={handleReplaceFile} />
-                            <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => setReplaceImageDialogVisible(false)} />
+                            <Button type="button" label="Yes, Replace" icon="pi pi-check" className='small-button' severity="danger" onClick={handleReplaceFile} />
+                            <Button type="button" label="Cancel" icon="pi pi-times" className='small-button' onClick={() => setReplaceImageDialogVisible(false)} />
                         </div>
                     )}
                     onHide={() => setReplaceImageDialogVisible(false)}

package/src/components/core/form/fields/SolidRichTextField.tsx

@@ -79,6 +79,7 @@ export class SolidRichTextField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>
                     }
@@ -93,7 +94,9 @@ export class SolidRichTextField implements ISolidField {
                     />
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
                 )}
             </div>
         );

package/src/components/core/form/fields/SolidSelectionDynamicField.tsx

@@ -98,6 +98,7 @@ export class SolidSelectionDynamicField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>
                     }
@@ -117,7 +118,9 @@ export class SolidSelectionDynamicField implements ISolidField {
                     />
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
                 )}
             </div>
         );

package/src/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -103,6 +103,7 @@ export class SolidSelectionStaticField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>
                     }
@@ -124,7 +125,9 @@ export class SolidSelectionStaticField implements ISolidField {
                     />
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
                 )}
             </div>
         );

package/src/components/core/form/fields/SolidShortTextField.tsx

@@ -85,8 +85,8 @@ export class SolidShortTextField implements ISolidField {
                     <div className="flex flex-column gap-2 mt-4">
                         {showFieldLabel != false &&
                             <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
                                 {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                                {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
                             </label>
                         }
                         <InputText
@@ -102,16 +102,17 @@ export class SolidShortTextField implements ISolidField {
                         />
                     </div>
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
                     )}
                 </div>}
                 {includeWrapper === 'no' &&
                     <>
                         {showFieldLabel != false &&
                             <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
                                 {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-
-                                {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
                             </label>
                         }
                         <InputText

package/src/components/core/form/fields/SolidTimeField.tsx

@@ -53,7 +53,7 @@ export class SolidTimeField implements ISolidField {
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
         const readOnlyPermission = this.fieldContext.readOnly;
-        
+
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
@@ -64,7 +64,7 @@ export class SolidTimeField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>
                     }
@@ -86,7 +86,9 @@ export class SolidTimeField implements ISolidField {
                     />
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
                 )}
             </div>
         );

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -125,7 +125,11 @@ export class SolidRelationManyToManyField implements ISolidField {
                 {(!fieldLayoutInfo.attrs.renderMode || fieldLayoutInfo.attrs.renderMode === "autocomplete") &&
                     this.renderAutoCompleteMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
                 }
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (<Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />)}
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    </div>
+                )}
                 {/* </div> */}
             </>
         );
@@ -137,7 +141,7 @@ export class SolidRelationManyToManyField implements ISolidField {
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        
+
         const readOnlyPermission = this.fieldContext.readOnly;
 
 
@@ -242,6 +246,7 @@ export class SolidRelationManyToManyField implements ISolidField {
                         {showFieldLabel != false &&
                             <label className="form-field-label">
                                 {capitalize(fieldLayoutInfo.attrs.name)}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             </label>
                         }
                         {fieldLayoutInfo.attrs.inlineCreate === "true" &&
@@ -367,29 +372,32 @@ export class SolidRelationManyToManyField implements ISolidField {
 
         return (
             <div className={className}>
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                        {fieldLabel}
-                    </label>
-                }
-                <div className="flex align-items-center gap-3">
-                    <AutoComplete
-                        readOnly={readOnly || readOnlyPermission}
-                        disabled={disabled || readOnlyPermission}
-                        multiple
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        field="label"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown={!readOnlyPermission}
-                        suggestions={autoCompleteItems}
-                        completeMethod={autoCompleteSearch}
-                        onChange={formik.handleChange}
-                        className="solid-standard-autocomplete w-full"
-                    />
-                    {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && 
-                        this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                <div className="mt-4">
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                            {fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
                     }
+                    <div className="flex align-items-center gap-3 mt-2">
+                        <AutoComplete
+                            readOnly={readOnly || readOnlyPermission}
+                            disabled={disabled || readOnlyPermission}
+                            multiple
+                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                            id={fieldLayoutInfo.attrs.name}
+                            field="label"
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            dropdown={!readOnlyPermission}
+                            suggestions={autoCompleteItems}
+                            completeMethod={autoCompleteSearch}
+                            onChange={formik.handleChange}
+                            className="solid-standard-autocomplete w-full"
+                        />
+                        {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
+                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                        }
+                    </div>
                 </div>
             </div>
         );

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -137,33 +137,38 @@ export class SolidRelationManyToOneField implements ISolidField {
         }
         return (
             <div className={className}>
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                        {fieldLabel}
-                    </label>
-                }
-                <div className="flex align-items-center gap-3">
-                    <AutoComplete
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        field="label"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown={!readOnlyPermission}
-                        suggestions={autoCompleteItems}
-                        completeMethod={autoCompleteSearch}
-                        onChange={formik.handleChange}
-                        onFocus={(e) => e.target.select()}
-                        className="w-full solid-standard-autocomplete"
-                    />
-                    {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
-                        this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                <div className="mt-4">
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                            {fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        </label>
                     }
+                    <div className="flex align-items-center gap-3 mt-2">
+                        <AutoComplete
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                            id={fieldLayoutInfo.attrs.name}
+                            field="label"
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            dropdown={!readOnlyPermission}
+                            suggestions={autoCompleteItems}
+                            completeMethod={autoCompleteSearch}
+                            onChange={formik.handleChange}
+                            onFocus={(e) => e.target.select()}
+                            className="w-full solid-standard-autocomplete"
+                        />
+                        {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
+                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                        }
+                    </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
                 </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                )}
             </div>
         );
     }

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -86,7 +86,7 @@ export class SolidRelationOneToManyField implements ISolidField {
             const lisviewparams = {
                 moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
                 modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
-                inlineCreate: readOnlyPermission === false ?  true : false,
+                inlineCreate: readOnlyPermission === false ? true : false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
                 embeded: true
             }
@@ -99,7 +99,7 @@ export class SolidRelationOneToManyField implements ISolidField {
             const listviewparams = {
                 moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
                 modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
-                inlineCreate: readOnlyPermission === false ?  true : false,
+                inlineCreate: readOnlyPermission === false ? true : false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
                 embeded: true,
                 customFilter: {
@@ -137,7 +137,8 @@ export class SolidRelationOneToManyField implements ISolidField {
                 {/* <div className="justify-content-center align-items-center"> */}
                 {showFieldLabel != false &&
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    {/* &nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                     </label>
                 }
 

package/src/components/core/list/SolidTableRowCell.tsx

@@ -0,0 +1,12 @@
+const SolidTableRowCell = ({ value, truncateAfter }: { value: string; truncateAfter?: number }) => {
+    return (
+        <div
+            className="solid-table-row"
+            style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch' }}
+        >
+            {value}
+        </div>
+    );
+};
+
+export default SolidTableRowCell;

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

@@ -4,6 +4,7 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import SolidTableRowCell from '../SolidTableRowCell';
 
 export const dateFilterMatchModeOptions = [
     { label: 'Equals', value: FilterMatchMode.EQUALS },
@@ -39,6 +40,7 @@ const SolidDateColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
     };
 
     // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -54,8 +56,14 @@ const SolidDateColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             filterMatchModeOptions={dateFilterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );
 

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

@@ -4,6 +4,7 @@ import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import { dateFilterMatchModeOptions } from './SolidDateColumn';
+import SolidTableRowCell from "../SolidTableRowCell";
 
 const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -27,6 +28,7 @@ const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: S
     };
 
     // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -42,8 +44,14 @@ const SolidDatetimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: S
             filterMatchModeOptions={dateFilterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );
 

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

@@ -5,6 +5,7 @@ import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilter
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { FormEvent } from "primereact/ts-helpers";
 import { FilterMatchMode } from 'primereact/api';
+import SolidTableRowCell from '../SolidTableRowCell';
 
 const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -28,6 +29,8 @@ const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             </SolidVarInputsFilterElement>
         )
     }
+
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -43,8 +46,14 @@ const SolidExternalIdColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );
 

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

@@ -4,6 +4,7 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import SolidTableRowCell from '../SolidTableRowCell';
 
 const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.filterable;
@@ -27,8 +28,9 @@ const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidLi
             </SolidVarInputsFilterElement>
         )
     }
-    const header = column.attrs.label ?? fieldMetadata.displayName;
 
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
+    const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
         <Column
@@ -43,8 +45,14 @@ const SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidLi
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]}
+                    truncateAfter={truncateAfter}
+                />
+            )}
         ></Column>
     );