refactor: Enhance label display and drag-and-drop functionality in table configuration

- Updated the InteractiveScreenViewer and InteractiveScreenViewerDynamic components to include label positioning and size adjustments based on horizontal label settings.
- Improved the DynamicComponentRenderer to handle label display logic more robustly, allowing for string values in addition to boolean.
- Introduced drag-and-drop functionality in the TableListConfigPanel for reordering selected columns, enhancing user experience and flexibility in column management.
- Refactored the display name resolution logic to prioritize available column labels, ensuring accurate representation in the UI.

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -1292,7 +1292,22 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   ) : null;
 
   const componentToRender = needsExternalLabel
-    ? { ...splitAdjustedComponent, style: { ...splitAdjustedComponent.style, labelDisplay: false } }
+    ? {
+        ...splitAdjustedComponent,
+        style: {
+          ...splitAdjustedComponent.style,
+          labelDisplay: false,
+          labelPosition: "top" as const,
+          ...(isHorizLabel ? { width: "100%", height: "100%" } : {}),
+        },
+        ...(isHorizLabel ? {
+          size: {
+            ...splitAdjustedComponent.size,
+            width: undefined as unknown as number,
+            height: undefined as unknown as number,
+          },
+        } : {}),
+      }
     : splitAdjustedComponent;
 
   return (