@beeblock/svelar-datatable 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeblock/svelar-datatable",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Full-featured DataTable plugin for Svelar — sorting, searching, pagination, inline editing, export, and server-side processing",
   "type": "module",
   "keywords": [
@@ -45,6 +45,10 @@
   "files": [
     "dist",
     "src/ui",
+    "src/state",
+    "src/export",
+    "src/types.ts",
+    "src/index.ts",
     "src/publishable",
     "LICENSE"
   ],

package/src/export/ExportManager.ts

@@ -0,0 +1,30 @@
+import type { ColumnDef, ExportFormat } from '../types.js';
+import { generateCSV, downloadCSV } from './csv.js';
+import { copyToClipboard } from './clipboard.js';
+import { printTable } from './print.js';
+import { exportExcel } from './excel.js';
+import { exportPdf } from './pdf.js';
+
+export class ExportManager<T = any> {
+  async export(format: ExportFormat, data: T[], columns: ColumnDef<T>[], filename?: string): Promise<void> {
+    switch (format) {
+      case 'csv': {
+        const csv = generateCSV(data, columns);
+        downloadCSV(csv, filename ?? 'export.csv');
+        break;
+      }
+      case 'excel':
+        await exportExcel(data, columns, filename ?? 'export.xlsx');
+        break;
+      case 'pdf':
+        exportPdf(data, columns, filename ?? 'export.pdf');
+        break;
+      case 'clipboard':
+        await copyToClipboard(data, columns);
+        break;
+      case 'print':
+        printTable(data, columns);
+        break;
+    }
+  }
+}

package/src/export/clipboard.ts

@@ -0,0 +1,14 @@
+import type { ColumnDef } from '../types.js';
+
+export async function copyToClipboard<T>(data: T[], columns: ColumnDef<T>[]): Promise<void> {
+  const visibleCols = columns.filter((c) => c.visible !== false);
+  const header = visibleCols.map((c) => c.header).join('\t');
+  const rows = data.map((row: any) =>
+    visibleCols.map((col) => {
+      const val = row[col.key];
+      return val === null || val === undefined ? '' : String(val);
+    }).join('\t')
+  );
+  const text = [header, ...rows].join('\n');
+  await navigator.clipboard.writeText(text);
+}

package/src/export/csv.ts

@@ -0,0 +1,36 @@
+import type { ColumnDef } from '../types.js';
+
+function escapeCSV(value: any): string {
+  if (value === null || value === undefined) return '';
+  const str = String(value);
+  if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
+    return '"' + str.replace(/"/g, '""') + '"';
+  }
+  return str;
+}
+
+export function generateCSV<T>(data: T[], columns: ColumnDef<T>[]): string {
+  const visibleCols = columns.filter((c) => c.visible !== false);
+  const header = visibleCols.map((c) => escapeCSV(c.header)).join(',');
+  const rows = data.map((row: any) =>
+    visibleCols.map((col) => escapeCSV(row[col.key])).join(',')
+  );
+  // BOM for Excel UTF-8 compatibility
+  return '\uFEFF' + [header, ...rows].join('\r\n');
+}
+
+export function downloadCSV(content: string, filename: string = 'export.csv') {
+  const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
+  downloadBlob(blob, filename);
+}
+
+export function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}

package/src/export/excel.ts

@@ -0,0 +1,44 @@
+import type { ColumnDef } from '../types.js';
+import { downloadBlob } from './csv.js';
+
+export async function exportExcel<T>(data: T[], columns: ColumnDef<T>[], filename: string = 'export.xlsx') {
+  let ExcelJS: any;
+  try {
+    ExcelJS = await import('exceljs');
+  } catch {
+    throw new Error('exceljs is required for Excel export. Install it: npm install exceljs');
+  }
+
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet('Data');
+  const visibleCols = columns.filter((c) => c.visible !== false);
+
+  // Header row
+  worksheet.columns = visibleCols.map((col) => ({
+    header: col.header,
+    key: col.key,
+    width: 20,
+  }));
+
+  // Style header
+  const headerRow = worksheet.getRow(1);
+  headerRow.font = { bold: true };
+  headerRow.fill = {
+    type: 'pattern',
+    pattern: 'solid',
+    fgColor: { argb: 'FFF0F0F0' },
+  };
+
+  // Data rows
+  for (const row of data) {
+    const rowData: Record<string, any> = {};
+    for (const col of visibleCols) {
+      rowData[col.key] = (row as any)[col.key] ?? '';
+    }
+    worksheet.addRow(rowData);
+  }
+
+  const buffer = await workbook.xlsx.writeBuffer();
+  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  downloadBlob(blob, filename);
+}

package/src/export/index.ts

@@ -0,0 +1,6 @@
+export { generateCSV, downloadCSV, downloadBlob } from './csv.js';
+export { copyToClipboard } from './clipboard.js';
+export { printTable } from './print.js';
+export { exportExcel } from './excel.js';
+export { exportPdf } from './pdf.js';
+export { ExportManager } from './ExportManager.js';

package/src/export/pdf.ts

@@ -0,0 +1,9 @@
+import type { ColumnDef } from '../types.js';
+import { generateCSV } from './csv.js';
+import { printTable } from './print.js';
+
+export function exportPdf<T>(data: T[], columns: ColumnDef<T>[], filename: string = 'export.pdf') {
+  // Use browser print as fallback (generates PDF via print dialog)
+  // For server-side PDF, users should use @beeblock/svelar/pdf directly
+  printTable(data, columns, filename.replace('.pdf', ''));
+}

package/src/export/print.ts

@@ -0,0 +1,42 @@
+import type { ColumnDef } from '../types.js';
+
+export function printTable<T>(data: T[], columns: ColumnDef<T>[], title?: string) {
+  const visibleCols = columns.filter((c) => c.visible !== false);
+
+  const headerCells = visibleCols.map((c) => `<th style="border:1px solid #ddd;padding:8px 12px;text-align:left;background:#f5f5f5;font-weight:600;">${escapeHtml(c.header)}</th>`).join('');
+  const bodyRows = data.map((row: any) => {
+    const cells = visibleCols.map((col) => {
+      const val = row[col.key];
+      return `<td style="border:1px solid #ddd;padding:8px 12px;">${escapeHtml(val === null || val === undefined ? '' : String(val))}</td>`;
+    }).join('');
+    return `<tr>${cells}</tr>`;
+  }).join('');
+
+  const html = `<!DOCTYPE html>
+<html><head>
+<title>${escapeHtml(title ?? 'Data Export')}</title>
+<style>
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 20px; }
+  table { border-collapse: collapse; width: 100%; font-size: 13px; }
+  h1 { font-size: 18px; margin-bottom: 16px; }
+  @media print { h1 { margin-top: 0; } }
+</style>
+</head><body>
+${title ? `<h1>${escapeHtml(title)}</h1>` : ''}
+<table>
+  <thead><tr>${headerCells}</tr></thead>
+  <tbody>${bodyRows}</tbody>
+</table>
+</body></html>`;
+
+  const win = window.open('', '_blank');
+  if (!win) return;
+  win.document.write(html);
+  win.document.close();
+  win.focus();
+  setTimeout(() => win.print(), 250);
+}
+
+function escapeHtml(str: string): string {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+export { DataTableStore } from './state/DataTableStore.js';
+export { ServerDataTableStore } from './state/ServerDataTableStore.js';
+export { ExportManager } from './export/ExportManager.js';
+export type {
+  ColumnDef,
+  ColumnType,
+  FilterOperator,
+  SelectionMode,
+  EditorMode,
+  FieldType,
+  ExportFormat,
+  SortState,
+  FilterState,
+  PaginationState,
+  DataTableRequest,
+  DataTableResponse,
+  EditorFieldDef,
+  ButtonDef,
+  DataTableConfig,
+  DataTableClassNames,
+  DataTableState,
+} from './types.js';