Added support for custom column width (#1477)

Author: Corepex

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, isNumber } 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
@@ -51,8 +54,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 {
-  }
+  export interface ColumnMeta<TData extends RowData, TValue> extends ColumnMetaType { }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   export interface TableMeta<TData extends RowData> {
@@ -101,6 +103,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 +140,18 @@ export const Grid = ({
     [props.isLoading, props.columns]
   ) as Array<ColumnDef<any>>
 
+  columns.forEach(column => {
+    if (column.meta?.type !== undefined) {
+      if (isNumber(column.size)) {
+        return
+      }
+      const dynamicType = gridCellRegistry.getDynamicType(column.meta.type, false)
+      if (dynamicType?.getDefaultGridColumnWidth !== undefined) {
+        column.size = dynamicType.getDefaultGridColumnWidth(column.meta)
+      }
+    }
+  })
+
   useMemo(() => {
     updateRowSelectionColumn()
   }, [columns, isRowSelectionEnabled, selectedRows])
@@ -251,7 +266,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 }>
@@ -261,16 +276,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/asset/dynamic-type-grid-cell-asset.tsx

@@ -21,4 +21,8 @@ export class DynamicTypeGridCellAsset 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

@@ -13,11 +13,17 @@ import { type AbstractGridCellDefinition, DynamicTypeGridCellAbstract } from '..
 import { injectable } from 'inversify'
 import { CheckboxCell } from '../../components/checkbox/checkbox-cell'
 
+export const DEFAULT_CHECKBOX_COLUMN_WIDTH = 100
+
 @injectable()
 export class DynamicTypeGridCellCheckbox extends DynamicTypeGridCellAbstract {
   readonly id = 'checkbox'
 
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <CheckboxCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (): number | undefined {
+    return DEFAULT_CHECKBOX_COLUMN_WIDTH
+  }
 }

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 { getDefaultGridColumnWidthFromDynamicObjectType } from '@Pimcore/modules/element/dynamic-types/utils/column-helper'
+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 { type AbstractObjectDataDefinition } from '../../../objects/data-related/dynamic-type-object-data-abstract'
+import { defaultFieldWidthValues } from '../../../objects/data-related/providers/field-width/field-width-provider'
 
 @injectable()
 export class DynamicTypeGridCellDataObjectAdapter extends DynamicTypeGridCellAbstract {
@@ -20,4 +24,14 @@ export class DynamicTypeGridCellDataObjectAdapter extends DynamicTypeGridCellAbs
   getGridCellComponent (props: AbstractGridCellDefinition): ReactElement<AbstractGridCellDefinition> {
     return <DataObjectAdapterCell { ...props } />
   }
+
+  getDefaultGridColumnWidth (props: ColumnMeta<any, any>): number | undefined {
+    const type = props?.config?.dataObjectType as string | undefined
+    const objectDataDefinition: AbstractObjectDataDefinition = {
+      ...props.config?.dataObjectConfig.fieldDefinition,
+      defaultFieldWidth: defaultFieldWidthValues
+    }
+
+    return getDefaultGridColumnWidthFromDynamicObjectType(type, objectDataDefinition)
+  }
 }