feat(platform): move the column reordering button in the list item representing the column

[shawchandankumar]

Currently, the column reorder button is in the personalization dialog toolbar, which doesn't clearly show which of the following list items is active. By moving the reordering buttons on an individual list item whichever list item is currently active, it shows the reordering buttons for that particular list item.

Closes #12175

Before:

After:

[netlify[bot]]

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	489f53e1d349b82bc420fa408d91ba0027d123aa
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-ngx/deploys/66cf5c1dfe00000008dc6308
😎 Deploy Preview	https://deploy-preview-12300--fundamental-ngx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 489f53e):

https://fundamental-ngx-gh--pr12300-feat-fdp-table-toolb-npllgviv.web.app

_{(expires Sat, 31 Aug 2024 17:23:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 41b993ee8e451bd7c6770b342ce142dc886eacff}

[khotcholava]

@shawchandankumar The functionality differs from the UI5 implementation of the personalization table. In UI5, sorting arrows are visible on hover, while in your version, the arrows only appear when a row is selected. As a result, column sorting is not possible without re-selecting the row in your implementation.

[mikerodonnell89]

Looking better but why does the move-row-up button lose focus after pressing enter?

[shawchandankumar]

Looking better but why does the move-row-up button lose focus after pressing enter?

It's because of rendering differently after a change I believe. In move down button it's not happening

[shawchandankumar]

Looking better but why does the move-row-up button lose focus after pressing enter?

@mikerodonnell89 Is it good now?