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.
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