feat: enable setting custom column order by visibleColumns

[taefi]

Description

If the user define a custom column and gives it a unique key, the same key can be used in visibleColumns props to set its order of appearance among the columns:

<AutoGrid 
    service={...} 
    model={...} 
    visibleColumns={['fullName', 'gender', 'email', 'vip', 'birthDate', 'shiftStart']}
    customColumns={[
        <GridColumn key="fullName" autoWidth renderer={FullNameRenderer}></GridColumn>,
    ]}
/>,

In case the visibleColumns property is absent, the custom columns would be added at the end.

In the presence of visibleColumns, only those custom columns would appear in the grid that their key is listed in the visibleColumns.

Fixes #1448

Type of change

• Bugfix
• Feature

Checklist

• I have read the contribution guide: https://vaadin.com/docs/latest/guide/contributing/overview/
• I have added a description following the guideline.
• The issue is created in the corresponding repository and I have referenced it.
• I have added tests to ensure my change is effective and works as intended.
• New and existing tests are passing locally with my change.
• I have performed self-review and corrected misspellings.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ac69280) 93.70% compared to head (c555e95) 93.72%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1739      +/-   ##
==========================================
+ Coverage   93.70%   93.72%   +0.01%     
==========================================
  Files          51       51              
  Lines        3259     3266       +7     
  Branches      448      450       +2     
==========================================
+ Hits         3054     3061       +7     
  Misses        172      172              
  Partials       33       33              

Flag	Coverage Δ
unittests	93.72% <100.00%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cromoteca]

I like the idea. I'm not sure that custom columns without a key are retained. They should still find a place at the end of the list.

[taefi]

I like the idea. I'm not sure that custom columns without a key are retained. They should still find a place at the end of the list.

With 2.4.0.beta2, custom columns without a key are rendered at the end, however, react is complaining about the elements without a key. Unless, we come up with some automatic wrapping of each GridColumn (provided by the user) in an imaginary component such as AutoGridColumn that provides the key, the user needs to provide the key. This is one of the reasons I based my solution on the keys to minimize the effort for now.

We can change the implementation to make sure custom columns will end up at the end, in case the visibleColumns was absent. Supporting a mixture of naming some custom columns in visibleColumns to specify the order and rendering the unnamed ones in the end may both confusing for the users and unnecessarily more complex to maintain (Just my opinion).

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

Concerns have been addressed