Add CSV support to Table component

packs/Core.elementsdevpack/components/com.realmacsoftware.table/hooks.source.js

@@ -1,8 +1,42 @@
+const parseCSV = (csvString) => {
+    const lines = csvString.split('\n').filter((line) => line.trim().length > 0);
+    const rows = [];
+    const headers = [];
+
+    lines.forEach((line, index) => {
+        const cells = line.split(',').map((cell) => cell.trim());
+        if (index === 0) {
+            headers.push(...cells);
+        } else {
+            rows.push(cells);
+        }
+    });
+
+    return { headers, rows };
+};
+
+const fetchCSV = async (url) => {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return await response.text();
+    } catch (error) {
+        console.error('Error fetching CSV:', error);
+        return '';
+    }
+};
+
 const transformHook = (rw) => {
     const {
         globalID,
         rowCount,
         showHeader,
+        dataSource,
+        csvResource,
+        csvUrl,
+        csvFirstRowHeader,
         // Header styling
         headerBackground,
         // Header cells
@@ -41,16 +75,57 @@ const transformHook = (rw) => {
     const { id } = rw.node;
     const { columns } = rw.collections;
 
-    // Build rows array from rowCount
-    const count = Math.max(1, parseInt(rowCount) || 3);
-    const rows = Array.from({ length: count }, (_, i) => ({ index: i }));
+    let processedColumns = [];
+    let rows = [];
+
+    if (dataSource === 'csv') {
+        let csvData = '';
+        if (csvResource && csvResource.url) {
+            csvData = csvResource.url;
+        } else if (csvUrl) {
+            csvData = csvUrl;
+        }
+
+        if (csvData) {
+            const parsed = parseCSV(csvData);
+            const usesFirstRowAsHeader = csvFirstRowHeader === true || csvFirstRowHeader === 'true';
 
-    // Process columns to include per-column width classes (respects collection order)
-    const processedColumns = columns?.map((col, index) => ({
-        ...col,
-        widthClass: col.columnWidth || "",
-        index,
-    })) || [];
+            const columnLabels = usesFirstRowAsHeader ? parsed.headers : [];
+            processedColumns = columnLabels.map((label, index) => ({
+                title: label || `Column ${index + 1}`,
+                columnWidth: '',
+                widthClass: '',
+                index,
+                useCsvTitle: true,
+            }));
+
+            const csvRows = usesFirstRowAsHeader ? parsed.rows : [parsed.headers, ...parsed.rows];
+            rows = csvRows.map((rowData, rowIndex) => ({
+                index: rowIndex,
+                cells: rowData.map((cellText) => ({
+                    text: cellText,
+                    widthClass: '',
+                    useCsvText: true,
+                })),
+            }));
+        }
+    } else {
+        processedColumns = columns?.map((col, index) => ({
+            ...col,
+            widthClass: col.columnWidth || "",
+            index,
+            useCsvTitle: false,
+        })) || [];
+
+        const count = Math.max(1, parseInt(rowCount) || 3);
+        rows = Array.from({ length: count }, (_, i) => ({
+            index: i,
+            cells: processedColumns.map((col) => ({
+                widthClass: col.widthClass,
+                useCsvText: false,
+            })),
+        }));
+    }
 
     // Use table-fixed layout when any column has a custom (non-auto) width
     const hasCustomWidths = processedColumns.some((col) => {
@@ -129,13 +204,14 @@ const transformHook = (rw) => {
         rw.addAnchor(globalID);
     }
 
-    const wantsHeader = showHeader === true || showHeader === "true";
+    const wantsShowHeader = showHeader === true || showHeader === "true";
+    const wantsHeader = wantsShowHeader && processedColumns.length > 0;
 
     rw.setProps({
         classes,
         columns: processedColumns,
         rows,
-        showHeader: wantsHeader,
+        wantsHeader,
     });
 };
 

packs/Core.elementsdevpack/components/com.realmacsoftware.table/properties.config.json

@@ -4,23 +4,69 @@
             "title": "Settings",
             "icon": "gearshape",
             "properties": [
+                {
+                    "title": "Data Source",
+                    "id": "dataSource",
+                    "responsive": false,
+                    "segmented": {
+                        "default": "manual",
+                        "items": [
+                            {
+                                "title": "Manual",
+                                "value": "manual"
+                            },
+                            {
+                                "title": "CSV",
+                                "value": "csv"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "title": "CSV File",
+                    "id": "csvResource",
+                    "visible": "dataSource == 'csv'",
+                    "responsive": false,
+                    "resource": {}
+                },
+                {
+                    "title": "CSV URL",
+                    "id": "csvUrl",
+                    "visible": "dataSource == 'csv'",
+                    "responsive": false,
+                    "text": {
+                        "default": ""
+                    }
+                },
+                {
+                    "title": "First Row as Header",
+                    "id": "csvFirstRowHeader",
+                    "visible": "dataSource == 'csv'",
+                    "responsive": false,
+                    "switch": {
+                        "default": true
+                    }
+                },
+                {
+                    "divider": {}
+                },
                 {
                     "title": "Columns",
                     "id": "columns",
+                    "visible": "dataSource == 'manual'",
                     "collection": {
                         "identifier": "com.realmacsoftware.table.collections.columns"
                     }
                 },
-                {
-                    "divider": {}
-                },
                 {
                     "title": "Table Settings",
+                    "visible": "dataSource == 'manual'",
                     "heading": {}
                 },
                 {
                     "title": "Rows",
                     "id": "rowCount",
+                    "visible": "dataSource == 'manual'",
                     "responsive": false,
                     "number": {
                         "default": 3

packs/Core.elementsdevpack/components/com.realmacsoftware.table/templates/index.html

@@ -1,10 +1,14 @@
 <table class="{{classes.table}}">
-    @if(showHeader)
+    @if(wantsHeader)
     <thead>
         <tr class="{{classes.theadRow}}">
             @each(column in columns)
             <th class="{{classes.th}} {{column.widthClass}}">
-                @text("column", default: "Column")
+                @if(column.useCsvTitle)
+                    {{column.title}}
+                @else
+                    @text("column", default: "Column")
+                @endif
             </th>
             @endeach
         </tr>
@@ -13,9 +17,13 @@
     <tbody class="{{classes.tbody}}">
         @each(row in rows)
         <tr class="{{classes.tr}}">
-            @each(column in columns)
-                <td class="{{classes.td}} {{column.widthClass}}">
-                    @text("cell", default: "Cell")
+            @each(cell in row.cells)
+                <td class="{{classes.td}} {{cell.widthClass}}">
+                    @if(cell.useCsvText)
+                        {{cell.text}}
+                    @else
+                        @text("cell", default: "Cell")
+                    @endif
                 </td>
             @endeach
         </tr>