Active Grid

Export Utilities - Active Grid

Overview

New in v5.1

Export utilities enable users to export grid data to various formats. These functions handle formatting, filtering, and file generation automatically.

import { 
  exportToCSV, 
  exportToJSON, 
  exportToExcel,
  copyToClipboard,
} from '@workspace/active-grid';

exportToCSV

Export data to CSV format.

exportToCSV(
  rows: Row<TData>[],
  table: Table<TData>,
  filename: string = 'export.csv'
): void

Basic Usage

import { exportToCSV } from '@workspace/active-grid';

function ExportButton() {
  const table = useActiveGrid();
  
  const handleExport = () => {
    exportToCSV(
      table.getFilteredRowModel().rows,
      table,
      'users.csv'
    );
  };
  
  return <Button onClick={handleExport}>Export to CSV</Button>;
}

Export Selected Rows

const handleExportSelected = () => {
  const selectedRows = table.getSelectedRowModel().rows;
  
  if (selectedRows.length === 0) {
    toast.error('No rows selected');
    return;
  }
  
  exportToCSV(selectedRows, table, 'selected-users.csv');
};

Export All Rows

const handleExportAll = () => {
  exportToCSV(
    table.getRowModel().rows,
    table,
    'all-users.csv'
  );
};

exportToJSON

Export data to JSON format.

exportToJSON(
  rows: Row<TData>[],
  table: Table<TData>,
  filename: string = 'export.json'
): void

Basic Usage

import { exportToJSON } from '@workspace/active-grid';

const handleExport = () => {
  exportToJSON(
    table.getFilteredRowModel().rows,
    table,
    'users.json'
  );
};

Format

The exported JSON is formatted as an array of objects:

[
  {
    "id": "1",
    "name": "John Doe",
    "email": "john@example.com",
    "status": "active"
  },
  {
    "id": "2",
    "name": "Jane Smith",
    "email": "jane@example.com",
    "status": "inactive"
  }
]

exportToExcel

Export data to Excel (XLSX) format.

exportToExcel(
  rows: Row<TData>[],
  table: Table<TData>,
  filename: string = 'export.xlsx'
): Promise<void>

Excel export is lazy-loaded to reduce bundle size. The first export may take slightly longer as it loads the Excel library.

Basic Usage

import { exportToExcel } from '@workspace/active-grid';

const handleExport = async () => {
  try {
    await exportToExcel(
      table.getFilteredRowModel().rows,
      table,
      'users.xlsx'
    );
    toast.success('Exported to Excel');
  } catch (error) {
    toast.error('Export failed');
  }
};

Features

Excel export includes:

Column headers
Formatted values
Auto-sized columns
Proper data types
Multiple sheets (future)

copyToClipboard

Copy data to clipboard in tab-separated format.

copyToClipboard(
  rows: Row<TData>[],
  table: Table<TData>,
  includeHeaders: boolean = true
): Promise<boolean>

Basic Usage

Without Headers

Export Button Component

New in v5.1

Pre-built export button with dropdown menu:

Configuration

Custom Export Button

Export with Confirmation

Export Selected Only

Export with Custom Formatting

The utilities respect column formatting from valueFormatter:

Column Selection

Export only visible columns:

Complete Example

Browser Compatibility

Export utilities work in:

Chrome/Edge 90+
Firefox 88+
Safari 14+

File Size Limits

CSV/JSON: No practical limit (browser dependent)
Excel: Tested up to 100,000 rows
Clipboard: ~5 MB (browser dependent)

Best Practices

✅ DO

Export filtered data
Show export progress for large datasets
Provide format options
Use meaningful filenames
Handle errors gracefully
Respect column visibility

❌ DON'T

Don't export sensitive data
Don't block UI during export
Don't forget error handling
Don't export unfiltered data by default
Don't ignore column formatting
Don't export hidden columns

Performance

For large exports (10,000+ rows):

CSV: Fast (~1-2 seconds)
JSON: Fast (~1-2 seconds)
Excel: Moderate (~3-5 seconds, lazy loaded)

TypeScript

import { copyToClipboard } from '@workspace/active-grid';

const handleCopy = async () => {
  const success = await copyToClipboard(
    table.getSelectedRowModel().rows,
    table,
    true // Include headers
  );
  
  if (success) {
    toast.success('Copied to clipboard');
  } else {
    toast.error('Copy failed');
  }
};

import { ExportButton } from '@workspace/active-grid';

<ActiveGrid
  toolbar={{
    actions: (table) => <ExportButton table={table} />,
  }}
  export={{
    enabled: true,
    formats: ['xlsx', 'csv', 'json'],
    filename: 'users-export',
  }}
  {...}
/>

import { exportToCSV, exportToJSON, exportToExcel } from '@workspace/active-grid';

function CustomExportButton() {
  const table = useActiveGrid();
  
  const handleExport = async (format: 'csv' | 'json' | 'xlsx') => {
    const rows = table.getFilteredRowModel().rows;
    const filename = `export-${Date.now()}`;
    
    try {
      switch (format) {
        case 'csv':
          exportToCSV(rows, table, `${filename}.csv`);
          break;
        case 'json':
          exportToJSON(rows, table, `${filename}.json`);
          break;
        case 'xlsx':
          await exportToExcel(rows, table, `${filename}.xlsx`);
          break;
      }
      toast.success('Export successful');
    } catch (error) {
      toast.error('Export failed');
    }
  };
  
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">
          <Download className="mr-2 h-4 w-4" />
          Export
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem onClick={() => handleExport('csv')}>
          Export as CSV
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => handleExport('json')}>
          Export as JSON
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => handleExport('xlsx')}>
          Export as Excel
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

function ExportWithConfirm() {
  const table = useActiveGrid();
  
  const handleExport = async () => {
    const rowCount = table.getFilteredRowModel().rows.length;
    
    if (rowCount > 10000) {
      const confirmed = confirm(
        `Export ${rowCount} rows? This may take a moment.`
      );
      if (!confirmed) return;
    }
    
    await exportToExcel(
      table.getFilteredRowModel().rows,
      table,
      'large-export.xlsx'
    );
  };
  
  return <Button onClick={handleExport}>Export</Button>;
}

function ExportSelectedButton() {
  const table = useActiveGrid();
  const selectedCount = table.getSelectedRowModel().rows.length;
  
  if (selectedCount === 0) return null;
  
  const handleExport = () => {
    exportToCSV(
      table.getSelectedRowModel().rows,
      table,
      `selected-${selectedCount}-rows.csv`
    );
  };
  
  return (
    <Button onClick={handleExport}>
      Export {selectedCount} Selected
    </Button>
  );
}

const columns: GridColumnDef<Order>[] = [
  {
    accessorKey: 'amount',
    header: 'Amount',
    meta: {
      valueFormatter: (value) => `$${value.toFixed(2)}`,
    },
  },
  {
    accessorKey: 'date',
    header: 'Date',
    meta: {
      valueFormatter: (value) => new Date(value).toLocaleDateString(),
    },
  },
];

// Export will use formatted values
exportToCSV(rows, table, 'orders.csv');

// Hidden columns are automatically excluded
const handleExport = () => {
  // Only visible columns are exported
  exportToCSV(
    table.getFilteredRowModel().rows,
    table,
    'visible-columns.csv'
  );
};

import { 
  exportToCSV, 
  exportToJSON, 
  exportToExcel,
  copyToClipboard,
} from '@workspace/active-grid';

function ExportToolbar() {
  const table = useActiveGrid();
  const selectedCount = table.getSelectedRowModel().rows.length;
  const filteredCount = table.getFilteredRowModel().rows.length;
  
  const getRows = () => {
    return selectedCount > 0
      ? table.getSelectedRowModel().rows
      : table.getFilteredRowModel().rows;
  };
  
  const getFilename = (ext: string) => {
    const count = selectedCount > 0 ? selectedCount : filteredCount;
    const type = selectedCount > 0 ? 'selected' : 'filtered';
    return `export-${type}-${count}-rows.${ext}`;
  };
  
  return (
    <div className="flex gap-2">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="sm">
            <Download className="mr-2 h-4 w-4" />
            Export {selectedCount > 0 ? `${selectedCount} selected` : `${filteredCount} rows`}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem 
            onClick={() => exportToCSV(getRows(), table, getFilename('csv'))}
          >
            CSV Format
          </DropdownMenuItem>
          <DropdownMenuItem 
            onClick={() => exportToJSON(getRows(), table, getFilename('json'))}
          >
            JSON Format
          </DropdownMenuItem>
          <DropdownMenuItem 
            onClick={async () => {
              await exportToExcel(getRows(), table, getFilename('xlsx'));
            }}
          >
            Excel Format
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem 
            onClick={async () => {
              const success = await copyToClipboard(getRows(), table, true);
              if (success) toast.success('Copied to clipboard');
            }}
          >
            Copy to Clipboard
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

import { Row, Table } from '@tanstack/react-table';
import { exportToCSV } from '@workspace/active-grid';

type User = {
  id: string;
  name: string;
};

const handleExport = (table: Table<User>) => {
  const rows: Row<User>[] = table.getFilteredRowModel().rows;
  exportToCSV(rows, table, 'users.csv');
};

Export Utilities

Overview

exportToCSV

Basic Usage

Export Selected Rows

Export All Rows

exportToJSON

Basic Usage

Format

exportToExcel

Basic Usage

Features

copyToClipboard

Basic Usage

Without Headers

Export Button Component

Configuration

Custom Export Button

Export with Confirmation

Export Selected Only

Export with Custom Formatting

Column Selection

Complete Example

Browser Compatibility

File Size Limits

Best Practices

Performance

TypeScript

See Also