# Export Dialog

> Exporting a filtered list: format, period, columns, progress and download.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ExportDialog/)

Exporting a filtered list: format, period, columns, progress and download.

Props: `open` / `onClose` (or `inline`), `title`, `text`, `count`, `formats`, `columns` ({key, label, default: false = off}), `ranges` (false hides the period), `range`, `note`, `onExport(options, progress)` (return a promise; call `progress(0–100)`), `onDownload` or `download` (node), `doneText`.

- Columns with personal data start unchecked.

## Example

```tsx
import { ExportDialog } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      style={{
        display: "grid",
        placeItems: "center",
        padding: 24,
        background: "var(--canvas)",
        borderRadius: "var(--radius-lg)",
      }}
    >
      <ExportDialog
        inline
        title="Export orders"
        count={4812}
        formats={["csv", "xlsx", "json"]}
        columns={[
          {
            key: "id",
            label: "Order number",
          },
          {
            key: "date",
            label: "Date",
          },
          {
            key: "customer",
            label: "Customer",
          },
          {
            key: "product",
            label: "Product",
          },
          {
            key: "net",
            label: "Net",
          },
          {
            key: "vat",
            label: "VAT",
          },
          {
            key: "email",
            label: "Email",
            default: false,
          },
          {
            key: "ip",
            label: "IP address",
            default: false,
          },
        ]}
        note="Personal data is only included when you pick those columns."
        onExport={(o, prog) =>
          new Promise((r) => {
            let x = 0;
            const t = setInterval(() => {
              x += 20;
              prog(x);
              if (x >= 100) {
                clearInterval(t);
                r();
              }
            }, 300);
          })
        }
        onClose={() => {}}
      />
    </div>
  );
}
```

## Props

### ExportDialog

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `boolean` |  |
| `inline?` | `boolean` |  |
| `onClose?` | `() => void` |  |
| `title?` | `string` |  |
| `text?` | `ReactNode` |  |
| `count?` | `number` |  |
| `formats?` | `string[]` |  |
| `format?` | `string` |  |
| `columns?` | `{ key: string; label: string; default?: boolean }[]` |  |
| `ranges?` | `boolean` |  |
| `range?` | `{ from: Date \| null; to: Date \| null } \| null` |  |
| `note?` | `ReactNode` |  |
| `onExport?` | `( o: { format: string; columns: string[]; range: DateRange \| null }, progress: (pct: number) => void, ) => void \| Promise<void>` |  |
| `onDownload?` | `() => void` |  |
| `download?` | `ReactNode` |  |
| `doneText?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |