Column Ordering in Grouped table columns.

[DarshanLQ]

How would I use dnd column ordering for the table columns which are nested or grouped.

columnHelper.group({
        id: "Characteristics",
        header: () => "Characteristics",
      
        columns: [
          columnHelper.accessor("Color", {
            id: "Color",
            header: "Color",
            cell: (info) => {
              

              return info.getValue();
            },
         
          }),
          columnHelper.accessor("Clarity", {
            id: "Clarity",
            header: "Clarity", 
            cell: (info) => {
            
              return info.getValue();
            },
          
          }),
          columnHelper.accessor("Cut", {
            id: "Cut",
            header: "Cut", 
            cell: (info) => {
             

              return info.getValue();
            },
           
          }),
          columnHelper.accessor("Polish", {
            id: "Polish",
            header: "Polish",
            cell: (info) => {
              

              return info.getValue();
            },
       
          }),
         
        ],
      }),

How would I do achieve column ordering in the grouped columns?
The example in docs shows reordering for non-grouped columns not for grouped columns.

Thanks!

[Gokul-Nath-27]

Do any one has a solution for the above, the column reordering not working for grouped columns.