fix(AnalyticalTable): Always render selection column as first column

Allow disable reordering per column level by setting `canReorder` to false.

Closes #311

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -81,13 +81,10 @@ const styles = ({ parameters }: JSSTheme) => ({
 
 const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'TableColumnHeader' });
 
-export /**
- * <code>import { ColumnHeader } from '@ui5/webcomponents-react/lib/ColumnHeader';</code>
- */
 /**
  * <code>import { ColumnHeader } from '@ui5/webcomponents-react/lib/ColumnHeader';</code>
  */
-const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
+export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) => {
   const classes = useStyles(props);
 
   const {

packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx

@@ -15,6 +15,7 @@ const defaultFilterMethod = (filter, row) => {
 export const DefaultColumn = {
   Filter: DefaultFilterComponent,
   canResize: true,
+  canReorder: true,
   minWidth: DEFAULT_COLUMN_WIDTH,
   vAlign: VerticalAlign.Middle,
   Aggregated: Aggregated,

packages/main/src/components/AnalyticalTable/hooks/useDragAndDrop.ts

@@ -5,7 +5,7 @@ const getColumnId = (column) => {
   return typeof column.accessor === 'string' ? column.accessor : column.id;
 };
 
-export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo) => {
+export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo, columns: any[]) => {
   const { onColumnsReordered } = props;
 
   const [dragOver, setDragOver] = useState('');
@@ -37,19 +37,19 @@ export const useDragAndDrop = (props, setColumnOrder, columnOrder, resizeInfo) =
       const draggedColId = e.dataTransfer.getData('colId');
       if (droppedColId === draggedColId) return;
 
-      const internalColumnOrder = columnOrder.length > 0 ? columnOrder : props.columns.map((col) => getColumnId(col));
+      const internalColumnOrder = columnOrder.length > 0 ? columnOrder : columns.map((col) => getColumnId(col));
       const droppedColIdx = internalColumnOrder.findIndex((col) => col === droppedColId);
       const draggedColIdx = internalColumnOrder.findIndex((col) => col === draggedColId);
 
       const tempCols = [...internalColumnOrder];
       tempCols.splice(droppedColIdx, 0, tempCols.splice(draggedColIdx, 1)[0]);
       setColumnOrder(tempCols);
 
-      const columnsNewOrder = tempCols.map((tempColId) => props.columns.find((col) => getColumnId(col) === tempColId));
+      const columnsNewOrder = tempCols.map((tempColId) => columns.find((col) => getColumnId(col) === tempColId));
       onColumnsReordered(
         Event.of(null, e, {
           columnsNewOrder,
-          column: props.columns[draggedColIdx]
+          column: columns[draggedColIdx]
         })
       );
     },

packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

@@ -34,6 +34,7 @@ export const useRowSelectionColumn: PluginHook<{}> = (hooks) => {
         groupable: false,
         filterable: false,
         disableResizing: true,
+        canReorder: false,
         width: 36,
         minWidth: 36,
         // The header can use the table's getToggleAllRowsSelectedProps method

packages/main/src/components/AnalyticalTable/index.tsx

@@ -189,6 +189,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     rows,
     prepareRow,
     state: tableState,
+    columns: tableInternalColumns,
     setColumnOrder,
     dispatch,
     totalColumnsWidth,
@@ -320,7 +321,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     props,
     setColumnOrder,
     tableState.columnOrder,
-    tableState.columnResizing
+    tableState.columnResizing,
+    tableInternalColumns
   );
 
   const passThroughProps = usePassThroughHtmlProps(props);
@@ -356,7 +358,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
                       onDragEnd={handleOnDragEnd}
                       dragOver={column.id === dragOver}
                       column={column}
-                      isDraggable={!isTreeTable}
+                      isDraggable={!isTreeTable && column.canReorder}
                     >
                       {column.render('Header')}
                     </ColumnHeader>