+
+
+ ]}
+ />
+ );
+
const renderDataListItem = (column: ListManagerItem & { id: string }, index: number) => (
- handleChange(column.key)}
- isDisabled={column.isUntoggleable}
- ouiaId={`${ouiaId}-column-${index}-checkbox`}
- id={`${ouiaId}-column-${index}-checkbox`}
- aria-labelledby={`${ouiaId}-column-${index}-label`}
- />
-
-
-
- ]}
- />
+ {renderColumnCheck(column, index)}
+ {renderColumnCells(column, index)}
);
+ const renderDraggableDataListItem = (column: ListManagerItem & { id: string }, index: number) => (
+ <>
+
+ {renderColumnCheck(column, index, true)}
+
+ {renderColumnCells(column, index)}
+ >
+ );
+
return (
<>
@@ -152,7 +171,7 @@ const ListManager: FunctionComponent = (
{enableDragDrop ? (
({ id: column.key, content: renderDataListItem(column, index) }))}
+ items={currentColumns.map((column, index) => ({ id: column.key, content: renderDraggableDataListItem(column, index) }))}
onDrop={onDrag}
overlayProps={{ isCompact: true }}
>