Create simple POS with React.js, Node.js, and MongoDB #14: Export PDF, Excel, CSV, Bulk Delete, Inline Editing

Create simple POS with React.js, Node.js, and MongoDB #14: Export PDF, Excel, CSV, Bulk Delete, Inline Editing

Create simple POS with React.js, Node.js, and MongoDB #14: Export PDF, Excel, CSV, Bulk Delete, Inline Editing

Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

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:

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:

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:

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.

Now, we need to pass the plugin and custom function to our Table component using useTable hook as directed in the code snippet below:

Now, we need buttons that trigger the function to create and export the file in the required format. We will implement the button components at the top of our Table component as shown in the code snippet below:

Here, each button has its ownexportData function on its onClick event. Along with function calls, we are also passing the required format based on buttons.

Hence, we will get the result as shown in the demo below:

Export pdf result`

Export pdf result

As we can see, as soon as we click on the ‘Export as PDF’ button, a dialog box appears which enables us to save our created PDF to our local drive.

This marks the completion of our document export feature in the react table. Now, we are going to move on to our next features which are bulk data delete and inline entry editing.

Bulk Delete

The bulk delete operation refers to the deletion of multiple selected rows from the react table. For the selection of columns, we are going to add a checkbox to each column and use the useRowSelect hook for checking and selecting the row to be deleted. We need to implement the frontend feature and backend feature for this operation.

First, we are going to start with the frontend.

Frontend

Here, we need to import useRowSelecthook from react-table as highlighted in the code snippet below:

Next, we need to create a function named IndeterminateCheckbox in order to handle the checkbox selection. The implementation of this function is provided in the code snippet below:

Now, we need to create a custom column to display the checkboxes as directed in the code snippet below:

Hence, we will get the checkbox column as displayed in the demo screenshot below:

Check box column

Check box column

As we can see, we have got the checkbox column using which we can select the table rows to be deleted.

Now, we add a new button to trigger function for bulk delete operation. We are going to use selectedRowIds data to toggle the checkboxes and send the selected row data to another function. The code for this is provided in the code snippet below:

Hence, we will get the result as displayed in the following demo:

Select multiple row in react table

Select multiple row in react table

Next, we need to pass the action data from the parent component to trigger the bulk delete function. The implementation of BulkDelete function is provided in the code snippet below:

Here, we have passed the selectedFlatRows and parent_action data as a parameter to the function. Then, we map through the data and store the ids in the selected_id variable. Lastly, by using swal components we display the alert dialog for deletion and dispatch the parent action for bulk deletion upon affirmative delete signal from the user.

Remember to import dispatch method from redux.

Now, we need to import the useSelector and useDispatch hooks from react-redux package as directed in the code snippet below:

Next, we need to pass the new action from the parent component to the Table component as highlighted in the code snippet below:

Then, we need to create a new action to interact with the backend. Nothing is special about this process, we just need to change the endpoint URI as highlighted in the code snippet below:

Now, let’s move on to the creation of backend API for bulk deletion.

Backend

The implementation of backend API for bulk delete operation is quite simple. We just need to copy the code from the delete function that we have created before and replace some of its coding expressions with the code provided in the code snippet below:

Here, we need to fetch the ids sent from the frontend. The received ids are in the raw string format. Hence, we need to convert them into an array using split method. Then, we need to use deleteMany method from the POS_Machine module and pass the array of ids as a parameter to the method. This completes our implementation of API endpoint for bulk delete operation in the backend as well.

Hence, we will get the result as displayed in the following demo:

Bulk delete result

Bulk delete result

As we can notice, we can now select the rows that we want to delete and trigger the delete operation from dialog to delete the selected rows.

Inline Editing

The Inline editing is quite simple in the react table for the frontend part as it itself provides a function to implement it. We just need to add an API endpoint to update the function and we are done.

Frontend

First, we need to create a function to transform all cells in the table to the input type. This function will handle the input change and send the updated data to the parent component. The function is named EditableCell and its implementation is provided in the code snippet below:

Then, we need to create a function to assign new cell type as directed in the code snippet below:

Next, we need to assign it to the main function in useTable hook as directed in the code snippet below:

Now, we get the input field in each table cell for the inline edition. It enables us to change or update the value in the table cell directly making the table more convenient to use.

The result is displayed in the following demo:

Change text cell to input cell

Change text cell to input cell

Now, in order to handle the change in table cell data, we assign a new function from the parent component.

In the parent component, we need to create a new function to handle data change. Here, we want to handle the following three data:

  1. id of database row
  2. column name
  3. value

These three data types are required to make an update on the database. When we get the data from the Table component, we will restructure and send to action as directed in the code snippet below:

Next, we pass the updateMyData function to the Table component as a prop as highlighted in the code snippet below:

Next, we need to update the Table function in Table component and import the updateMyData function from props:

Then, we need to assign the subsequent function to our useTable hook as highlighted in the code snippet below:

Now, we are done with gathering updated data from the table. Next, we need to create a new action to send updated data to the server. The function is named inline_update and its implementation is provided in the code snippet below:

Backend

For the Backend part, we need to implement a new API endpoint to handle the update. We need to accept the data from the frontend and make changes to the specific data using id and column value. The implementation of the API endpoint is provided in the code snippet below:

Now, we are done with implementing backend functionality for inline editing as well.

Hence, we will get the result as shown in the demo below:

Inline editable result

Inline editable result

As we can see, we can now directly change or update any table cell value directly from the input field at that cell.

Finally, we have successfully implemented the three major features in our React table. The document export, bulk deletion, and inline editing are some of the most useful features for any table that makes the table feature-rich and efficient for users.

Conclusion

As if the previous chapter to make our react table more power-packed was enough, we made the table more feature-rich and dynamic in this chapter. Some of the popular and convenient table features like bulk deletion and inline editing were added. These features make it easier to perform delete operation and updating of the table values.

Not to forget the document export feature available in three formats PDF, EXCEL, and CSV. This feature enables us to download the table value in the report formats and share it with others. One of the most essential features available in almost all the data and table-based applications nowadays. The stepwise guidance to implement these features will surely help not only to complete this chapter but also in other projects as well.

In the next chapter, we will secure our app for role-based access control to handle employees.

The coding implementations used in this tutorial chapter are available on Github for Frontend and Backend.

See you in the next chapter! Good day folks!

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #17: Stat screen

Now, we are going to implement the final chapter for this tutorial series where we are implementing a graphical representation section on our ...

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. ...

Create simple POS with React.js, Node.js, and MongoDB #15: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy