xenial-black•4h ago

useExport with select

I want to use export when I select the elements from the checkbox.

2 Replies

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To export only the selected elements from a table using checkboxes, you need to combine row selection logic with the useExport hook. While the knowledge sources do not provide a full, ready-made example for exporting only selected rows, they do clarify that useExport is designed to export data fetched from your data provider, and you can use the mapData property to transform the data before export. Here’s how you can approach this: 1. Track Selected Rows: Use your table component’s row selection feature (e.g., DataGrid for Material UI, Table for Ant Design) to keep track of selected row IDs. 2. Filter Data for Export: When triggering export, use the mapData property of useExport to filter the data so that only selected rows are included in the export. Example Approach (Ant Design)

import { useExport } from "@refinedev/core";
import { List, useTable, ExportButton } from "@refinedev/antd";
import { Table } from "antd";
import React, { useState } from "react";

interface IPost {
  id: number;
  title: string;
}

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const { triggerExport, isLoading: exportLoading } = useExport<IPost>({
    mapData: (item) => {
      // Only export selected rows
      if (selectedRowKeys.includes(item.id)) {
        return item;
      }
      return null;
    },
  });
return (
    <List
      headerButtons={
        <ExportButton onClick={triggerExport} loading={exportLoading} />
      }
    >
      <Table
        {...tableProps}
        rowKey="id"
        rowSelection={{
          selectedRowKeys,
          onChange: setSelectedRowKeys,
        }}
      >
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" />
      </Table>
    </List>
  );
};

import { useExport } from "@refinedev/core";
import { List, useTable, ExportButton } from "@refinedev/antd";
import { Table } from "antd";
import React, { useState } from "react";

interface IPost {
  id: number;
  title: string;
}

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const { triggerExport, isLoading: exportLoading } = useExport<IPost>({
    mapData: (item) => {
      // Only export selected rows
      if (selectedRowKeys.includes(item.id)) {
        return item;
      }
      return null;
    },
  });
return (
    <List
      headerButtons={
        <ExportButton onClick={triggerExport} loading={exportLoading} />
      }
    >
      <Table
        {...tableProps}
        rowKey="id"
        rowSelection={{
          selectedRowKeys,
          onChange: setSelectedRowKeys,
        }}
      >
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" />
      </Table>
    </List>
  );
};

Note: In the mapData function, you filter out items that are not selected. You may need to further filter out nulls before exporting, depending on your implementation. Key Points - useExport is flexible and allows you to transform or filter data before export using mapData. - You must manage the selection state yourself and ensure only selected items are passed to the export logic. - There is no built-in refine feature that directly exports only selected rows; you need to implement the selection and filtering logic as shown above. For more on useExport and mapData, see the documentation: useExport properties and Ant Design ExportButton usage. If you need to perform bulk actions on selected rows, you may also find this related example helpful: Bulk actions with useUpdateMany (as referenced in a GitHub issue), though it is not specifically for export functionality<https://github.com/refinedev/refine/issues/6661.> If you need a more specific example for another UI framework, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4h ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useExport with select

Did you find this page helpful?