Enhancement: Add column width setting

[Koc]

This PR adds possibility to configure column width on a table level. Closes #35

🔍 Preview

Configure width:

Column with fixed width:

TODO:

• Add extra texts

[enjeck]

• Add extra texts

I don't think we need frontend tests for this. Unless you meant something else?

[Koc]

@enjeck I've added Behat tests to make sure that we able to store value of the new property and fetch it back.

PR rebased, conflicts solved, tests added. So, please, review

[AIlkiv]

Thanks for the PR. I left a few comments.

[silverkszlo]

In EditColumn.vue, we create a shallow copy of this.column in data() using

editColumn: Object.assign({}, this.column)

As a result, editColumn.customSettings still points to the same object as this.column.customSettings, so any changes to it will also affect the original prop. Since props should be read-only, we should instead create a deep copy, for example:

editColumn: JSON.parse(JSON.stringify(this.column))

This ensures that modifying editColumn does not mutate the original prop. See also: https://stackoverflow.com/a/52467000 and here: https://dev.to/hkp22/javascript-shallow-copy-vs-deep-copy-examples-and-best-practices-3k0a

[silverkszlo]

Looks nice, thanks for that! I’ve only reviewed the frontend code and suggested a few small changes. I’ve tested the UI in Firefox and Chromium, and it generally looks good, with just a few minor issues noted in the comments.

[Koc]

@silverkszlo I've updated PR according to your suggestions.

Min width changed to 40 50px. Extracted constants for min/max values. Used json decode for deep copy.

Placehoder contains boundaries

Extracted separate property

[Koc]

@enjeck @blizzz please review

[enjeck]

Also, should we consider how these fixed widths would be like on mobile devices? Might run into a responsiveness issue

[Koc]

Right now it looks acceptable. Here an example with a columns that have width respectfully 50 and 200 pixels.

to be honest I don't know what to improve here. I'm not a profy in FE development 🤷‍♂️ . Feel free to suggest code snippets or just commit in current branch.

[enjeck]

Looks good to me!

[enjeck]

Great, thank you so much!