[5699] Preserve column order and visibility during table data CSV export

Bug: #5699
Signed-off-by: Florian ROUËNÉ <[email protected]>

Author: frouene

CHANGELOG.adoc

@@ -134,7 +134,7 @@ Use `org.eclipse.emf.ecore.util.ECrossReferenceAdapter.getCrossReferenceAdapter(
 - https://github.com/eclipse-sirius/sirius-web/issues/5598[#5598] [diagram] Fix a performance issue with how label where rendered when dragging the viewport
 - https://github.com/eclipse-sirius/sirius-web/issues/5797[#5797] [sirius-web] Make the _New Project_ command use a Sirius Web icon instead of a Papaya icon
 The command has also been renamed _Blank project_ to reflect what it currently does (template and blank project creation haven't been unified yet).
-
+- https://github.com/eclipse-sirius/sirius-web/issues/5699[#5699] [table] Preserve column order and visibility during CSV export
 
 === New Features
 

packages/tables/frontend/sirius-components-tables/src/actions/ExportDataButton.tsx

@@ -57,13 +57,21 @@ const csvConfig = mkConfig({
   useKeysAsHeaders: true,
 });
 
-export const handleExportData = (table: GQLTable, getCellLabel: (cell: GQLCell) => string) => {
+const handleExportData = (table: GQLTable) => {
+  const visibleColumns = table.columns.filter((column) => !column.hidden);
+  const visibleColumnIds = new Set(visibleColumns.map((col) => col.id));
+  const columnOrder = {};
+  visibleColumns.forEach((column, index) => (columnOrder[column.id] = index));
+
   const columnIdToLabel = {};
-  table.columns.forEach((column) => (columnIdToLabel[column.id] = column.headerLabel));
+  visibleColumns.forEach((column) => (columnIdToLabel[column.id] = column.headerLabel));
 
   const csvData: CsvData[] = table.lines.map((line) => {
     const csvDatum: CsvData = { ['_row_header_']: `${line.headerIndexLabel} ${line.headerLabel}` };
-    line.cells.forEach((cell) => (csvDatum[columnIdToLabel[cell.columnId]] = getCellLabel(cell)));
+    const sortedVisibleCells = [...line.cells]
+      .filter((cell) => visibleColumnIds.has(cell.columnId))
+      .sort((a, b) => columnOrder[a.columnId] - columnOrder[b.columnId]);
+    sortedVisibleCells.forEach((cell) => (csvDatum[columnIdToLabel[cell.columnId]] = getCellLabel(cell)));
     return csvDatum;
   });
 
@@ -73,7 +81,7 @@ export const handleExportData = (table: GQLTable, getCellLabel: (cell: GQLCell)
 
 export const ExportDataButton = ({ table }: ExportDataButtonProps) => {
   return (
-    <MenuItem onClick={() => handleExportData(table, getCellLabel)}>
+    <MenuItem onClick={() => handleExportData(table)}>
       <ListItemIcon>
         <FileDownloadIcon fontSize="small" />
       </ListItemIcon>