@multiplatform.one/table 6.0.0

package/src/components/DataTableExport/index.tsx

@@ -0,0 +1,631 @@
+import {
+  FileJsIcon,
+  FileXlsIcon,
+  FileTextIcon,
+  PrinterIcon,
+  GearIcon,
+} from "@phosphor-icons/react";
+import { downloadBlob } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { Button, Checkbox, Input } from "@multiplatform.one/forms";
+import { Popover, ScrollView, Separator, Text, XStack, YStack } from "tamagui";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+export interface ExportOptions {
+  format: "csv" | "excel" | "pdf" | "json";
+  includeHeaders: boolean;
+  filename: string;
+  selectedColumns?: string[];
+  customColumns?: Array<{
+    key: string;
+    header: string;
+    accessor?: (row: any) => any;
+  }>;
+  dateFormat?: string;
+  numberFormat?: string;
+}
+
+export interface ExportFormat {
+  id: string;
+  label: string;
+  icon: any;
+  extension: string;
+  mimeType: string;
+  description: string;
+  enabled: boolean;
+}
+
+export interface DataTableExportProps<T = any> {
+  data?: T[];
+  columns?: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>;
+  filename?: string;
+  exportFormats?: ExportFormat[];
+  onExport?: (options: ExportOptions) => Promise<void>;
+  disabled?: boolean;
+}
+
+export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  const data = props.data ?? (ctx?.computed.filteredData as T[]) ?? [];
+  const columns = props.columns ?? (ctx ? extractColumnsFromTable(ctx.table) : []);
+
+  const {
+    filename = "export",
+    exportFormats = [
+      {
+        id: "csv",
+        label: "CSV",
+        icon: <FileTextIcon size={16} />,
+        extension: "csv",
+        mimeType: "text/csv",
+        description: "Comma-separated values",
+        enabled: true,
+      },
+      {
+        id: "excel",
+        label: "Excel",
+        icon: <FileXlsIcon size={16} />,
+        extension: "xlsx",
+        mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        description: "Microsoft Excel format",
+        enabled: true,
+      },
+      {
+        id: "pdf",
+        label: "PDF",
+        icon: <FileTextIcon size={16} />,
+        extension: "pdf",
+        mimeType: "application/pdf",
+        description: "Portable document format",
+        enabled: true,
+      },
+      {
+        id: "json",
+        label: "JSON",
+        icon: <FileJsIcon size={16} />,
+        extension: "json",
+        mimeType: "application/json",
+        description: "JavaScript object notation",
+        enabled: true,
+      },
+    ],
+    onExport,
+    disabled = false,
+  } = props;
+
+  const { knobProps } = useResolvedKnobs();
+  const [isExporting, setIsExporting] = useState<string | null>(null);
+  const [exportOptions, setExportOptions] = useState<Partial<ExportOptions>>({
+    includeHeaders: true,
+    filename: filename,
+  });
+
+  const handleExport = async (format: ExportFormat) => {
+    if (disabled || isExporting) return;
+
+    setIsExporting(format.id);
+
+    try {
+      const options: ExportOptions = {
+        format: format.id as any,
+        includeHeaders: exportOptions.includeHeaders ?? true,
+        filename: exportOptions.filename || filename,
+        selectedColumns: exportOptions.selectedColumns,
+        customColumns: exportOptions.customColumns,
+        dateFormat: exportOptions.dateFormat,
+        numberFormat: exportOptions.numberFormat,
+      };
+
+      if (onExport) {
+        await onExport(options);
+      } else {
+        // Default export implementation
+        await defaultExport(data, columns, options);
+      }
+    } catch (error) {
+      console.error("Export failed:", error);
+    } finally {
+      setIsExporting(null);
+    }
+  };
+
+  const handlePrint = async () => {
+    if (disabled || isExporting) return;
+
+    setIsExporting("print");
+    try {
+      await printTable(data, columns);
+    } catch (error) {
+      console.error("Print failed:", error);
+    } finally {
+      setIsExporting(null);
+    }
+  };
+
+  return (
+    <XStack gap="$2" alignItems="center">
+      {/* Quick Export Buttons */}
+      {exportFormats
+        .filter((format) => format.enabled)
+        .slice(0, 3)
+        .map((format) => (
+          <Button
+            key={format.id}
+            size={knobProps.sizeToken}
+            chromeless
+            icon={format.icon}
+            disabled={disabled || isExporting === format.id}
+            onPress={() => handleExport(format)}
+            aria-label={`Export as ${format.label}`}
+          >
+            {isExporting === format.id ? "..." : format.label}
+          </Button>
+        ))}
+
+      {/* Print Button */}
+      <Button
+        size={knobProps.sizeToken}
+        chromeless
+        icon={<PrinterIcon size={16} />}
+        disabled={disabled || isExporting === "print"}
+        onPress={handlePrint}
+        aria-label="Print table"
+      >
+        {isExporting === "print" ? "..." : "Print"}
+      </Button>
+
+      {/* Advanced Export Options */}
+      <ExportOptionsPopover
+        exportFormats={exportFormats}
+        exportOptions={exportOptions}
+        onOptionsChange={setExportOptions}
+        onExport={handleExport}
+        onPrint={handlePrint}
+        disabled={disabled}
+        isExporting={isExporting}
+        columns={columns}
+      />
+    </XStack>
+  );
+}
+
+// Extract column metadata from TanStack Table instance for context fallback
+function extractColumnsFromTable(
+  table: any,
+): Array<{ accessorKey?: string; header?: string; id?: string }> {
+  try {
+    return table.getAllColumns().map((col: any) => ({
+      id: col.id,
+      accessorKey: col.id,
+      header: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id,
+    }));
+  } catch {
+    return [];
+  }
+}
+
+// Export Options Popover
+
+interface ExportOptionsPopoverProps {
+  exportFormats: ExportFormat[];
+  exportOptions: Partial<ExportOptions>;
+  onOptionsChange: (options: Partial<ExportOptions>) => void;
+  onExport: (format: ExportFormat) => void;
+  onPrint: () => void;
+  disabled: boolean;
+  isExporting: string | null;
+  columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>;
+}
+
+function ExportOptionsPopover({
+  exportFormats,
+  exportOptions,
+  onOptionsChange,
+  onExport,
+  onPrint,
+  disabled,
+  isExporting,
+  columns,
+}: ExportOptionsPopoverProps) {
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const popoverMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const [selectedColumns, setSelectedColumns] = useState<Set<string>>(
+    new Set(columns.map((col) => col.accessorKey || col.id || "")),
+  );
+
+  const availableColumns = columns.map((col) => ({
+    key: col.accessorKey || col.id || "",
+    header: col.header || col.accessorKey || col.id || "",
+  }));
+
+  return (
+    <Popover>
+      <Popover.Trigger asChild>
+        <Button
+          size={knobProps.sizeToken}
+          chromeless
+          icon={<GearIcon size={16} />}
+          disabled={disabled}
+          aria-label="Export options"
+        >
+          Options
+        </Button>
+      </Popover.Trigger>
+
+      <Popover.Content
+        {...knobProps.borderRadius}
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ x: 0, y: -10, opacity: 0 }}
+        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+        minWidth={popoverMinWidth}
+      >
+        <YStack {...knobProps.panelPadding} gap="$4">
+          <Text fontSize="$5" fontWeight="600">
+            Export Options
+          </Text>
+
+          {/* Filename */}
+          <YStack gap="$2">
+            <Text fontSize="$3" fontWeight="500">
+              Filename
+            </Text>
+            <Input
+              value={exportOptions.filename || ""}
+              onChangeText={(text) =>
+                onOptionsChange({
+                  ...exportOptions,
+                  filename: text,
+                })
+              }
+              placeholder="Enter filename"
+            />
+          </YStack>
+
+          {/* Include Headers */}
+          <Checkbox
+            label="Include headers"
+            checked={exportOptions.includeHeaders ?? true}
+            onCheckedChange={(checked) =>
+              onOptionsChange({
+                ...exportOptions,
+                includeHeaders: checked as boolean,
+              })
+            }
+          />
+
+          {/* Column Selection */}
+          <YStack gap="$2">
+            <Text fontSize="$3" fontWeight="500">
+              Select Columns ({selectedColumns.size} of {availableColumns.length})
+            </Text>
+            <ScrollView maxHeight={200}>
+              <YStack gap="$1">
+                {availableColumns.map((col) => (
+                  <Checkbox
+                    key={col.key}
+                    label={col.header}
+                    checked={selectedColumns.has(col.key)}
+                    onCheckedChange={(checked) => {
+                      const newSelected = new Set(selectedColumns);
+                      if (checked) {
+                        newSelected.add(col.key);
+                      } else {
+                        newSelected.delete(col.key);
+                      }
+                      setSelectedColumns(newSelected);
+                      onOptionsChange({
+                        ...exportOptions,
+                        selectedColumns: Array.from(newSelected),
+                      });
+                    }}
+                  />
+                ))}
+              </YStack>
+            </ScrollView>
+          </YStack>
+
+          <Separator />
+
+          {/* Export Formats */}
+          <YStack gap="$2">
+            <Text fontSize="$4" fontWeight="500">
+              Export Formats
+            </Text>
+            {exportFormats.map((format) => (
+              <Button
+                key={format.id}
+                size={knobProps.sizeToken}
+                chromeless
+                justifyContent="flex-start"
+                disabled={disabled || isExporting === format.id || !format.enabled}
+                onPress={() => onExport(format)}
+                icon={format.icon}
+              >
+                <YStack gap="$1">
+                  <Text fontSize="$3" fontWeight="500">
+                    {format.label}
+                  </Text>
+                  <Text fontSize="$2" color="$color10">
+                    {format.description}
+                  </Text>
+                </YStack>
+                {isExporting === format.id && (
+                  <Text fontSize="$2" color="$accentColor" marginLeft="auto">
+                    ...
+                  </Text>
+                )}
+              </Button>
+            ))}
+          </YStack>
+
+          <Separator />
+
+          {/* Print */}
+          <Button
+            size={knobProps.sizeToken}
+            chromeless
+            justifyContent="flex-start"
+            disabled={disabled || isExporting === "print"}
+            onPress={onPrint}
+            icon={<PrinterIcon size={16} />}
+          >
+            Print Table
+            {isExporting === "print" && (
+              <Text fontSize="$2" color="$accentColor" marginLeft="auto">
+                ...
+              </Text>
+            )}
+          </Button>
+        </YStack>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+// Default Export Implementation
+
+async function defaultExport<T>(
+  data: T[],
+  columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>,
+  options: ExportOptions,
+): Promise<void> {
+  const { format, selectedColumns } = options;
+
+  // Filter columns if specified
+  const exportColumns = selectedColumns
+    ? columns.filter((col) => selectedColumns.includes(col.accessorKey || col.id || ""))
+    : columns;
+
+  switch (format) {
+    case "csv":
+      return exportAsCSV(data, exportColumns, options);
+    case "json":
+      return exportAsJSON(data, exportColumns, options);
+    case "excel":
+      return exportAsExcel(data, exportColumns, options);
+    case "pdf":
+      return exportAsPDF(data, exportColumns, options);
+    default:
+      throw new Error(`Unsupported export format: ${format}`);
+  }
+}
+
+// CSV Export
+async function exportAsCSV<T>(
+  data: T[],
+  columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>,
+  options: ExportOptions,
+): Promise<void> {
+  const { includeHeaders = true, filename = "export" } = options;
+
+  let csvContent = "";
+
+  // Headers
+  if (includeHeaders) {
+    const headers = columns.map((col) => col.header || col.accessorKey || "").join(",");
+    csvContent += `${headers}\n`;
+  }
+
+  // Data rows
+  data.forEach((row) => {
+    const values = columns.map((col) => {
+      const key = col.accessorKey || col.id || "";
+      let value = (row as any)[key];
+
+      // Handle cell renderer
+      if (col.cell) {
+        try {
+          value = col.cell({ getValue: () => value, row: { original: row } });
+        } catch {
+          // Fallback to raw value
+        }
+      }
+
+      // Escape CSV values
+      const stringValue = String(value || "");
+      return stringValue.includes(",") || stringValue.includes('"')
+        ? `"${stringValue.replace(/"/g, '""')}"`
+        : stringValue;
+    });
+    csvContent += `${values.join(",")}\n`;
+  });
+
+  downloadFile(csvContent, `${filename}.csv`, "text/csv");
+}
+
+// JSON Export
+async function exportAsJSON<T>(
+  data: T[],
+  columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>,
+  options: ExportOptions,
+): Promise<void> {
+  const { filename = "export" } = options;
+
+  const jsonData = data.map((row) => {
+    const obj: any = {};
+    columns.forEach((col) => {
+      const key = col.accessorKey || col.id || "";
+      obj[key] = (row as any)[key];
+    });
+    return obj;
+  });
+
+  const jsonContent = JSON.stringify(jsonData, null, 2);
+  downloadFile(jsonContent, `${filename}.json`, "application/json");
+}
+
+// Excel Export — built-in implementation requires a library like `xlsx` or
+// `exceljs` which we don't ship by default to keep the table package light.
+// Apps that need .xlsx output should provide their own `onExport` handler:
+//
+//   <DataTable.Export
+//     onExport={(format, data, columns) => {
+//       if (format === "excel") {
+//         const wb = XLSX.utils.book_new();
+//         const ws = XLSX.utils.json_to_sheet(data);
+//         XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
+//         XLSX.writeFile(wb, `${filename}.xlsx`);
+//         return true; // mark handled
+//       }
+//     }}
+//   />
+async function exportAsExcel<T>(
+  _data: T[],
+  _columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>,
+  _options: ExportOptions,
+): Promise<void> {
+  throw new Error(
+    "Excel export not built in. Install `xlsx` (or `exceljs`) and provide a custom `onExport` handler — see DataTableExport source for an example.",
+  );
+}
+
+// PDF Export — same story: requires `jsPDF` (or server-side rendering) which
+// we don't ship. The included `print` action opens the browser print dialog
+// with a styled HTML table; that's the closest no-dependency equivalent and
+// users can "Save as PDF" from there.
+async function exportAsPDF<T>(
+  _data: T[],
+  _columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>,
+  _options: ExportOptions,
+): Promise<void> {
+  throw new Error(
+    "PDF export not built in. Install `jspdf` and provide a custom `onExport` handler, or use the `print` format which opens the browser print dialog (Save as PDF).",
+  );
+}
+
+// Print functionality
+async function printTable<T>(
+  data: T[],
+  columns: Array<{
+    accessorKey?: string;
+    header?: string;
+    id?: string;
+    cell?: (info: any) => any;
+  }>,
+): Promise<void> {
+  const printWindow = window.open("", "_blank");
+  if (!printWindow) return;
+
+  const htmlContent = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <title>Table Export</title>
+      <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        table { width: 100%; border-collapse: collapse; }
+        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+        th { background-color: #f2f2f2; font-weight: bold; }
+        tr:nth-child(even) { background-color: #f9f9f9; }
+        @media print { body { margin: 0; } }
+      </style>
+    </head>
+    <body>
+      <h1>Data Export</h1>
+      <table>
+        <thead>
+          <tr>
+            ${columns.map((col) => `<th>${col.header || col.accessorKey || ""}</th>`).join("")}
+          </tr>
+        </thead>
+        <tbody>
+          ${data
+            .map(
+              (row) => `
+            <tr>
+              ${columns
+                .map((col) => {
+                  const key = col.accessorKey || col.id || "";
+                  let value = (row as any)[key];
+                  if (col.cell) {
+                    try {
+                      value = col.cell({
+                        getValue: () => value,
+                        row: { original: row },
+                      });
+                    } catch {}
+                  }
+                  return `<td>${String(value || "")}</td>`;
+                })
+                .join("")}
+            </tr>
+          `,
+            )
+            .join("")}
+        </tbody>
+      </table>
+    </body>
+    </html>
+  `;
+
+  printWindow.document.write(htmlContent);
+  printWindow.document.close();
+  printWindow.print();
+}
+
+// Utility function
+function downloadFile(content: string, filename: string, mimeType: string): void {
+  const blob = new Blob([content], { type: mimeType });
+  downloadBlob(blob, filename);
+}