AP-78 Add grid column resizing (#57)

* Fix path to global provider

* Memorize widgets

* AP-78 Add grid column resizing

assets/js/src/components/editor-tabs/editor-tabs.styles.tsx

@@ -3,6 +3,13 @@ import { createStyles } from 'antd-style'
 export const useStyle = createStyles(({ token, css }) => {
   return {
     editorTabs: css`
+      height: 100%;
+      overflow: hidden;
+
+      .ant-tabs-content-holder {
+        overflow: auto;
+      }
+
       &.ant-tabs .ant-tabs-tab+.ant-tabs-tab {
         margin-left: ${token.paddingSM}px;
         margin-right: ${token.paddingSM}px;

assets/js/src/components/grid/grid.styles.ts

@@ -4,15 +4,49 @@ export const useStyles = createStyles(({ token, css }) => {
   return {
     grid: css`
       table {
-        table-layout: auto;
+        table-layout: fixed;
+        width: auto;
+      }
+
+      th {
+        user-select: none;
+      }
+
+      &.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {
+        border-start-start-radius: 0;
+      }
+
+      &.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {
+        border-start-end-radius: 0;
+      }
+
+      .grid__cell-content {
+        display: block; 
+        width: fit-content;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .ant-table-cell {
+        position: relative;
         border-left: 1px solid #F0F0F0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 
         &:first-of-type {
           border-left: 0;
         }
+
+        &:last-of-type {
+          border-right: 1px solid #F0F0F0;
+        }
+      }
+
+      .ant-table-thead {
+        position: sticky;
+        top: 0;
+        z-index: 1;
       }
     `
   }

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

@@ -1,42 +1,68 @@
 import { useCssComponentHash } from '@Pimcore/modules/ant-design/hooks/use-css-component-hash'
-import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { type ColumnDef, flexRender, getCoreRowModel, useReactTable, type ColumnResizeMode, type TableOptions } from '@tanstack/react-table'
 import React, { useState } from 'react'
 import { useStyles } from './grid.styles'
+import { Resizer } from './resizer/resizer'
 
 export interface GridProps {
   data: any[]
   columns: Array<ColumnDef<any>>
+  resizeable?: boolean
 }
 
 export const Grid = (props: GridProps): React.JSX.Element => {
-  const { columns } = props
+  const [columns] = useState(props.columns)
   const [data] = useState(props.data)
   const hashId = useCssComponentHash('table')
   const { styles } = useStyles()
+  const [columnResizeMode] = useState<ColumnResizeMode>('onEnd')
 
-  const table = useReactTable({
+  const tableProps: TableOptions<any> = {
     data,
     columns,
     getCoreRowModel: getCoreRowModel()
-  })
+  }
+
+  if (props.resizeable === true) {
+    tableProps.columnResizeMode = columnResizeMode
+  }
+
+  const table = useReactTable(tableProps)
 
   return (
     <div className={['ant-table-wrapper', hashId, styles.grid].join(' ')}>
       <div className="ant-table ant-table-small">
         <div className='ant-table-container'>
           <div className='ant-table-content'>
-            <table>
+            <table style={{ width: table.getCenterTotalSize() }}>
               <thead className='ant-table-thead'>
                 {table.getHeaderGroups().map(headerGroup => (
                   <tr key={headerGroup.id}>
                     {headerGroup.headers.map(header => (
-                      <th className='ant-table-cell' key={header.id} style={{ width: header.column.getSize() }}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                      <th
+                        key={header.id}
+                        className='ant-table-cell'
+                        style={
+                          {
+                            width: header.column.getSize(),
+                            maxWidth: header.column.getSize()
+                          }
+                        }
+                      >
+                        <div className='grid__cell-content'>
+                         {flexRender(
+                           header.column.columnDef.header,
+                           header.getContext()
+                         )}
+                        </div>
+
+                        {props.resizeable === true && header.column.getCanResize() && (
+                          <Resizer
+                            onMouseDown={header.getResizeHandler()}
+                            isResizing={header.column.getIsResizing()}
+                            table={table}
+                          />
+                        )}
                       </th>
                     ))}
                   </tr>
@@ -46,8 +72,26 @@ export const Grid = (props: GridProps): React.JSX.Element => {
                 {table.getRowModel().rows.map(row => (
                   <tr className='ant-table-row' key={row.id}>
                     {row.getVisibleCells().map(cell => (
-                      <td className='ant-table-cell' key={cell.id} style={{ width: cell.column.getSize() }} >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      <td
+                        key={cell.id}
+                        className='ant-table-cell'
+                        style={
+                          {
+                            width: cell.column.getSize(),
+                            maxWidth: cell.column.getSize()
+                          }
+                        }
+                      >
+                        <div className='grid__cell-content'>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </div>
+
+                        {props.resizeable === true && (
+                          <Resizer
+                            isResizing={cell.column.getIsResizing()}
+                            table={table}
+                          />
+                        )}
                       </td>
                     ))}
                   </tr>

assets/js/src/components/grid/resizer/resizer.styles.tsx

@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ token, css }) => {
+  return {
+    resizer: css`
+      &.grid__resizer {
+        position: absolute;
+        right: -4px;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        z-index: 1;
+        background-color: transparent;
+
+        &--resizing {
+          background-color: ${token.colorPrimary};
+          width: 2px;
+          right: -1px;
+        }
+
+        &--hoverable {
+          cursor: col-resize;
+        }
+      }
+    `
+  }
+})

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useStyles } from './resizer.styles'
+import { type Table } from '@tanstack/react-table'
+
+interface ResizerProps {
+  onMouseDown?: (event: unknown) => void
+  isResizing: boolean
+  table: Table<any>
+}
+
+const Resizer = (props: ResizerProps): React.JSX.Element => {
+  const { styles } = useStyles()
+  const classes = ['grid__resizer']
+
+  classes.push(styles.resizer)
+
+  if (props.onMouseDown !== undefined) {
+    classes.push('grid__resizer--hoverable')
+  }
+
+  if (props.isResizing) {
+    classes.push('grid__resizer--resizing')
+  }
+
+  return (
+    <div
+      onMouseDown={props.onMouseDown}
+      className={classes.join(' ')}
+      style={{
+        transform:
+          props.isResizing
+            ? `translateX(${
+                (props.table.options.columnResizeDirection ===
+                'rtl'
+                  ? -1
+                  : 1) *
+                (props.table.getState().columnSizingInfo
+                  .deltaOffset ?? 0)
+              }px)`
+            : ''
+      }}
+    />
+  )
+}
+
+export { Resizer }

assets/js/src/modules/asset/types/folder/editor-tabs/tabs/list-container.tsx

@@ -1,9 +1,10 @@
 import { FormattedDate } from '@Pimcore/components/formatted-date/formatted-date'
 import { Grid } from '@Pimcore/components/grid/grid'
-import { type AssetJsonldAssetReadDependencyReadPropertyRead, useApiAssetsGetCollectionQuery } from '@Pimcore/modules/asset/asset-api-slice.gen'
+import { type AssetJsonldAssetReadDependencyReadPropertyReadRead, useApiAssetsGetCollectionQuery } from '@Pimcore/modules/asset/asset-api-slice.gen'
 import { AssetContext } from '@Pimcore/modules/asset/asset-container'
 import { ImageView } from '@Pimcore/modules/asset/grid/columns/views/image-view'
 import { createColumnHelper } from '@tanstack/react-table'
+import { Tag } from 'antd'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -22,12 +23,19 @@ const ListContainer = (): React.JSX.Element => {
   }
 
   const assets = data['hydra:member']
-  const columnHelper = createColumnHelper<AssetJsonldAssetReadDependencyReadPropertyRead>()
+  const columnHelper = createColumnHelper<AssetJsonldAssetReadDependencyReadPropertyReadRead>()
 
   const columns = [
     columnHelper.accessor('fullPath', {
       header: t('asset.asset-editor-tabs.list.columns.preview'),
-      cell: info => <ImageView src={info.getValue() as string} />,
+      cell: info => {
+        if (info.row.original.type !== 'image') {
+          return <></>
+        }
+
+        return <ImageView src={info.getValue()!} />
+      },
+      id: 'preview',
       size: 110
     }),
 
@@ -39,6 +47,13 @@ const ListContainer = (): React.JSX.Element => {
       header: t('asset.asset-editor-tabs.list.columns.type')
     }),
 
+    columnHelper.accessor('fullPath', {
+      header: t('asset.asset-editor-tabs.list.columns.fullPath'),
+      cell: info => <Tag bordered={false} color='processing'>{info.getValue()!}</Tag>,
+      id: 'fullPath',
+      size: 300
+    }),
+
     columnHelper.accessor('creationDate', {
       header: t('asset.asset-editor-tabs.list.columns.creationDate'),
       cell: info => <FormattedDate timestamp={info.getValue() as number * 1000} />
@@ -51,7 +66,7 @@ const ListContainer = (): React.JSX.Element => {
   ]
 
   return (
-    <Grid data={assets} columns={columns} />
+    <Grid data={assets} columns={columns} resizeable />
   )
 }
 

assets/js/src/modules/widget-manager/utils/widget-registry.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from 'react'
+import { type ComponentType, memo } from 'react'
 
 export interface Widget {
   name: string
@@ -8,7 +8,12 @@ export interface Widget {
 export const widgets: Widget[] = []
 
 export const registerWidget = (widget: Widget): void => {
-  widgets.push(widget)
+  const newWidget = {
+    ...widget,
+    component: memo(widget.component)
+  }
+
+  widgets.push(newWidget)
 }
 
 export const getWidget = (name: string): Widget | undefined => {

public/build/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "main": {
       "js": [
-        "/bundles/pimcorestudioui/build/331.7d193447.js",
-        "/bundles/pimcorestudioui/build/main.eddc6dd8.js"
+        "/bundles/pimcorestudioui/build/70.4bade3d2.js",
+        "/bundles/pimcorestudioui/build/main.efd91429.js"
       ],
       "css": [
         "/bundles/pimcorestudioui/build/main.3691bcd8.css"

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "bundles/pimcorestudioui/build/main.css": "/bundles/pimcorestudioui/build/main.3691bcd8.css",
-  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.eddc6dd8.js",
+  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.efd91429.js",
   "bundles/pimcorestudioui/build/58.9cf6e23a.js": "/bundles/pimcorestudioui/build/58.9cf6e23a.js",
   "bundles/pimcorestudioui/build/678.c220b736.js": "/bundles/pimcorestudioui/build/678.c220b736.js",
   "bundles/pimcorestudioui/build/625.b487b20e.js": "/bundles/pimcorestudioui/build/625.b487b20e.js",
@@ -25,7 +25,7 @@
   "bundles/pimcorestudioui/build/732.864ddc17.js": "/bundles/pimcorestudioui/build/732.864ddc17.js",
   "bundles/pimcorestudioui/build/476.86b891f8.js": "/bundles/pimcorestudioui/build/476.86b891f8.js",
   "bundles/pimcorestudioui/build/524.94aec92e.js": "/bundles/pimcorestudioui/build/524.94aec92e.js",
-  "bundles/pimcorestudioui/build/331.7d193447.js": "/bundles/pimcorestudioui/build/331.7d193447.js",
+  "bundles/pimcorestudioui/build/70.4bade3d2.js": "/bundles/pimcorestudioui/build/70.4bade3d2.js",
   "bundles/pimcorestudioui/build/fonts/Lato-Light.ttf": "/bundles/pimcorestudioui/build/fonts/Lato-Light.c7400fca.ttf",
   "bundles/pimcorestudioui/build/fonts/Lato-Regular.ttf": "/bundles/pimcorestudioui/build/fonts/Lato-Regular.9d883d54.ttf",
   "bundles/pimcorestudioui/build/fonts/Lato-Bold.ttf": "/bundles/pimcorestudioui/build/fonts/Lato-Bold.636be8de.ttf"