Added support for custom column width

assets/js/src/core/components/grid/grid.tsx

@@ -10,7 +10,13 @@
 
 /* eslint-disable max-lines */
 
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { useInjection } from '@Pimcore/app/depency-injection'
 import { useCssComponentHash } from '@Pimcore/modules/ant-design/hooks/use-css-component-hash'
+import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
+import type { AssetGetGridApiResponse } from '@Pimcore/modules/asset/asset-api-slice.gen'
+import { type DynamicTypeGridCellRegistry } from '@Pimcore/modules/element/dynamic-types/definitions/grid-cell/dynamic-type-grid-cell-registry'
+import { type GridProps } from '@Pimcore/types/components/types'
 import {
   type CellContext,
   type Column,
@@ -27,19 +33,16 @@ import {
   type TableOptions,
   useReactTable
 } from '@tanstack/react-table'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { isEmpty } from 'lodash'
+import { Checkbox, Skeleton } from 'antd'
 import cn from 'classnames'
-import { useStyles } from './grid.styles'
-import { Resizer } from './resizer/resizer'
-import { DefaultCell } from './columns/default-cell'
+import { isEmpty } from 'lodash'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Checkbox, Skeleton } from 'antd'
-import { GridRow } from './grid-cell/grid-row'
 import { SortButton, type SortDirection, SortDirections } from '../sort-button/sort-button'
-import { type GridProps } from '@Pimcore/types/components/types'
-import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
-import type { AssetGetGridApiResponse } from '@Pimcore/modules/asset/asset-api-slice.gen'
+import { DefaultCell } from './columns/default-cell'
+import { GridRow } from './grid-cell/grid-row'
+import { useStyles } from './grid.styles'
+import { Resizer } from './resizer/resizer'
 
 export interface ColumnMetaType {
   editable?: boolean
@@ -52,6 +55,7 @@ export interface ColumnMetaType {
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   export interface ColumnMeta<TData extends RowData, TValue> extends ColumnMetaType {
+    size?: number
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -101,6 +105,7 @@ export const Grid = ({
   const [internalSorting, setInternalSorting] = useState<SortingState>(sorting ?? [])
   const memoModifiedCells = useMemo(() => { return modifiedCells ?? [] }, [JSON.stringify(modifiedCells)])
   const autoColumnRef = useRef<HTMLTableCellElement>(null)
+  const gridCellRegistry = useInjection<DynamicTypeGridCellRegistry>(serviceIds['DynamicTypes/GridCellRegistry'])
 
   useEffect(() => {
     onActiveCellChange?.(activeCell)
@@ -137,6 +142,18 @@ export const Grid = ({
     [props.isLoading, props.columns]
   ) as Array<ColumnDef<any>>
 
+  columns.forEach(column => {
+    if (column.meta?.type !== undefined) {
+      const dynamicType = gridCellRegistry.getDynamicType(column.meta.type, false)
+
+      if (dynamicType !== undefined) {
+        if (dynamicType?.getDefaultGridColumnWidth !== undefined) {
+          column.size = dynamicType.getDefaultGridColumnWidth(column.meta)
+        }
+      }
+    }
+  })
+
   useMemo(() => {
     updateRowSelectionColumn()
   }, [columns, isRowSelectionEnabled, selectedRows])
@@ -250,7 +267,7 @@ export const Grid = ({
               ref={ tableElement }
               style={ { width: tableAutoWidth ? '100%' : calculateTableWidth(), minWidth: table.getCenterTotalSize() } }
             >
-              { !hideColumnHeaders && (
+              {!hideColumnHeaders && (
                 <thead className='ant-table-thead'>
                   {table.getHeaderGroups().map(headerGroup => (
                     <tr key={ headerGroup.id }>
@@ -260,16 +277,16 @@ export const Grid = ({
                           key={ header.id }
                           ref={ header.column.columnDef.meta?.autoWidth === true ? autoColumnRef : null }
                           style={
-                              header.column.columnDef.meta?.autoWidth === true && !header.column.getIsResizing()
-                                ? {
-                                    width: 'auto',
-                                    minWidth: header.column.getSize()
-                                  }
-                                : {
-                                    width: header.column.getSize(),
-                                    maxWidth: header.column.getSize()
-                                  }
-                            }
+                            header.column.columnDef.meta?.autoWidth === true && !header.column.getIsResizing()
+                              ? {
+                                  width: 'auto',
+                                  minWidth: header.column.getSize()
+                                }
+                              : {
+                                  width: header.column.getSize(),
+                                  maxWidth: header.column.getSize()
+                                }
+                          }
                         >
                           <div className='grid__cell-content'>
                             <span>

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/components/data-object-adapter/types/edit-modal-mode-cell.tsx

@@ -21,6 +21,7 @@ import { InheritanceLayer } from '../inheritance-layer'
 import { Flex } from '@Pimcore/components/flex/flex'
 import { useSelectedColumns } from '@Pimcore/modules/element/listing/abstract/configuration-layer/provider/selected-columns/use-selected-columns'
 import { META_SUPPORTS_BATCH_APPEND_MODE } from '@Pimcore/modules/data-object/listing/batch-actions/batch-append-mode/batch-append-mode'
+import { useTranslation } from 'react-i18next'
 
 export interface EditModalModeCellProps {
   objectCellDefinition: WithEditModalGridCellDefinition
@@ -31,6 +32,7 @@ export const EditModalCell = (props: EditModalModeCellProps): React.JSX.Element
   const { decodeColumnIdentifier } = useSelectedColumns()
   const { isInEditMode, fireOnUpdateCellDataEvent, disableEditMode } = useEditMode(props.cellProps)
   const [form] = Form.useForm()
+  const { t } = useTranslation()
 
   const onFormFinish = (values): void => {
     fireOnUpdateCellDataEvent(values.value, {
@@ -62,15 +64,15 @@ export const EditModalCell = (props: EditModalModeCellProps): React.JSX.Element
         {props.objectCellDefinition.previewComponent}
       </InheritanceLayer>
 
-      { isInEditMode && !isUndefined(props.objectCellDefinition.editModalSettings) && (
+      {isInEditMode && !isUndefined(props.objectCellDefinition.editModalSettings) && (
         <WindowModal
-          cancelText='Discard'
-          okText='Apply Changes'
+          cancelText={ t('edit-modal.discard') }
+          okText={ t('edit-modal.apply-changes') }
           onCancel={ onCancel }
           onOk={ () => { form.submit() } }
           open={ isInEditMode }
           size={ props.objectCellDefinition.editModalSettings.modalSize }
-          title={ 'Inline edit' }
+          title={ t('edit-modal.inline-edit') }
         >
           <FieldWidthProvider>
             <FieldCollectionProvider id={ props.cellProps.row.original.id }>
@@ -90,7 +92,7 @@ export const EditModalCell = (props: EditModalModeCellProps): React.JSX.Element
             </FieldCollectionProvider>
           </FieldWidthProvider>
         </WindowModal>
-      ) }
+      )}
     </Flex>
   )
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/dynamic-type-grid-cell-abstract.tsx

@@ -8,16 +8,21 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { type ReactElement } from 'react'
-import { DynamicTypeAbstract } from '../../registry/dynamic-type-registry-abstract'
 import { type DefaultCellProps } from '@Pimcore/components/grid/columns/default-cell'
+import { type ColumnMeta } from '@tanstack/react-table'
 import { injectable } from 'inversify'
+import { type ReactElement } from 'react'
+import { DynamicTypeAbstract } from '../../registry/dynamic-type-registry-abstract'
 
-export interface AbstractGridCellDefinition extends DefaultCellProps {}
+export interface AbstractGridCellDefinition extends DefaultCellProps { }
 
 // @todo check for copy and paste handler implementation
 @injectable()
 export abstract class DynamicTypeGridCellAbstract extends DynamicTypeAbstract {
   abstract readonly id: string
   abstract getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition>
+
+  getDefaultGridColumnWidth (props: ColumnMeta<any, any>): number | undefined {
+    return undefined
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/asset-actions/dynamic-type-grid-cell-asset-preview.tsx

@@ -20,4 +20,8 @@ export class DynamicTypeGridCellAssetActions extends DynamicTypeGridCellAbstract
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <AssetActionsCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return 100
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/asset-link/dynamic-type-grid-cell-asset-link.tsx

@@ -21,4 +21,8 @@ export class DynamicTypeGridCellAssetLink extends DynamicTypeGridCellAbstract {
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <ElementCell { ...addColumnConfig(props, { allowedTypes: ['asset'] }) } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return 350
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/boolean/dynamic-type-grid-cell-boolean.tsx

@@ -20,4 +20,8 @@ export class DynamicTypeGridCellBoolean extends DynamicTypeGridCellAbstract {
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <CheckboxCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return 100
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/checkbox/dynamic-type-grid-cell-checkbox.tsx

@@ -20,4 +20,8 @@ export class DynamicTypeGridCellCheckbox extends DynamicTypeGridCellAbstract {
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <CheckboxCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return 100
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-actions/dynamic-type-grid-cell-data-object-actions.tsx

@@ -20,4 +20,8 @@ export class DynamicTypeGridCellDataObjectActions extends DynamicTypeGridCellAbs
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <DataObjectActionsCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return 100
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-adapter/dynamic-type-grid-cell-data-object-adapter.tsx

@@ -8,10 +8,14 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import React, { type ReactElement } from 'react'
-import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
+import { type ColumnMeta } from '@tanstack/react-table'
 import { injectable } from 'inversify'
+import React, { type ReactElement } from 'react'
 import { DataObjectAdapterCell } from '../../components/data-object-adapter/data-object-adapter-cell'
+import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
+import { useInjection } from '@Pimcore/app/depency-injection'
+import { type DynamicTypeObjectDataRegistry } from '../../../objects/data-related/dynamic-type-object-data-registry'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
 
 @injectable()
 export class DynamicTypeGridCellDataObjectAdapter extends DynamicTypeGridCellAbstract {
@@ -20,4 +24,18 @@ export class DynamicTypeGridCellDataObjectAdapter extends DynamicTypeGridCellAbs
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <DataObjectAdapterCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (props?: ColumnMeta<any, any>): number | undefined {
+    const objectDataRegistry = useInjection<DynamicTypeObjectDataRegistry>(serviceIds['DynamicTypes/ObjectDataRegistry'])
+    const type = props?.config?.dataObjectType as string | undefined
+
+    if (type !== undefined) {
+      const dynType = objectDataRegistry.getDynamicType(type)
+      if (dynType?.getDefaultGridColumnWidth !== undefined) {
+        return dynType.getDefaultGridColumnWidth(props)
+      }
+    }
+
+    return undefined
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-object-brick/dynamic-type-grid-cell-data-object-adapter.tsx

@@ -8,10 +8,14 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import React, { type ReactElement } from 'react'
-import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { useInjection } from '@Pimcore/app/depency-injection'
+import { type ColumnMeta } from '@tanstack/react-table'
 import { injectable } from 'inversify'
+import React, { type ReactElement } from 'react'
+import { type DynamicTypeObjectDataRegistry } from 'src/sdk/modules/element'
 import { DataObjectAdapterCell } from '../../components/data-object-adapter/data-object-adapter-cell'
+import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '../../dynamic-type-grid-cell-abstract'
 
 @injectable()
 export class DynamicTypeGridCellDataObjectObjectBrick extends DynamicTypeGridCellAbstract {
@@ -20,4 +24,18 @@ export class DynamicTypeGridCellDataObjectObjectBrick extends DynamicTypeGridCel
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <DataObjectAdapterCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (props: ColumnMeta<any, any>): number | undefined {
+    const objectDataRegistry = useInjection<DynamicTypeObjectDataRegistry>(serviceIds['DynamicTypes/ObjectDataRegistry'])
+    const type = props.config?.dataObjectType as string
+
+    if (type !== undefined) {
+      const dynType = objectDataRegistry.getDynamicType(type)
+      if (dynType?.getDefaultGridColumnWidth !== undefined) {
+        return dynType.getDefaultGridColumnWidth(props)
+      }
+    }
+
+    return undefined
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/text/dynamic-type-grid-cell-text.tsx

@@ -20,4 +20,8 @@ export class DynamicTypeGridCellText extends DynamicTypeGridCellAbstract {
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <TextCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return 350
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/textarea/dynamic-type-grid-cell-text.tsx

@@ -20,4 +20,8 @@ export class DynamicTypeGridCellTextarea extends DynamicTypeGridCellAbstract {
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <TextareaCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return 400
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/components/many-to-many-relation/grid.tsx

@@ -110,7 +110,6 @@ export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid
       ]
 
   columns.push(
-
     columnHelper.accessor('actions', {
       header: t('actions'),
       size: 110,
@@ -240,7 +239,7 @@ export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid
             onUpdateCellData={ props.onUpdateCellData }
             resizable
           />
-          { props.hint }
+          {props.hint}
         </div>
       </Content>
     </div>

assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/dynamic-type-object-data-abstract.tsx

@@ -27,6 +27,7 @@ import {
   type IFormattedDataStructureData,
   type IProcessVersionFieldDataProps
 } from '@Pimcore/modules/data-object/editor/shared-tab-manager/tabs/versions/types'
+import { type ColumnMeta } from '@tanstack/react-table'
 
 export type EditMode = 'default' | 'edit-modal' | 'column-meta'
 export interface EditModalSettings {
@@ -151,4 +152,8 @@ export abstract class DynamicTypeObjectDataAbstract implements DynamicTypeAbstra
   handleDefaultValue (props: AbstractObjectDataDefinition, form: FormInstance, fieldName: NamePath): void {
     // This method is intentionally left empty - can be implemented in subclasses
   }
+
+  getDefaultGridColumnWidth (props?: ColumnMeta<any, any>): number | undefined {
+    return undefined
+  }
 }

assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/helpers/relations/hooks/use-convert-relation-editable-columns.ts

@@ -81,6 +81,8 @@ export const useConvertRelationEditableColumns = (
     const columnDefinition: Array<ColumnDef<any>> = []
 
     for (const column of columns) {
+      console.log('flexxxxxxx', column)
+
       columnDefinition.push(
         columnHelper.accessor(EDITABLE_COLUMN_PREFIX + column.key, {
           header: !_.isEmpty(column.label) ? t(String(column.label)) : undefined,