Error: React Table: Export Blob is mandatory

[karthik282]

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 }) => (

<Tooltip
title='Edit'
onClick={() => props.onModifiyRecord(row)}
className='edit-icon'
data-testid='EditIcon'
>

<EditIcon sx={{ fontSize: 20 }} />




<Tooltip
title='Delete'
onClick={() => props.onDeleteRecord(row)}
className='delete-icon'
data-testid='DeleteIcon'
>

<DeleteIcon sx={{ fontSize: 25 }} />

),
},
]);

}

);

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 (

{/* <button
className="btn btnexport mr-1"
onClick={() => {
exportData("csv", true);
}}
>
Export as CSV
{" "}
<button
className="btn btnexport mr-1"
onClick={() => {
exportData("xlsx", true);
}}
>
Export as xlsx
{" "} */}
<button
className="btn btnexport mr-1"
onClick={() => {
exportData("pdf", true);
}}
>

Export as PDF

<table {...getTableProps()} className='table-striped'>

{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}

{column.isSorted ? (
column.isSortedDesc ? (

) : (

)
) : (
''
)}

{column.canFilter ? column.render('Filter') : null}

))}

))}

<tbody {...getTableBodyProps()}>
{page.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>{cell.render('Cell')}
))}

);
})}

Page{' '}

{pageIndex + 1} of {pageOptions.length}
{' '}


| Go to:{' '}
<input
defaultValue={pageIndex + 1}
onChange={paginationInput}
style={{ width: '50px' }}
/>
{' '}

{[10, 20, 30, 40, 50].map((pageSizeNumber) => ( Show {pageSizeNumber} ))}

{'<<'}
{' '}

{'<'}
{' '}

{'>'}
{' '}

{'>>'}
{' '}

);
}

export default TableController;
`

[gargroh]

@karthik282 codesandbox of the issue will be helpful in addressing this..