gargroh
Error: React Table: Export Blob is mandatory
Hi @gargroh
I am facing issue while integration export pdf csv xlsx .When i click button App is getting crashed. Error: React Table: Export Blob is mandatory
Details as follows
"react": "^17.0.1", "react-dom": "^17.0.1", "react-export-excel": "^0.5.3", "react-table": "^7.7.0", "react-table-plugins": "^1.3.2", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.23", "papaparse": "^5.3.1",
`/* eslint-disable react/button-has-type / / eslint-disable react/prop-types / / eslint-disable react/jsx-props-no-spreading / / eslint-disable no-nested-ternary */
import React, { useMemo } from 'react'; import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; import { useTable, useGlobalFilter, useFilters, useRowSelect, usePagination, useSortBy, } from 'react-table'; import { useExportData } from "react-table-plugins"; import Papa from "papaparse"; import XLSX from "xlsx"; import JsPDF from "jspdf"; import "jspdf-autotable"; import { AiFillCaretUp, AiFillCaretDown } from 'react-icons/ai'; import './Table.css';
function TableController(props) { const { tableColumn, tableData, hiddenColumns = [] } = props;
const columns = useMemo(() => tableColumn, [tableColumn]); const data = useMemo(() => tableData, [tableData]);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
nextPage,
previousPage,
canPreviousPage,
canNextPage,
pageOptions,
state,
gotoPage,
pageCount,
setPageSize,
prepareRow,
exportData
} = useTable(
{
columns,
data,
getExportFileBlob,
autoRestPage: false,
initialState: { pageIndex: 0, hiddenColumns },
sortBy: [
{
id: '',
desc: true,
},
],
},
useFilters,
useGlobalFilter,
useSortBy,
usePagination,
useExportData,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columnHeader) => [
...columnHeader,
{
id: 'icons',
Cell: ({ row }) => (
<div className='row justify-content-center'>
<Tooltip
title='Edit'
onClick={() => props.onModifiyRecord(row)}
className='edit-icon'
data-testid='EditIcon'
>
<IconButton>
<EditIcon sx={{ fontSize: 20 }} />
</IconButton>
</Tooltip>
<Tooltip
title='Delete'
onClick={() => props.onDeleteRecord(row)}
className='delete-icon'
data-testid='DeleteIcon'
>
<IconButton>
<DeleteIcon sx={{ fontSize: 25 }} />
</IconButton>
</Tooltip>
),
},
]);
}
);
const { pageIndex, pageSize } = state;
const paginationInput = (e) => { const nextpage = e.target.value ? Number(e.target.value) - 1 : 0; gotoPage(nextpage); };
const paginationSetPage = (e) => { setPageSize(Number(e.target.value)); };
const pageZero = () => { gotoPage(0); };
const pagePrevious = () => { previousPage(); };
const pageNext = () => { nextPage(); };
const pageGoto = () => { gotoPage(pageCount - 1); };
const getExportFileBlob = ({ column, tabledata, fileType, fileName }) => {
if (fileType === "csv") {
// CSV example
const headerNames = column
.filter((c) => c.Header !== "Action")
.map((col) => col.exportValue);
const csvString = Papa.unparse({ fields: headerNames, tabledata });
return new Blob([csvString], { type: "text/csv" });
} if (fileType === "xlsx") {
// XLSX example
const header = column
.filter((c) => c.Header !== "Action")
.map((c) => c.exportValue);
const compatibleData = tabledata.map((row) => {
const obj = {};
header.forEach((col, index) => {
obj[col] = row[index];
});
return obj;
});
const wb = XLSX.utils.book_new();
const ws1 = XLSX.utils.json_to_sheet(compatibleData, {
header
});
XLSX.utils.book_append_sheet(wb, ws1, "React Table Data");
XLSX.writeFile(wb, `${fileName}.xlsx`);
// Returning false as downloading of file is already taken care of
return false;
}
// PDF example
if (fileType === "pdf") {
const headerNames = column
.filter((c) => c.Header !== "Action")
.map((col) => col.exportValue);
const doc = new JsPDF();
doc.autoTable({
head: [headerNames],
body: tabledata,
styles: {
minCellHeight: 9,
halign: "left",
valign: "center",
fontSize: 11
}
});
doc.save(`${fileName}.pdf`);
return false;
}
// Other formats goes here
return false;
}
return (
export default TableController; `
