HiExport Data Export Component

A powerful data export component designed for modern Vue 3 applications. Provides multiple export types, flexible data transformation, and complete user experience control. Seamlessly integrates with HiTable component to meet enterprise-level data export requirements.

View Live Demo

✨ Core Features

📄 Multiple Export Types

Support for exporting all data, selected data, current page data, and filtered data

📊 CSV Format Support

Complete CSV export functionality with custom delimiters and encoding support

🔄 Data Transformation

Powerful data transformation features including formatting, calculated fields, and nested object handling

🔗 Seamless Integration

Perfect integration with HiTable component, automatically retrieves table state and data

🛡️ TypeScript Support

Complete TypeScript type definitions for excellent development experience

✨ User Experience

Loading states, progress indicators, error handling and complete user interaction experience

🚀 Quick Start

Basic Usage

The simplest way to integrate the export component:

<template>
<div class="space-y-4">
  <!-- HiTable and HiExport Integration -->
  <HiTable
    :data="users"
    :columns="tableColumns"
    :config="tableConfig"
  >
    <template #toolbar-actions="{ table }">
      <HiExport
        :table="table"
        :original-data="users"
        :columns="exportColumns"
        filename="users-export"
        button-text="Export User Data"
      />
    </template>
  </HiTable>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HiTable } from '@/components/HiTable'
import { HiExport } from '@/components/HiExport'
import type { ExportColumn } from '@/components/HiExport/types'

// Sample user data
const users = ref([
{ id: '1', name: 'John Doe', email: '[email protected]', role: 'Admin', createdAt: '2024-01-15' },
{ id: '2', name: 'Jane Smith', email: '[email protected]', role: 'User', createdAt: '2024-01-16' },
])

// Table column configuration
const tableColumns = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'email', header: 'Email' },
{ accessorKey: 'role', header: 'Role' },
]

// Export column configuration (can be different from table columns)
const exportColumns: ExportColumn[] = [
{ key: 'id', header: 'User ID' },
{ key: 'name', header: 'Name' },
{ key: 'email', header: 'Email Address' },
{ key: 'role', header: 'User Role' },
{ key: 'createdAt', header: 'Created At' },
]

// Basic table configuration
const tableConfig = {
rowSelection: { enabled: true }, // Enable row selection for "export selected" functionality
pagination: { pageSize: 10 },
}
</script>

🔧 API Reference

Props

Property	Type	Default	Description
`table`	`Table<any>`	-	HiTable component instance
`originalData`	`any[]`	-	Original data array
`columns`	`ExportColumn[]`	-	Export column configuration array
`filename`	`string`	’export’	Base name for the exported file
`config`	`ExportConfig`	See below	Export configuration object
`disabled`	`boolean`	false	Whether to disable export functionality
`buttonText`	`string`	’Export’	Display text for export button
`buttonVariant`	`'default' \| 'outline' \| 'ghost' \| 'secondary'`	’outline’	Button style variant
`buttonSize`	`'default' \| 'sm' \| 'lg'`	’sm’	Button size

ExportColumn Interface

interface ExportColumn {
// Property key in the data object
key: string
// Column header in the exported file
header: string
// Optional: Data transformation function
accessor?: (row: any) => any
}

// Usage example
const exportColumns: ExportColumn[] = [
// Simple field mapping
{ key: 'name', header: 'Name' },

// Nested object access
{
  key: 'address',
  header: 'City',
  accessor: (user) => user.address.city
},

// Data formatting
{
  key: 'salary',
  header: 'Salary',
  accessor: (user) => `$${user.salary.toLocaleString()}`
}
]

ExportConfig Interface

interface ExportConfig {
// Basic configuration
filename?: string        // Filename (without extension)
includeHeaders?: boolean // Whether to include headers, default true
delimiter?: string       // CSV delimiter, default ','
encoding?: string        // File encoding, default 'utf-8'
dateFormat?: string      // Date format, default 'YYYY-MM-DD'

// Advanced configuration
transform?: (data: any[]) => any[]  // Data preprocessing function
}

// Complete configuration example
const exportConfig: ExportConfig = {
filename: 'user-report',
includeHeaders: true,
delimiter: ',',
encoding: 'utf-8',
dateFormat: 'YYYY-MM-DD HH:mm:ss',
transform: (data) => {
  return data.map(item => ({
    ...item,
    displayName: `${item.firstName} ${item.lastName}`,
    formattedAmount: `$${item.amount.toFixed(2)}`
  }))
}
}

🎯 Use Cases

User Management System

Suitable for data export scenarios such as user lists and role management.

Order Data Analysis

Supports export analysis of business data such as order lists and sales reports.

Product Management

Handles export of complex data structures such as product catalogs and inventory reports.

📚 Best Practices

1. Export Column Configuration Optimization

Separate export columns from display columns
Use accessor functions wisely for data transformation
Provide user-friendly export formats for complex fields

2. Performance Optimization

Use transform for batch preprocessing of large datasets
Set reasonable pagination to avoid processing too much data at once
Use debouncing to handle continuous clicks

3. User Experience

Provide clear export progress indicators
Handle export failure error cases
Add loading states to export buttons

🚨 Common Issues

HiTable Data Grid - Data table that integrates perfectly with the export component
HiForm Form Builder - Used for building data entry forms

HiExport Data Export Component

HiExport Data Export Component

✨ Core Features

🚀 Quick Start

Basic Usage

🔧 API Reference

Props

ExportColumn Interface

ExportConfig Interface

🎯 Use Cases

User Management System

Order Data Analysis

Product Management

📚 Best Practices

1. Export Column Configuration Optimization

2. Performance Optimization

3. User Experience

🚨 Common Issues

🔗 Related Components