exportdatafile

📊 ExportDataFile

Library JavaScript/TypeScript yang powerful dan mudah digunakan untuk mengekspor data ke berbagai format file (Excel, PDF, dan TXT) tanpa memerlukan kode sisi server.

🎯 Demo

Lihat demo lengkap dengan berbagai contoh penggunaan di folder demo/

Untuk menjalankan demo:

cd demo
npm install
npm run dev

Demo akan terbuka di browser pada http://localhost:3000

✨ Fitur Utama

• 📥 Multi-Format Export: Ekspor ke Excel (.xlsx), PDF (.pdf), dan TXT (.txt)
• 🎨 Kustomisasi Penuh: Kontrol penuh atas styling, layout, dan format
• 📊 Grouping & Subtotal: Dukungan untuk pengelompokan data dengan subtotal otomatis
• 🔢 Auto Formatting: Format otomatis untuk mata uang, tanggal, angka, dan berat
• 🎯 TypeScript Support: Full TypeScript support dengan type safety
• 🚀 Zero Server Dependencies: Semua proses dilakukan di client-side
• 🎨 Custom Formatter: Manipulasi data sebelum export dengan fungsi formatter
• 📱 Responsive: Bekerja di semua browser modern

🚀 Quick Start

Instalasi

npm install exportdatafile

atau

yarn add exportdatafile

Contoh Penggunaan Dasar

import { ExportData, ColumnGenarator } from "exportdatafile";

// Define your data type
interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  date: string;
}

// Your data
const products: Product[] = [
  {
    id: "001",
    name: "Laptop",
    price: 15000000,
    stock: 10,
    date: "2024-01-15",
  },
  {
    id: "002",
    name: "Mouse",
    price: 150000,
    stock: 50,
    date: "2024-01-16",
  },
];

// Define columns
const columns: ColumnGenarator<Product>[] = [
  {
    label: "ID Produk",
    key: "id",
  },
  {
    label: "Nama Produk",
    key: "name",
  },
  {
    label: "Harga",
    key: "price",
    options: {
      format: "RP", // Auto format as Rupiah
      halign: "right",
    },
  },
  {
    label: "Stok",
    key: "stock",
    options: {
      format: "NUMBER",
      halign: "center",
    },
  },
  {
    label: "Tanggal",
    key: "date",
    options: {
      format: "DATE",
    },
  },
];

// Export to Excel
ExportData({
  type: ["EXCEL"],
  data: products,
  columns: columns,
  title: "LAPORAN DATA PRODUK",
  grouping: [],
});

📖 Dokumentasi Lengkap

1. Column Configuration

ColumnGenarator Interface

interface ColumnGenarator<T> {
  key: keyof T; // Key dari data object
  label?: string; // Label kolom yang ditampilkan
  options?: {
    format?: FormatType; // Format data
    halign?: HalignType; // Horizontal alignment
    valign?: ValignType; // Vertical alignment
    txtColor?: string; // Warna teks (hex)
    bgColor?: string; // Warna background (hex)
    width?: number; // Lebar kolom
    disabledColumn?: boolean; // Sembunyikan kolom
    disabledFooter?: boolean; // Disable footer untuk kolom ini
  };
  child?: ColumnGenarator<T>[]; // Nested columns
  formatter?: (cellValue: any, rowData: any) => any; // Custom formatter
}

Format Types

Format	Deskripsi	Contoh Input	Contoh Output
RP	Format Rupiah	15000	Rp 15.000
GR	Format Gram	1500	1.500 gr
NUMBER	Format Angka	1000000	1.000.000
DATE	Format Tanggal	2024-01-15	15/01/2024
DATETIME	Format Tanggal & Waktu	2024-01-15 14:30:00	15/01/2024 14:30
IMAGE	Gambar (base64)	data:image/png;base64,...	Gambar di PDF/Excel

Alignment Types

• halign: "left" | "center" | "right"
• valign: "top" | "middle" | "bottom"

2. Custom Formatter

Gunakan formatter untuk memanipulasi data sebelum export:

const columns: ColumnGenarator<Product>[] = [
  {
    label: "Status",
    key: "stock",
    formatter: (cellValue, rowData) => {
      return cellValue > 10 ? "Tersedia" : "Stok Menipis";
    },
  },
  {
    label: "Harga Diskon",
    key: "price",
    options: {
      format: "RP",
    },
    formatter: (cellValue, rowData) => {
      // Berikan diskon 10% jika stok > 20
      return rowData.stock > 20 ? cellValue * 0.9 : cellValue;
    },
  },
];

3. Grouping & Subtotal

Kelompokkan data berdasarkan kolom tertentu dengan subtotal otomatis:

interface Transaction {
  category: string;
  product: string;
  amount: number;
}

const data: Transaction[] = [
  { category: "Elektronik", product: "Laptop", amount: 15000000 },
  { category: "Elektronik", product: "Mouse", amount: 150000 },
  { category: "Furniture", product: "Meja", amount: 2000000 },
  { category: "Furniture", product: "Kursi", amount: 1500000 },
];

ExportData({
  type: ["EXCEL", "PDF"],
  data: data,
  columns: columns,
  title: "LAPORAN TRANSAKSI",
  grouping: ["category"], // Group by category
  footerSetting: {
    subTotal: {
      caption: "SUBTOTAL",
      enableCount: true,
      captionItem: "Items",
    },
    grandTotal: {
      caption: "GRAND TOTAL",
      enableCount: true,
      captionItem: "Total Items",
    },
  },
});

4. Excel Export Configuration

ExportData({
  type: ["EXCEL"],
  data: data,
  columns: columns,
  title: "LAPORAN PENJUALAN",
  grouping: [],
  excelSetting: {
    titleExcel: "Laporan Penjualan Bulanan", // Custom title
    bgColor: "4472C4", // Header background color (hex tanpa #)
    txtColor: "FFFFFF", // Header text color (hex tanpa #)
    additionalTextHeader:
      "PT. Contoh Perusahaan\nJl. Contoh No. 123\nTelp: 021-12345678",
    startY: 5, // Mulai dari baris ke-5
    grandTotalSetting: {
      disableGrandTotal: false,
      colSpan: 2, // Grand total span 2 kolom pertama
    },
    customHeader: (worksheet, lastIndex) => {
      // Custom header logic
      const row = worksheet.getRow(1);
      row.height = 30;
      row.font = { bold: true, size: 16 };
    },
    customFooter: (worksheet, lastIndex) => {
      // Custom footer logic
      const row = worksheet.addRow(["", "Total Keseluruhan", "Rp 100.000.000"]);
      row.font = { bold: true };
    },
  },
});

5. PDF Export Configuration

ExportData({
  type: ["PDF"],
  data: data,
  columns: columns,
  title: "LAPORAN PENJUALAN",
  grouping: [],
  date: {
    start_date: "01-01-2024",
    end_date: "31-01-2024",
    caption: "Periode",
  },
  pdfSetting: {
    orientation: "l", // "l" = landscape, "p" = portrait
    unit: "mm",
    bgColor: "E8E5E5", // Header background (hex tanpa #)
    txtColor: "000000", // Header text color (hex tanpa #)
    theme: "grid", // "grid" | "striped" | "plain"
    fontSIze: 10,
    textHeaderLeft: "PT. Contoh Perusahaan\nJl. Contoh No. 123",
    textHeaderRight: "Telp: 021-12345678\nEmail: [e-mail]",
    openNewTab: true, // Buka PDF di tab baru
    disablePrintDate: false,
    startY: 40, // Mulai tabel dari posisi Y
    grandTotalSetting: {
      disableGrandTotal: false,
      colSpan: 2,
    },
    customHeader: (doc, finalY, autoTable) => {
      // Custom header sebelum tabel
      doc.setFontSize(14);
      doc.text("Header Kustom", 15, 20);
    },
    customFooter: (doc, finalY, autoTable) => {
      // Custom footer setelah tabel
      doc.setFontSize(10);
      doc.text("Footer Kustom", 15, finalY + 10);

      // Tambah tabel tambahan
      if (autoTable) {
        autoTable(doc, {
          startY: finalY + 15,
          head: [["Keterangan", "Nilai"]],
          body: [
            ["Total Transaksi", "100"],
            ["Total Nilai", "Rp 100.000.000"],
          ],
        });
      }
    },
  },
});

6. TXT Export Configuration

Export data sebagai file teks dengan template custom:

interface Receipt {
  invoice_no: string;
  customer: string;
  date: string;
  amount: number;
  payment_method: string;
}

const receipt: Receipt = {
  invoice_no: "INV-001",
  customer: "John Doe",
  date: "2024-01-15",
  amount: 150000,
  payment_method: "Cash",
};

ExportData({
  type: ["TXT"],
  data: [], // Tidak digunakan untuk TXT
  columns: [], // Tidak digunakan untuk TXT
  title: "STRUK PEMBAYARAN",
  grouping: [],
  txtSetting: {
    dataTxt: receipt, // Bisa single object atau array
    titleTxt: "Struk Pembayaran",
    copy: true, // Auto copy ke clipboard
    templateTxt: `
========================================
           STRUK PEMBAYARAN
========================================
No. Invoice    : {invoice_no}
Nama Customer  : {customer}
Tanggal        : {date}
Metode Bayar   : {payment_method}
----------------------------------------
Total Bayar    : Rp {amount}
========================================
      Terima Kasih Atas Kunjungan Anda
========================================
    `,
  },
});

7. Multi-Format Export

Export ke beberapa format sekaligus:

ExportData({
  type: ["EXCEL", "PDF", "TXT"], // Export ke 3 format
  // atau gunakan ["ALL"] untuk semua format
  data: data,
  columns: columns,
  title: "LAPORAN LENGKAP",
  grouping: [],
  excelSetting: {
    /* ... */
  },
  pdfSetting: {
    /* ... */
  },
  txtSetting: {
    /* ... */
  },
});

🎯 Contoh Kasus Penggunaan

Contoh 1: Laporan Penjualan dengan Grouping

interface Sales {
  region: string;
  salesperson: string;
  product: string;
  quantity: number;
  price: number;
  total: number;
}

const salesData: Sales[] = [
  {
    region: "Jakarta",
    salesperson: "Budi",
    product: "Laptop",
    quantity: 2,
    price: 15000000,
    total: 30000000,
  },
  {
    region: "Jakarta",
    salesperson: "Ani",
    product: "Mouse",
    quantity: 10,
    price: 150000,
    total: 1500000,
  },
  {
    region: "Bandung",
    salesperson: "Citra",
    product: "Keyboard",
    quantity: 5,
    price: 500000,
    total: 2500000,
  },
];

const columns: ColumnGenarator<Sales>[] = [
  { label: "Region", key: "region" },
  { label: "Sales Person", key: "salesperson" },
  { label: "Produk", key: "product" },
  {
    label: "Qty",
    key: "quantity",
    options: {
      format: "NUMBER",
      halign: "center",
    },
  },
  {
    label: "Harga",
    key: "price",
    options: {
      format: "RP",
      halign: "right",
    },
  },
  {
    label: "Total",
    key: "total",
    options: {
      format: "RP",
      halign: "right",
    },
  },
];

ExportData({
  type: ["EXCEL", "PDF"],
  data: salesData,
  columns: columns,
  title: "LAPORAN PENJUALAN PER REGION",
  grouping: ["region"], // Group by region
  date: {
    start_date: "01-01-2024",
    end_date: "31-01-2024",
  },
  footerSetting: {
    subTotal: {
      caption: "SUBTOTAL REGION",
      enableCount: true,
      captionItem: "Items",
    },
    grandTotal: {
      caption: "GRAND TOTAL",
      enableCount: true,
      captionItem: "Total Items",
    },
  },
  excelSetting: {
    bgColor: "4472C4",
    txtColor: "FFFFFF",
    additionalTextHeader: "PT. Contoh Jaya\nLaporan Penjualan",
  },
  pdfSetting: {
    orientation: "l",
    theme: "grid",
    textHeaderLeft: "PT. Contoh Jaya",
    openNewTab: true,
  },
});

Contoh 2: Export dengan Custom Formatter

interface Employee {
  id: string;
  name: string;
  salary: number;
  join_date: string;
  status: string;
}

const employees: Employee[] = [
  {
    id: "EMP001",
    name: "John Doe",
    salary: 8000000,
    join_date: "2020-01-15",
    status: "active",
  },
  {
    id: "EMP002",
    name: "Jane Smith",
    salary: 12000000,
    join_date: "2019-05-20",
    status: "active",
  },
];

const columns: ColumnGenarator<Employee>[] = [
  { label: "ID", key: "id" },
  { label: "Nama", key: "name" },
  {
    label: "Gaji",
    key: "salary",
    options: { format: "RP" },
  },
  {
    label: "Bonus (10%)",
    key: "salary",
    options: { format: "RP" },
    formatter: (cellValue) => cellValue * 0.1, // Hitung bonus 10%
  },
  {
    label: "Total Gaji",
    key: "salary",
    options: { format: "RP" },
    formatter: (cellValue) => cellValue * 1.1, // Gaji + bonus
  },
  {
    label: "Tanggal Bergabung",
    key: "join_date",
    options: { format: "DATE" },
  },
  {
    label: "Status",
    key: "status",
    formatter: (cellValue) => (cellValue === "active" ? "Aktif" : "Non-Aktif"),
  },
];

ExportData({
  type: ["EXCEL"],
  data: employees,
  columns: columns,
  title: "LAPORAN GAJI KARYAWAN",
  grouping: [],
});

📋 API Reference

GenaratorExport Interface

Interface utama untuk fungsi ExportData:

interface GenaratorExport<T> {
  // Required Parameters
  columns: ColumnGenarator<T>[]; // Konfigurasi kolom
  data: DataItemGenerator[]; // Data yang akan diekspor
  type: FileType[]; // Tipe file export
  grouping: string[]; // Array key untuk grouping

  // Optional Parameters
  title?: string; // Judul laporan
  date?: DateConfig; // Konfigurasi tanggal
  pdfSetting?: PdfConfig; // Konfigurasi PDF
  excelSetting?: ExcelConfig; // Konfigurasi Excel
  txtSetting?: TxtConfig; // Konfigurasi TXT
  footerSetting?: FooterConfig; // Konfigurasi footer
}

ExportData Parameters

Parameter	Type	Required	Description
type	FileType[]	✅	Array tipe file: ["EXCEL"], ["PDF"], ["TXT"], atau ["ALL"]
data	Array<any>	✅	Data yang akan diekspor
columns	ColumnGenarator[]	✅	Konfigurasi kolom
grouping	string[]	✅	Array key untuk grouping (kosongkan jika tidak perlu)
title	string	❌	Judul laporan
date	DateConfig	❌	Konfigurasi tanggal
excelSetting	ExcelConfig	❌	Konfigurasi Excel
pdfSetting	PdfConfig	❌	Konfigurasi PDF
txtSetting	TxtConfig	❌	Konfigurasi TXT
footerSetting	FooterConfig	❌	Konfigurasi footer (subtotal/grandtotal)

DateConfig Interface

interface DateConfig {
  start_date?: string; // Tanggal mulai (format: DD-MM-YYYY)
  end_date?: string; // Tanggal akhir (format: DD-MM-YYYY)
  caption?: string; // Caption untuk periode (default: "Periode")
}

Contoh:

date: {
  start_date: "01-01-2024",
  end_date: "31-01-2024",
  caption: "Periode Laporan"
}

PdfConfig Interface

interface PdfConfig {
  orientation?: "p" | "portrait" | "l" | "landscape"; // Orientasi halaman
  unit?: "pt" | "px" | "in" | "mm" | "cm" | "ex" | "em" | "pc"; // Unit ukuran
  width?: number; // Lebar custom
  height?: number; // Tinggi custom
  fontSIze?: number; // Ukuran font (default: 10)
  bgColor?: string; // Warna background header (hex tanpa #)
  titlePdf?: string; // Custom title PDF
  txtColor?: string; // Warna teks header (hex tanpa #)
  startY?: number; // Posisi Y awal tabel
  header?: {
    column?: boolean; // Tampilkan header kolom
    information?: boolean; // Tampilkan informasi header
  };
  textHeaderRight?: string; // Teks header kanan
  textHeaderLeft?: string; // Teks header kiri
  theme?: "grid" | "striped" | "plain"; // Theme tabel
  grandTotalSetting?: {
    disableGrandTotal?: boolean; // Disable grand total
    colSpan?: number; // Colspan untuk grand total
  };
  openNewTab?: boolean; // Buka PDF di tab baru
  disablePrintDate?: boolean; // Disable tanggal cetak
  customHeader?: (doc: jsPDF, finalY: number, autoTable?: any) => void;
  customFooter?: (doc: jsPDF, finalY: number, autoTable?: any) => void;
}

ExcelConfig Interface

interface ExcelConfig {
  titleExcel?: string; // Custom title Excel
  bgColor?: string; // Warna background header (hex tanpa #)
  startY?: number; // Baris mulai (default: 1)
  txtColor?: string; // Warna teks header (hex tanpa #)
  additionalTextHeader?: string; // Teks tambahan di header (multiline dengan \n)
  grandTotalSetting?: {
    disableGrandTotal?: boolean; // Disable grand total
    colSpan?: number; // Colspan untuk grand total
  };
  subTotal?: {
    disableGrandTotal?: boolean; // Disable subtotal
  };
  customHeader?: (worksheet: ExcelJS.Worksheet, lastIndex: number) => void;
  customFooter?: (worksheet: ExcelJS.Worksheet, lastIndex: number) => void;
}

TxtConfig Interface

interface TxtConfig {
  dataTxt?: DataItemGenerator | DataItemGenerator[]; // Data untuk template
  titleTxt: string; // Judul file TXT
  templateTxt?: string; // Template dengan placeholder {key}
  copy?: boolean; // Auto copy ke clipboard
}

Contoh:

txtSetting: {
  dataTxt: { name: "John", amount: 15000 },
  titleTxt: "Receipt",
  copy: true,
  templateTxt: `
    Name: {name}
    Amount: Rp {amount}
  `
}

FooterConfig Interface

interface FooterConfig {
  subTotal?: {
    caption?: string; // Caption subtotal (default: "SUBTOTAL")
    disableSubtotal?: boolean; // Disable subtotal
    enableCount?: boolean; // Tampilkan jumlah item
    captionItem?: string; // Caption untuk jumlah item
  };
  grandTotal?: {
    caption?: string; // Caption grand total (default: "GRAND TOTAL")
    disableGrandTotal?: boolean; // Disable grand total
    captionItem?: string; // Caption untuk jumlah item
    enableCount?: boolean; // Tampilkan jumlah item
  };
}

🔧 Tips & Best Practices

1. Performance

Untuk data besar (>10,000 rows), pertimbangkan:

• Gunakan pagination di UI
• Export data dalam batch
• Disable fitur yang tidak diperlukan (grouping, subtotal)

2. Styling

// Gunakan warna hex tanpa # symbol
excelSetting: {
  bgColor: "4472C4", // ✅ Correct
  bgColor: "#4472C4" // ❌ Wrong
}

3. TypeScript

Manfaatkan TypeScript untuk type safety:

interface MyData {
  id: number;
  name: string;
}

const columns: ColumnGenarator<MyData>[] = [
  { label: "ID", key: "id" }, // ✅ Type-safe
  { label: "Name", key: "name" }, // ✅ Type-safe
  { label: "Age", key: "age" }, // ❌ Error: 'age' tidak ada di MyData
];

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📦 Dependencies

• jspdf - PDF generation
• jspdf-autotable - PDF tables
• exceljs - Excel generation

🤝 Contributing

Kontribusi sangat diterima! Silakan buat issue atau pull request di GitHub repository.

📄 License

ISC License - lihat file LICENSE untuk detail.

👨‍💻 Author

Samsul Arifin

• GitHub: @samsularifin05
• NPM: exportdatafile

🔗 Links

• NPM Package
• GitHub Repository
• Live Demo
• Report Issues

⭐ Jika library ini membantu project Anda, berikan star di GitHub!