How to get the filtered data from ReactDataGrid and export it in excel file?

Question

I'm trying to export the result data of a filter using ReactDataGrid and SheetJS. So far all the data in the table is exported in the excel file when it is generated, but I want to know how can it be possible that the file is generated only with the filtered data.

Component where the table is rendered:

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

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

     return(
          <>
              <DataGridBasic
                data={data}
                title="Data"
                id="id_data"
                filterValue={filterValue}
                columns={columns} // array with the columns of the table
                updateData={handleUpdate}
                onDeleteData={handleDelete}
              />
          </>
     )
}

The data is represented according to the column name in the table, filterValue is an entry in the table used to filter the data. Table columns and options to filter the data:

export const column = [
     {
         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.js:

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}
              columns={newColumns}
              dataSource={data}
              style={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}`);
             }}
         />
     )
}

Any help is appreciated.

Answer 1

Looks like you can use onFilterValueChange={onFilterValueChange} callback to do that.

...
const App = () => {
  const [enableFiltering, setEnableFiltering] = useState(true);

  const onFilterValueChange = useCallback((filterValue) => {
    const data = filter(people, filterValue);
    console.log(data);
  }, []);

  return (
    <div>
      <h3>
        Filterable DataGrid with column.filterEditor - Custom checkbox filter
      </h3>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={enableFiltering}
          onChange={(value) => setEnableFiltering(value)}
        >
          Enable filtering
        </CheckBox>
      </div>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        filterTypes={filterTypes}
        enableFiltering={enableFiltering}
        defaultFilterValue={defaultFilterValue}
        columns={columns}
        dataSource={people}
        onFilterValueChange={onFilterValueChange}
      />
    </div>
  );
}; 
...

The above code is from an example in this post: https://github.com/inovua/reactdatagrid/issues/317

The example link is: https://codesandbox.io/s/reactdatagrid-filter-issue-jhhh7u?file=/src/App.js