ExportButton

Exports the current list, with filters applied, but without pagination.

Installation

pnpm dlx shadcn@latest add @shadmin/export-button

It relies on the exporter function passed to the <List> component, via the ListContext. It's disabled for empty lists.

Usage

By default, the <ExportButton> is included in the List actions.

You can add it to a custom actions toolbar:

import { CreateButton, ExportButton, TopToolbar } from "@/components/admin";
 
const PostListActions = () => (
  <>
    <FilterButton />
    <CreateButton />
    <ExportButton />
  </>
);
 
export const PostList = () => <List actions={<PostListActions />}>...</List>;

It calls dataProvider.getList() with perPage=maxResults then invokes exporter(data, fetchRelatedRecords, dataProvider, resource).

Props

Prop	Required	Type	Default	Description
`className`	Optional	`string`	`cursor-pointer`	Extra classes
`exporter`	Optional	`Exporter`	From ListContext	Custom exporter function
`icon`	Optional	`ReactNode`	Download icon	Custom icon
`label`	Optional	`string`	`ra.action.export`	i18n key
`maxResults`	Optional	`number`	`1000`	Max records to fetch
`meta`	Optional	`any`	-	Provider meta parameter
`onClick`	Optional	`(e)=>void`	-	Extra click handler
`ref`	Optional	`Ref<HTMLButtonElement>`	-	Forwarded to the underlying `<Button>`

`icon`

Replaces the default <Download /> shown alongside the label. Pass any lucide-react icon to convey a different action.

`ref`

Forwards a ref to the underlying <Button> element.

import { useRef } from "react";
import { ExportButton } from "@/components/admin";
 
const MyToolbar = () => {
  const ref = useRef<HTMLButtonElement>(null);
  return <ExportButton ref={ref} />;
};

import { FileSpreadsheet } from "lucide-react";
import { ExportButton } from "@/components/admin";
 
<ExportButton icon={<FileSpreadsheet />} />;

`label`

By default, the label is the translation of the ra.action.export key, which reads "Export".

You can customize the label for a specific resource by adding a resources.{resource}.action.export key to your translation messages. It receives %{name} (the singular resource name):

const messages = {
  resources: {
    posts: {
      action: {
        export: "Download %{name}",
      },
    },
  },
};

You can also pass a custom string or translation key directly via the label prop:

<ExportButton label="Download CSV" />
<ExportButton label="resources.posts.action.export" />