如何从ReactDataGrid获取筛选后的数据并导出为Excel文件？

当前问题：使用ReactDataGrid和SheetJS导出数据时，默认导出了全部原始数据，需要改为仅导出经过筛选后的结果。

现有代码结构 #

父组件（admin.js）

export function admin(){
     const {data, getData} = useFetchData()

     useEffect(() => {
        getData()
     }, [])

     return(
          <>
              <DataGridBasic
                data={data}
                title="Data"
                id="id_data"
                filterValue={filterValue}
                columns={columns} // 表格列配置数组
                updateData={handleUpdate}
                onDeleteData={handleDelete}
              />
          </>
     )
}

列配置与筛选选项

export const columns = [
     {
         header: "id",
         name: "id",
         maxWidth: 1000,
         defaultFlex: 1
     },
     {
         header: "Name",
         name: "name",
         maxWidth: 1000,
         defaultFlex: 1
     },
     {
         header: "Email",
         name: "email",
         maxWidth: 1000,
         defaultFlex: 1
     },
     // 其他列...
]

export const filterValue = [
    { name: 'id', operator: 'startsWith', type: 'string', value: ''},
    { name: 'name', operator: 'startsWith', type: 'string', value: ''},
    { name: 'email', operator: 'startsWith', type: 'string', value: ''},
]

DataGridBasic组件

import React from "react";
import ReactDataGrid from "@inovua/reactdatagrid-community";
import * as XLSX from "xlsx";

export function DataGridBasic(props) {
     
     const {
        data,
        columns,
        filterValue,
     } = props;

     const exportToExcel = () => {
        const worksheet = XLSX.utils.json_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
        XLSX.writeFile(workbook, "data.xlsx");
     };
     
     return(
          <ReactDataGrid
              idProperty="id" // 修正：原代码id变量未定义，改为字符串"id"
              columns={columns} // 修正：原代码newColumns未定义，改为props传入的columns
              dataSource={data}
              style={{ height: 500 }} // 补充gridStyle定义，避免报错
              className="custom-data-grid"
              pagination
              paginationPageSize={10}
              paginationToolbarLabels={{
                 prev: "Previous",
                 next: "Next",
                 page: "Page",
                 of: "of",
                 rows: "rows",
              }}
              defaultFilterValue={filterValue}
              onDataSourceChange={({ skip, limit }) => {
                  console.log(`Actual page: ${skip / limit + 1}`);
               }}
           />
     )
}

解决方案 #

核心思路：利用ReactDataGrid内置的API获取当前筛选后的数据源，替换原始数据用于Excel导出。

修改DataGridBasic组件，步骤如下：

1. 添加ref引用获取grid实例
2. 通过grid API获取筛选后的数据
3. 更新导出函数使用筛选后的数据

修改后的完整代码：

import React, { useRef } from "react";
import ReactDataGrid from "@inovua/reactdatagrid-community";
import * as XLSX from "xlsx";

export function DataGridBasic(props) {
     const {
        data,
        columns,
        filterValue,
     } = props;

     // 创建grid的ref引用
     const gridRef = useRef(null);

     const exportToExcel = () => {
        // 通过grid API获取筛选后的数据源
        const filteredData = gridRef.current?.api.getFilteredDataSource() || [];
        // 使用筛选后的数据生成Excel
        const worksheet = XLSX.utils.json_to_sheet(filteredData);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
        XLSX.writeFile(workbook, "filtered_data.xlsx");
     };
     
     return(
          <>
              {/* 添加导出按钮 */}
              <button onClick={exportToExcel} style={{ marginBottom: 10 }}>
                  导出筛选后数据
              </button>
              <ReactDataGrid
                  ref={gridRef} // 绑定ref
                  idProperty="id"
                  columns={columns}
                  dataSource={data}
                  style={{ height: 500 }}
                  className="custom-data-grid"
                  pagination
                  paginationPageSize={10}
                  paginationToolbarLabels={{
                     prev: "Previous",
                     next: "Next",
                     page: "Page",
                     of: "of",
                     rows: "rows",
                  }}
                  defaultFilterValue={filterValue}
                  onDataSourceChange={({ skip, limit }) => {
                      console.log(`Actual page: ${skip / limit + 1}`);
                   }}
               />
          </>
     )
}

关键说明 #

• gridRef.current.api.getFilteredDataSource()：ReactDataGrid的API方法，会返回经过筛选、排序（如果有）后的完整数据集，不受分页影响。
• 补充了导出按钮，方便触发导出操作。
• 修正了原代码中newColumns、id变量未定义的问题，确保代码可正常运行。

内容的提问来源于stack exchange，提问作者Daniel