@solidstarters/solid-core-ui 1.1.25 → 1.1.27

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/SolidListView.tsx

@@ -646,7 +646,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded == true && params.inlineCreate == true &&
             // < SolidCreateButton url={createButtonUrl} />
             <Button type="button" icon="pi pi-plus" label="Add" size='small'
-              onClick={() => params.handlePopUpOpen(true)}
+              onClick={() => params.handlePopUpOpen("new")}
             ></Button>
           }
           {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="secondary"

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>
     );
 

package/src/components/core/list/columns/SolidIntColumn.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';
 
 const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -36,6 +37,7 @@ const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidL
         { label: 'Between', value: FilterMatchMode.BETWEEN }
     ];
 
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -51,8 +53,14 @@ const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidL
             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/SolidSelectionDynamicColumn.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 SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -28,6 +29,8 @@ const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, col
             </SolidVarInputsFilterElement>
         )
     }
+
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -43,8 +46,14 @@ const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, col
             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/SolidSelectionStaticColumn.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 SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
@@ -30,6 +31,8 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             </SolidVarInputsFilterElement>
         )
     }
+    
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -45,8 +48,14 @@ const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, colu
             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/SolidShortTextColumn.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';
 
 const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {    
     const filterable = column.attrs.filterable;
@@ -36,6 +37,7 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
         )
     };
 
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
         
     return (
@@ -51,11 +53,14 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column }:
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
+            // style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
-            body={(rowData) => {
-                return <div className="solid-table-row">{rowData[fieldMetadata.name]}</div>;
-            }}
+            body={(rowData) => (
+                <SolidTableRowCell
+                    value={rowData[fieldMetadata.name]} 
+                    truncateAfter={truncateAfter} 
+                />
+            )}
         ></Column>
     );
 

package/src/components/core/list/columns/SolidTimeColumn.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 SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -27,6 +28,7 @@ const SolidTimeColumn = ({ 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 (
@@ -42,8 +44,14 @@ const SolidTimeColumn = ({ 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/SolidUuidColumn.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 SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -27,6 +28,8 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             </SolidVarInputsFilterElement>
         )
     }
+
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -34,7 +37,7 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             key={fieldMetadata.name}
             field={fieldMetadata.name}
             header={header}
-            className="text-sm"
+            // className="text-sm"
             sortable={column.attrs.sortable}
             // filter={filterable}
             dataType={columnDataType}
@@ -42,8 +45,14 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             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/model/ModelMetaData.tsx

@@ -256,11 +256,11 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
 
   }, [formik.values])
 
-  // useEffect(() => {
-  //   if (formik.dirty) {
-  //     setIsDirty(true);
-  //   }
-  // }, [formik.dirty]);
+  useEffect(() => {
+    if (formik.dirty) {
+      setIsDirty(true);
+    }
+  }, [formik.dirty]);
 
   return (
 

package/src/resources/globals.css

@@ -431,7 +431,7 @@ a {
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
-  max-width: 30ch !important;
+  /* max-width: 30ch !important; */
 }
 
 .form-field-label {
@@ -1700,6 +1700,7 @@ li.header-li-px {
   padding: 0.8rem 1rem;
   font-size: 14px;
   font-weight: 500;
+  text-transform: capitalize;
 }
 
 .solid-breadcrumb.p-breadcrumb .p-menuitem a {