From f399f4921edb7735369e9d8abba95eefb53cfb4b Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 15 Feb 2024 16:51:13 +0100
Subject: [PATCH] fix(frontend): add header when downloading a CSV (#3228)

---
 .../lib/components/table/AutoDataTable.svelte | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/table/AutoDataTable.svelte b/frontend/src/lib/components/table/AutoDataTable.svelte
index 84351a8f16..2cbd6bcf2d 100644
--- a/frontend/src/lib/components/table/AutoDataTable.svelte
+++ b/frontend/src/lib/components/table/AutoDataTable.svelte
@@ -147,18 +147,24 @@
 					color="light"
 					startIcon={{ icon: Download }}
 					on:click={() => {
-						const csv = structuredObjects
-							.filter(({ _id }) => {
-								if (selection.length > 0) {
-									return selection.includes(_id)
-								} else {
-									return true
-								}
-							})
-							.map(({ rowData }) => Object.values(rowData).join(','))
-							.join('\n')
+						const headers =
+							structuredObjects.length > 0
+								? Object.keys(structuredObjects[0].rowData).join(',')
+								: ''
+						const csvContent = [
+							headers, // Add headers as the first row
+							...structuredObjects
+								.filter(({ _id }) => {
+									if (selection.length > 0) {
+										return selection.includes(_id)
+									} else {
+										return true
+									}
+								})
+								.map(({ rowData }) => Object.values(rowData).join(','))
+						].join('\n')
 
-						const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+						const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
 						const url = URL.createObjectURL(blob)
 						const link = document.createElement('a')
 						link.setAttribute('href', url)