# Docyrus Data Export Menu
URL: /docs/web/docyrus/docyrus-data-export-menu

Docyrus Data Export Menu component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import {
  DocyrusDataExportMenu,
  encodeDocyrusDataExportColumn,
  type DocyrusDataExportFieldOption,
  type DocyrusDataExportSelection
} from '@docyrus/ui/components/docyrus-data-export-menu';

const DEMO_FIELDS: Array<DocyrusDataExportFieldOption> = [
  { slug: 'title', name: 'Title', type: 'field-text' },
  { slug: 'status', name: 'Status', type: 'field-select' },
  { slug: 'owner', name: 'Owner', type: 'field-userSelect' },
  { slug: 'country', name: 'Country', type: 'field-relation' },
  { slug: 'tags', name: 'Tags', type: 'field-tagSelect' },
  { slug: 'amount', name: 'Amount', type: 'field-number' },
  { slug: 'created_at', name: 'Created', type: 'field-dateTime' }
];

const DEFAULT_VISIBLE = DEMO_FIELDS.slice(0, 4).map(field => field.slug);

function describeSelection(selection: DocyrusDataExportSelection): string {
  if (selection.scope === 'visible') return 'visible columns';
  if (selection.scope === 'all') return 'all columns';

  const encoded = selection.columns.map(encodeDocyrusDataExportColumn).join(', ');

  return `custom columns: ${encoded}`;
}

export function DocyrusDataExportMenuDemo() {
  const [isExporting, setIsExporting] = useState(false);
  const [lastExport, setLastExport] = useState<string>('No export yet');

  async function handleExport(selection: DocyrusDataExportSelection) {
    setIsExporting(true);
    setLastExport(`Preparing ${describeSelection(selection)}...`);

    await new Promise(resolve => window.setTimeout(resolve, 800));

    setLastExport(`Exported ${describeSelection(selection)}`);
    setIsExporting(false);
  }

  return (
    <div className="mx-auto flex h-72 w-full max-w-md flex-col items-center justify-center gap-4">
      
      <p className="text-center text-sm text-muted-foreground">{lastExport}</p>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-docyrus-data-export-menu
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  DocyrusDataExportMenu
} from "@docyrus/ui/components/docyrus-data-export-menu";

<DocyrusDataExportMenu
  onExport={() => {}}
  fields={ReadonlyDocyrusDataExportFieldOption[]}
  visibleSlugs={Readonlystring[]}
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `onExport` | `(selection: DocyrusDataExportSelection) => void \| Promise<void>` | — |
| `fields` | `ReadonlyArray<DocyrusDataExportFieldOption>` | — |
| `visibleSlugs` | `ReadonlyArray<string>` | — |
| `isExporting` | `boolean` | `false` |
| `disabled` | `boolean` | `false` |
| `className` | `string` | — |