# rn-docyrus-data-export-menu
URL: /docs/native/docyrus/docyrus-data-export-menu

Toolbar export button that opens an action sheet (visible columns, all columns, or a column picker with Name / ID / Autonumber ID variants for relation, user and choice fields) and reports the selection for a server-side Docyrus export. API-aligned with the web DocyrusDataExportMenu.

## Installation

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

**Dependencies:**
- [tailwind-variants](https://www.npmjs.com/package/tailwind-variants)

The menu only **reports** what the user picked. It does not call the API. Wire `onExport` to [`useDocyrusDataExport`](/docs/native/hooks/use-docyrus-data-export), which POSTs to `/v1/edge/run/query-export`, writes the returned file into the cache directory and opens the share sheet. That hook uses the optional `expo-file-system` and `expo-sharing` peers.

## Usage

```tsx
import { useDocyrusClient } from '@docyrus/signin/react-native';

import {
  DocyrusDataExportMenu,
  encodeDocyrusDataExportColumn,
  type DocyrusDataExportSelection
} from '@/components/docyrus-native/docyrus-data-export-menu';
import { useDocyrusDataExport } from '@/hooks/docyrus-native/use-docyrus-data-export';

export function ExportButton({ dataSourceId, fields, visibleSlugs, query }: Props) {
  const client = useDocyrusClient();
  const { exportData, isExporting } = useDocyrusDataExport({ client: client!, fileName: 'contacts' });

  const handleExport = async (selection: DocyrusDataExportSelection) => {
    const columns = selection.scope === 'all'
      ? '*'
      : selection.scope === 'visible'
        ? visibleSlugs
        : selection.columns.map(encodeDocyrusDataExportColumn);

    await exportData({ dataSourceId, columns, filters: query });
  };

  return (
    <DocyrusDataExportMenu
      onExport={handleExport}
      fields={fields.map(field => ({ slug: field.slug, name: field.name, type: field.type }))}
      visibleSlugs={visibleSlugs}
      isExporting={isExporting} />
  );
}
```

### Behaviour

- The trigger is an outline icon button (`fal download`) that shows a spinner while `isExporting` is set.
- Pressing it opens an `ActionSheet` titled **Export to Excel** with **Export visible columns**, **Export all columns** and, when `fields` is non-empty, **Select columns…**.
- **Select columns…** opens a large-detent sheet with a description, a search input, **Select all / Clear all** for the filtered list, and one checkbox row per field (name + slug). Relation, user and choice fields get a `ToggleGroup` with **Name**, **ID** and, for relation fields only, **Autonumber ID**. The header has **Cancel** and **Export**. The sheet re-seeds its selection every time it opens: `visibleSlugs` start checked (all fields when omitted), and variant fields start on `['name']`.
- `encodeDocyrusDataExportColumn` turns `{ slug: 'country', variants: ['name', 'id'] }` into `country(id,name)`. Variants are always emitted in `id`, `name`, `autonumber_id` order.

## API Reference

### DocyrusDataExportMenuProps

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onExport` | `(selection: DocyrusDataExportSelection) => void \| Promise<void>` | — | Called with the picked entry. Should start the server export (required). |
| `fields` | `ReadonlyArray<DocyrusDataExportFieldOption>` | — | Exportable fields. When set, the **Select columns…** entry appears. |
| `visibleSlugs` | `ReadonlyArray<string>` | every field | Slugs checked when the column sheet opens. |
| `isExporting` | `boolean` | `false` | Show a spinner on the trigger and disable interactions. |
| `disabled` | `boolean` | `false` | Disable the trigger (for example while the data source loads). |
| `className` | `string` | — | Extra classes for the trigger button. |

### DocyrusDataExportSelection

| Variant | Description |
|---------|-------------|
| `{ scope: 'visible' }` | Export the columns currently visible in your list. |
| `{ scope: 'all' }` | Export every exportable field (`columns: '*'`). |
| `{ scope: 'custom'; columns: ReadonlyArray<DocyrusDataExportColumn> }` | The columns picked in the sheet. |

### DocyrusDataExportColumn

| Field | Type | Description |
|-------|------|-------------|
| `slug` | `string` | Field slug. |
| `variants` | `ReadonlyArray<DocyrusDataExportColumnVariant>` | `'name' \| 'id' \| 'autonumber_id'`. Empty keeps the server default. |

### DocyrusDataExportFieldOption

| Field | Type | Description |
|-------|------|-------------|
| `slug` | `string` | Field slug. |
| `name` | `string` | Display name. |
| `type` | `string` | Field type (`field-relation`, `field-userSelect`, `field-select`, …). Decides which variants are offered. |

Variant fields: relation (`field-relation`, `field-relatedField`), user (`field-userSelect`, `field-userMultiSelect`) and choice (`field-select`, `field-multiSelect`, `field-radioGroup`, `field-tagSelect`, `field-status`, `field-approvalStatus`, `field-enum`, `field-systemEnum`).

## Native differences

- The dropdown menu is an `ActionSheet`, and the column dialog is a large-detent sheet with Cancel / Export in the header.
- The column sheet opens after the menu sheet has dismissed (a short delay avoids stacking two iOS modals).
- The export file is not downloaded by the browser. `useDocyrusDataExport` writes it with `expo-file-system` and shares it with `expo-sharing` (shared helpers in the internal `lib/native-export`).

## Translation keys

`ui.dataGrid.export`, `exportLabel`, `exportVisibleColumns`, `exportAllColumns`, `exportSelectColumns`, `exportSelectColumnsTitle`, `exportSelectColumnsDescription`, `exportSelectedSuffix`, `exportSearchColumns`, `exportSelectAll`, `exportClearAll`, `exportNoColumns`, `exportVariantName`, `exportVariantId`, `exportVariantAutonumber`, `exportSubmit`, `exportCancel` (shared with web).

## Components

| Component | Description |
|-----------|-------------|
| `DocyrusDataExportMenu` | Trigger + action sheet + column picker sheet. |

## Helpers

| Export | Description |
|--------|-------------|
| `encodeDocyrusDataExportColumn(column)` | Encodes a column entry as `slug` or `slug(v1,v2)`. |

## Type Exports

| Type | Description |
|------|-------------|
| `DocyrusDataExportMenuProps` | Component props. |
| `DocyrusDataExportSelection` | Picked entry. |
| `DocyrusDataExportScope` | `'visible' \| 'all' \| 'custom'`. |
| `DocyrusDataExportColumn` | A custom column entry. |
| `DocyrusDataExportColumnVariant` | `'name' \| 'id' \| 'autonumber_id'`. |
| `DocyrusDataExportFieldOption` | `{ slug, name, type }`. |