Skip to content

Added support for custom column width #1477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

Corepex
Copy link
Contributor

@Corepex Corepex commented May 9, 2025

Changes in this pull request

Resolves #1430

Additional info

This pull request introduces enhancements to the grid component by adding support for dynamic column widths based on cell types. It includes changes to the Grid component, updates to the dynamic type grid cell definitions, and new methods for determining default column widths.

Enhancements to Grid Component

  • Added dependency injection for DynamicTypeGridCellRegistry to the Grid component, allowing dynamic grid cell types to define default column widths. (assets/js/src/core/components/grid/grid.tsx)
  • Updated the Grid component to iterate over columns and set their widths based on the getDefaultGridColumnWidth method of the respective dynamic type. (assets/js/src/core/components/grid/grid.tsx)

Dynamic Type Grid Cell Definitions

  • Introduced the getDefaultGridColumnWidth method in the DynamicTypeGridCellAbstract class, enabling each dynamic type to specify default column widths. (assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/dynamic-type-grid-cell-abstract.tsx)
  • Implemented getDefaultGridColumnWidth for various grid cell types with predefined widths:
    • Asset Actions: 100 (dynamic-type-grid-cell-asset-preview.tsx)
    • Asset Link: 350 (dynamic-type-grid-cell-asset-link.tsx)
    • Boolean: 100 (dynamic-type-grid-cell-boolean.tsx)
    • Text: 350 (dynamic-type-grid-cell-text.tsx)
    • Textarea: 400 (dynamic-type-grid-cell-text.tsx)

Object Data-Related Dynamic Types

  • Added getDefaultGridColumnWidth to object data-related types, with widths tailored to specific use cases:
    • Advanced Many-to-Many Relations: 600 (dynamic-type-object-data-advanced-many-to-many-relation.tsx)
    • External Image: 250 (dynamic-type-object-data-external-image.tsx)
    • Geo-related types (Bounds, Point, Polygon, Polyline): 250 each (dynamic-type-object-data-geobounds.tsx, dynamic-type-object-data-geopoint.tsx, dynamic-type-object-data-geopolygon.tsx, dynamic-type-object-data-geopolyline.tsx) [1] [2] [3] [4]

These changes collectively improve the flexibility and usability of the grid component by dynamically adjusting column widths based on the type of data being displayed.

@Corepex Corepex self-assigned this May 9, 2025
@markus-moser markus-moser added this to the next milestone May 9, 2025
@Corepex Corepex requested a review from markus-moser May 13, 2025 08:13
Corepex and others added 11 commits May 14, 2025 12:20
…dth-of-columns-based-on-column-type' into 1430-data-object-grid-default-width-of-columns-based-on-column-type
…dth-of-columns-based-on-column-type' into 1430-data-object-grid-default-width-of-columns-based-on-column-type

# Conflicts:
#	public/build/30ac78b6-e988-4837-afc4-c435c4decc24/main.js
#	public/build/30ac78b6-e988-4837-afc4-c435c4decc24/main.js.LICENSE.txt
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/105.js
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/105.js.LICENSE.txt
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/core-dll.css
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/core-dll.js
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/core-dll.js.LICENSE.txt
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/fonts/Lato-Bold.636be8de.ttf
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/fonts/Lato-Light.c7400fca.ttf
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/fonts/Lato-Regular.9d883d54.ttf
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/images/layers-2x.8f2c4d11.png
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/images/layers.416d9136.png
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/images/marker-icon.2b3e1faf.png
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/images/spritesheet-2x.7ea3a6d4.png
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/images/spritesheet.a4e0eb7a.svg
#	public/build/b5bed491-d48d-4ba8-a903-b4988c7133b9/images/spritesheet.ef32ea2b.png
#	public/build/ccbb8744-2c88-4f6b-aa4e-1d31b0c260ef/vendor.js
#	public/build/ccbb8744-2c88-4f6b-aa4e-1d31b0c260ef/vendor.js.LICENSE.txt
Copy link
Contributor

@markus-moser markus-moser left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did some adjustments. Most topics work already very good now but we should try to do some more adjustments:

  • Please check my comments
  • The encryped field data type should delegete the field width to the original one.
  • Asset metadata fields do for some reason not respect the column width. E.g. a "asset-link" field does not have 350px width but only 150px
  • We should think about a solution for the system fields which use "text". For some of them like type, mime type, class definition etc. 350px is too wide.

But let's do a short discussion about the points. :)

Corepex and others added 13 commits May 19, 2025 10:05
…dth-of-columns-based-on-column-type' into 1430-data-object-grid-default-width-of-columns-based-on-column-type

# Conflicts:
#	assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-adapter/dynamic-type-grid-cell-data-object-adapter.tsx
#	assets/js/src/core/modules/element/dynamic-types/definitions/grid-cell/types/data-object-object-brick/dynamic-type-grid-cell-data-object-adapter.tsx
#	assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-advanced-many-to-many-object-relation.tsx
#	assets/js/src/core/modules/element/dynamic-types/definitions/objects/data-related/types/dynamic-type-object-data-advanced-many-to-many-relation.tsx
…dth-of-columns-based-on-column-type' into 1430-data-object-grid-default-width-of-columns-based-on-column-type
@markus-moser markus-moser removed this from the next milestone May 20, 2025
Copy link

sonarqubecloud bot commented Jun 2, 2025

@markus-moser markus-moser merged commit 4d19abe into 1.x Jun 2, 2025
1 check passed
@markus-moser markus-moser deleted the 1430-data-object-grid-default-width-of-columns-based-on-column-type branch June 2, 2025 07:21
@github-actions github-actions bot locked and limited conversation to collaborators Jun 2, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Data Object Grid] Default width of columns based on column type
2 participants