Unable to reorder columns, even after selecting dnd.reorder

Summary:

In the below Ojet table, unable to reorder the table columns in Live mode even after selecting dnd.reorder

Please need urgent help .. It is to be deployed to PROD asap.

Content (required):

Unable to reorder columns, even after selecting dnd.reorder property as {"columns":"enabled"}

Version (include the version you are using, if applicable):

22.10.1

Code Snippet (add any code snippets that support your topic, if applicable):

<oj-table scroll-policy="loadMoreOnScroll" data="[[ $variables.bomComps ]]"

          class="oj-flex-item oj-sm-12 oj-md-12"

          columns='[{"headerClassName":"oj-typography-bold","headerText":"Action Type","field":"action_type","resizable":"enabled"}

                   ,{"headerClassName":"oj-typography-bold","headerText":"Component","field":"component","resizable":"enabled"}