In the previous chapter, we integrated grouping and sorting features to our react table along with pagination. These are some basic feature that makes out Table component intuitive and efficient.

In this chapter, we are going to continue from where we left off from the previous chapter. We are about to add more features to our react table to make it feature-rich and dynamic. Here, we are going to add features like document export, bulk delete, and inline editing. This will be a walkthrough tutorial for every important feature that a table should have. This may help us in other projects as well while implementing dynamic table components.

The idea is to start with the implementation of document export in which we are going to add a feature to export the table data in the form of PDF, EXCEL, or CSV. Then, we are going to move on to bulk data deletion and inline editing for which we need to add a backend API endpoint as well.

So, let’s get started!

Exporting to PDF, Excel, CSV

We are going to start by implementing a feature that allows us to export our table data in the form of PDF, EXCEL, or CSV. The react table package doesn’t have a built-in module for this feature. Hence, a third party plugin named react-table-plugin is required for this purpose.

So, we need to install the react-table-plugin package along with all its required dependencies. For that, we need to run the following command in our project terminal:

1

yarn add react- table-plugin papaparse xlsx jspdf jspdf- autotable

Then, we need to import the required components from the react-table-plugin package and dependent packages in our Table Component as directed in the code snippet below:

import   {

  useExportData

}    from    'react-table-plugins'

import Papa  from    "papaparse";

import XLSX  from    "xlsx";

import JsPDF  from    "jspdf";

 import    "jspdf-autotable";
 

Next, we need to create a function named getExportFileBlob to handle the file creation. We are going to pass columns, data, fileType and fileName parameter object to the function. The overall implementation of this function is provided in the code snippet below:

 function   getExportFileBlob({    columns,    data,    fileType,    fileName   })   {

          if   ( fileType   ===    "csv")   {

              // CSV example

              const    headerNames   =    columns.filter(( c)   = >  c. Header   !=    'Action').map(( col)   = >  col. exportValue);

              const    csvString   =    Papa.unparse({    fields:    headerNames,    data   });

              return    new   Blob([ csvString],   {    type:    "text/csv"   });

         }    else    if   ( fileType   ===    "xlsx")   {

              // XLSX example

              const    header   =    columns.filter(( c)   = >  c. Header   !=    'Action').map(( c)   = >  c. exportValue);

              const    compatibleData   =    data.map(( row)   = > {

                  const    obj   =   {};

                  header. forEach(( col,    index)   = > {

                      obj[ col]   =    row[ index];

                 });

                  return    obj;

             });

             let  wb   =    XLSX. utils.book_new();

             let  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   =    columns.filter(( c)   = >  c. Header   !=    'Action').map(( column)   = >  column. exportValue);

              const    doc   =    new   JsPDF();

              doc.autoTable({

                  head:   [ headerNames],

                  body:    data,

                  styles:   {

                      minCellHeight:   9,

                      halign:    "left",

                      valign:    "center",

                      fontSize:   11,

                 },

             });

              doc.save(`${ fileName}. pdf`);

              return    false;

         }

          // Other formats goes here

          return    false;

     }

Here, we have used the components from the dependent packages and fileType variable to decide which file format to create and export and finally we are saving the document using the save method.

#javascript #node.js #pos tutorial #react #react native