Respecting width/height settings and scrollbar in table related data …

…types (#879)

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

@@ -30,12 +30,16 @@ import { Box } from '@Pimcore/components/box/box'
 import { useFormModal } from '@Pimcore/components/modal/form-modal/hooks/use-form-modal'
 import cn from 'classnames'
 import { useDownload } from '@Pimcore/modules/asset/actions/download/use-download'
+import { toCssDimension } from '@Pimcore/utils/css'
+import { Content } from '@Pimcore/components/content/content'
 
 interface ManyToManyRelationGridProps {
   value?: ManyToManyRelationValue | null
   deleteItem: (id: number, type: string) => void
   assetInlineDownloadAllowed: boolean
   disabled?: boolean
+  width: number | string | null
+  height: number | string | null
 }
 
 export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid (props: ManyToManyRelationGridProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
@@ -170,12 +174,25 @@ export const ManyToManyRelationGrid = forwardRef(function ManyToManyRelationGrid
       className={ cn(...getStateClasses()) }
       ref={ ref }
     >
-      <Grid
-        autoWidth
-        columns={ columns }
-        data={ getDataArray() }
-        resizable
-      />
+      <Content
+        style={ {
+          width: toCssDimension(props.width),
+          height: toCssDimension(props.height)
+        } }
+      >
+        <div
+          style={ {
+            maxWidth: 'calc(100% - 2px)'
+          } }
+        >
+          <Grid
+            autoWidth
+            columns={ columns }
+            data={ getDataArray() }
+            resizable
+          />
+        </div>
+      </Content>
     </div>
   )
 })

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

@@ -31,6 +31,8 @@ import {
   dndIsValidData,
   type IRelationAllowedTypesDataComponent
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/relations/allowed-types'
+import { toCssDimension } from '@Pimcore/utils/css'
+import { Content } from '@Pimcore/components/content/content'
 
 export interface ManyToManyRelationClassDefinitionProps {
   assetUploadPath?: string | null
@@ -69,19 +71,27 @@ export const ManyToManyRelation = (props: ManyToManyRelationProps): React.JSX.El
           assetInlineDownloadAllowed={ props.assetInlineDownloadAllowed ?? false }
           deleteItem={ deleteItem }
           disabled={ props.disabled }
+          height={ props.height }
           value={ displayedValue }
+          width={ props.width }
         />
       </Droppable>
-      <ManyToManyRelationToolbar
-        addAssets={ addAssets }
-        allowClear={ props.allowToClearRelation && props.disabled !== true }
-        assetUploadPath={ props.assetUploadPath }
-        empty={ () => { setValue(null) } }
-        enableUpload={ props.assetsAllowed === true && props.disabled !== true }
-        onSearch={ onSearch }
-        uploadMaxItems={ maxRemainingItems !== undefined && maxRemainingItems > 0 ? maxRemainingItems : (props.maxItems ?? undefined) }
-        uploadShowMaxItemsError={ maxRemainingItems !== undefined && maxRemainingItems <= 0 }
-      />
+      <Content
+        style={ {
+          width: toCssDimension(props.width)
+        } }
+      >
+        <ManyToManyRelationToolbar
+          addAssets={ addAssets }
+          allowClear={ props.allowToClearRelation && props.disabled !== true }
+          assetUploadPath={ props.assetUploadPath }
+          empty={ () => { setValue(null) } }
+          enableUpload={ props.assetsAllowed === true && props.disabled !== true }
+          onSearch={ onSearch }
+          uploadMaxItems={ maxRemainingItems !== undefined && maxRemainingItems > 0 ? maxRemainingItems : (props.maxItems ?? undefined) }
+          uploadShowMaxItemsError={ maxRemainingItems !== undefined && maxRemainingItems <= 0 }
+        />
+      </Content>
     </>
   )
 }

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/structured-table/components/grid/grid.tsx

@@ -52,7 +52,7 @@ export const StructuredTableGrid = (props: StructuredTableGridProps): React.JSX.
   }
 
   const applyColWidth = (colWidth?: number | null): number => {
-    return !_.isEmpty(colWidth) && colWidth! > 0 ? colWidth! : 100
+    return Number(colWidth) > 0 ? Number(colWidth) : 100
   }
 
   const columns: Array<ColumnDef<any>> = [
@@ -68,12 +68,15 @@ export const StructuredTableGrid = (props: StructuredTableGridProps): React.JSX.
         size: applyColWidth(col.width),
         meta: {
           type: mapColType(col.type),
-          editable: props.disabled !== true
+          editable: props.disabled !== true,
+          autoWidth: true
         }
       })
     )
   })
 
+  console.log('columns', columns, props.cols)
+
   const rows = props.rows.map((row) => {
     const rowData = {
       rowLabel: t(row.label)

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/structured-table/structured-table.tsx

@@ -20,6 +20,8 @@ import { IconButton } from '@Pimcore/components/icon-button/icon-button'
 import { Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { useFormModal } from '@Pimcore/components/modal/form-modal/hooks/use-form-modal'
+import { toCssDimension } from '@Pimcore/utils/css'
+import { Content } from '@Pimcore/components/content/content'
 
 export interface StructuredTableProps {
   disabled?: boolean
@@ -29,6 +31,8 @@ export interface StructuredTableProps {
   labelFirstCell: string | null
   value?: StructuredTableValue | null
   onChange?: (value: StructuredTableValue | null) => void
+  width?: number | string | null
+  height?: number | string | null
 }
 
 export interface StructuredTableRow {
@@ -98,17 +102,24 @@ export const StructuredTable = (props: StructuredTableProps): React.JSX.Element
 
   return (
     <>
-      <StructuredTableGrid
-        castColumnValue={ castColumnValue }
-        cols={ props.cols }
-        disabled={ props.disabled }
-        key={ key }
-        labelFirstCell={ props.labelFirstCell }
-        labelWidth={ props.labelWidth }
-        onChange={ onChange }
-        rows={ props.rows }
-        value={ value }
-      />
+      <Content
+        style={ {
+          width: toCssDimension(props.width),
+          height: toCssDimension(props.height)
+        } }
+      >
+        <StructuredTableGrid
+          castColumnValue={ castColumnValue }
+          cols={ props.cols }
+          disabled={ props.disabled }
+          key={ key }
+          labelFirstCell={ props.labelFirstCell }
+          labelWidth={ props.labelWidth }
+          onChange={ onChange }
+          rows={ props.rows }
+          value={ value }
+        />
+      </Content>
       { props.disabled !== true && (
       <Box padding="extra-small">
         <Tooltip title={ t('empty') }>

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/table/table.tsx

@@ -22,6 +22,8 @@ import { useTableValue, type TableValue } from './hooks/use-table-value'
 import { getCopyData, getPasteData } from './utils/copy-paste'
 import { ButtonGroup } from '@Pimcore/components/button-group/button-group'
 import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
+import { Content } from '@Pimcore/components/content/content'
+import { toCssDimension } from '@Pimcore/utils/css'
 
 export interface TableProps {
   rows: number | null
@@ -33,6 +35,8 @@ export interface TableProps {
   rowsFixed?: boolean
   columnConfigActivated?: boolean
   columnConfig?: Array<{ key: string, label: string }>
+  width?: number | string | null
+  height?: number | string | null
 }
 
 export const Table = (props: TableProps): React.JSX.Element => {
@@ -194,17 +198,24 @@ export const Table = (props: TableProps): React.JSX.Element => {
 
   return (
     <>
-      <TableGrid
-        cols={ cols }
-        columnConfig={ props.columnConfig }
-        columnConfigActivated={ columnConfigActivated }
-        disabled={ props.disabled }
-        key={ key }
-        onActiveCellChange={ setActiveCell }
-        onChange={ setValue }
-        rows={ rows }
-        value={ value }
-      />
+      <Content
+        style={ {
+          width: toCssDimension(props.width === 320 ? undefined : props.width), // the default table width does not make sense in studio, 100% width is better
+          height: toCssDimension(props.height)
+        } }
+      >
+        <TableGrid
+          cols={ cols }
+          columnConfig={ props.columnConfig }
+          columnConfigActivated={ columnConfigActivated }
+          disabled={ props.disabled }
+          key={ key }
+          onActiveCellChange={ setActiveCell }
+          onChange={ setValue }
+          rows={ rows }
+          value={ value }
+        />
+      </Content>
       <Box padding="extra-small">
         <ButtonGroup items={ items } />
       </Box>

public/build/01b67b86-7f5e-4c02-91c0-549435ee0fa8/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/01b67b86-7f5e-4c02-91c0-549435ee0fa8/vendor.js"
+      ]
+    }
+  }
+}

public/build/01b67b86-7f5e-4c02-91c0-549435ee0fa8/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/01b67b86-7f5e-4c02-91c0-549435ee0fa8/vendor.js": "/bundles/pimcorestudioui/build/01b67b86-7f5e-4c02-91c0-549435ee0fa8/vendor.js"
+}